/* ==========================================================================
   Kraftlab — dashboard
   Identité : l'atelier et le plan technique. Fond bleu nuit « encre de plan »,
   accent laiton (les outils de l'atelier), bleu calque pour les liens.
   Titres en Bricolage Grotesque (un grotesque au dessin artisanal),
   texte en Instrument Sans.
   ========================================================================== */
:root {
  --ink: #131a26;        /* fond : encre de plan */
  --panel: #1a2333;      /* plateau */
  --panel-2: #222d40;    /* plateau surélevé, survol */
  --border: #2e3a51;     /* traits */
  --line: #273249;       /* traits fins des tableaux */
  --text: #eef1f6;
  --muted: #94a0b8;
  --brass: #f2b544;      /* accent : laiton */
  --brass-ink: #1b1508;  /* texte posé sur le laiton */
  --brass-soft: #f2b54424;
  --calque: #7cc0ff;     /* liens, informations : bleu calque */
  --ok: #3fbf7f;
  --warn: #f2b544;
  --danger: #ef5b5b;

  --bg: var(--ink);      /* alias utilisé par les anciennes règles */
  --accent: var(--brass);

  --r-lg: 16px;          /* plateaux */
  --r-md: 10px;          /* boutons, champs */
  --r-sm: 6px;           /* étiquettes */
  --radius: var(--r-lg);

  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-text: "Instrument Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--ink);
  color: var(--text);
  font: 15px/1.55 var(--font-text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--calque); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code { background: var(--ink); border: 1px solid var(--line); padding: 1px 6px; border-radius: var(--r-sm); font-size: .88em; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.15; font-family: var(--font-display); }
h1 { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: 1.08rem; font-weight: 700; color: var(--text); letter-spacing: -.005em; }
.muted { color: var(--muted); }
.small { font-size: .84rem; }
.center { text-align: center; }
.ok { color: var(--ok); }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--brass); color: var(--brass-ink); padding: 8px 14px; border-radius: var(--r-md); z-index: 20; font-weight: 700; }
.skip:focus { left: 12px; }

/* --- Structure : barre latérale à gauche + contenu --- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.shell { display: flex; min-height: 100vh; flex: 1; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-mark { width: 30px; height: 30px; flex-shrink: 0; }
.brand-mark rect { fill: var(--brass); }
.brand-mark path { fill: none; stroke: var(--brass-ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; }
.brand img { width: 30px; height: 30px; border-radius: 50%; }

.sidebar {
  width: 248px; flex-shrink: 0; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 22px; padding: 22px 14px 16px;
  background: var(--panel); border-right: 1px solid var(--border); z-index: 30;
}
.sidebar .brand { padding: 0 10px; }
.side-nav { display: flex; flex-direction: column; gap: 18px; flex: 1; overflow-y: auto; }
.side-group { display: flex; flex-direction: column; gap: 2px; }
.side-title { margin: 0 0 6px; padding: 0 12px; color: var(--brass); font-size: .8rem; font-weight: 600; }
.side-link {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: var(--r-md); color: var(--muted); font-weight: 500;
  transition: background-color .18s, color .18s;
}
.side-link svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; transition: transform .2s; }
.side-link::before {
  content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--brass); transform: scaleY(0); transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.side-link:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
.side-link:hover svg { transform: translateX(2px); }
.side-link.active { background: var(--brass-soft); color: var(--text); }
.side-link.active svg { color: var(--brass); }
.side-link.active::before { transform: scaleY(1); }

.side-user { display: flex; align-items: center; gap: 10px; padding: 12px 8px 0; border-top: 1px solid var(--line); }
.side-user img { width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; }
.side-user-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.side-user-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user-name span { color: var(--brass); font-size: .78rem; }
.side-user form { margin: 0; }
.side-user .btn { padding: 7px; }
.logout-btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.topbar {
  display: flex; align-items: center; gap: 12px; padding: 0 20px; min-height: 60px;
  background: color-mix(in srgb, var(--ink) 88%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20;
}
.with-sidebar .topbar { display: none; }
.menu-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; }
.menu-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sidebar-backdrop { position: fixed; inset: 0; background: #0a0f18b3; z-index: 25; }
.sidebar-backdrop[hidden] { display: none; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 36px 32px 56px; flex: 1; }
.footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 28px; border-top: 1px solid var(--line); }

/* --- Boutons --- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 9px 16px; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer;
  background: var(--panel-2); color: var(--text); font: inherit; font-weight: 600; line-height: 1.2;
  transition: background-color .15s, border-color .15s;
}
.btn:hover { background: #2b384f; border-color: #3b4a66; text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary, .btn-discord { background: var(--brass); border-color: var(--brass); color: var(--brass-ink); }
.btn-primary:hover, .btn-discord:hover { background: #f6c566; border-color: #f6c566; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #f27272; border-color: #f27272; }
.btn-danger-ghost { background: transparent; color: #ff8a8a; border-color: #ef5b5b55; }
.btn-danger-ghost:hover { background: #ef5b5b1f; border-color: #ef5b5b; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--panel-2); border-color: transparent; color: var(--text); }
.btn-sm { padding: 5px 10px; font-size: .85rem; border-radius: 8px; }
.btn-lg { padding: 14px 26px; font-size: 1.05rem; }

/* --- Plateaux et mise en page --- */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; margin-bottom: 18px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-bottom: 18px; }
.grid > .card { margin-bottom: 0; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h1 { margin: 0; }
.page-head h1 .muted { font-weight: 500; font-size: .6em; }

/* --- Accueil : le seul moment spectaculaire, un plan d'atelier --- */
.hero { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 22px; margin: 8px 0 24px; min-height: 460px; display: grid; align-items: center; background: var(--panel); }
.hero-plan {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    linear-gradient(#2c3a55 1px, transparent 1px),
    linear-gradient(90deg, #2c3a55 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
}
.hero-mark { position: absolute; right: 6%; top: 50%; width: min(360px, 38vw); translate: 0 -50%; overflow: visible; }
.hm-guides { stroke: var(--calque); stroke-width: 1; stroke-dasharray: 4 6; fill: none; opacity: .35; }
.hm-body { fill: var(--brass-soft); stroke: var(--brass); stroke-width: 2.5; }
.hm-k { fill: none; stroke: var(--brass); stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; }
.hm-dim { stroke: var(--calque); stroke-width: 1; opacity: .8; }
.hm-dim text { stroke: none; fill: var(--calque); font: 600 12px var(--font-text); }
.hm-dim text:first-of-type { paint-order: stroke; }
.hero-body { position: relative; padding: 56px; max-width: 640px; }
.hero-title { font-size: clamp(3.2rem, 9vw, 6.5rem); font-weight: 800; letter-spacing: -.05em; line-height: .9; margin-bottom: 20px; }
.hero-lead { font-size: 1.15rem; color: #c9d1df; max-width: 46ch; margin: 0 0 32px; }
.hero-note { color: var(--muted); font-size: .85rem; margin: 14px 0 0; }
.hero h1:not(.hero-title) { font-size: 2.4rem; }
.hero p:not(.hero-lead):not(.hero-note) { max-width: 520px; margin: 0 auto 32px; }
.hero-icon { width: 96px; height: 96px; border-radius: 50%; margin-bottom: 16px; }
.hero:has(.error-code) { text-align: center; min-height: 0; padding: 72px 16px; display: block; background: transparent; border: 0; }
.error-code { font-size: 5rem; color: var(--brass); letter-spacing: -.04em; }

.flash { padding: 12px 16px; border-radius: var(--r-md); margin-bottom: 18px; font-weight: 600; border: 1px solid; }
.flash-success { background: #3fbf7f17; border-color: #3fbf7f80; color: #b7f0d2; }
.flash-error { background: #ef5b5b17; border-color: #ef5b5b80; color: #ffc9c9; }

/* --- Profil --- */
.profile { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 26px; }
.profile-main { flex: 1; min-width: 220px; }
.profile h1 { margin-bottom: 4px; }
.avatar-wrap { position: relative; display: inline-block; flex-shrink: 0; }
.avatar-lg { width: 96px; height: 96px; border-radius: 28px; display: block; }
.status-dot { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%; border: 4px solid var(--panel); background: #7c8597; }
.avatar-wrap.sm .status-dot { width: 12px; height: 12px; border-width: 2px; right: -2px; bottom: -2px; }
.status-online { background: var(--ok); }
.status-idle { background: var(--warn); }
.status-dnd { background: var(--danger); }
.level-badge { text-align: center; background: var(--brass); color: var(--brass-ink); border-radius: 18px; padding: 12px 22px; min-width: 104px; }
.level-badge span { display: block; font-size: .82rem; font-weight: 600; }
.level-badge strong { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; font-weight: 800; letter-spacing: -.03em; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 99px; padding: 2px 10px; font-size: .8rem; white-space: nowrap; }
.chip i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* --- Statistiques --- */
.stat h2 { color: var(--muted); font-family: var(--font-text); font-size: .9rem; font-weight: 600; }
.stat .big { font-family: var(--font-display); font-size: 2.3rem; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat .big small { font-family: var(--font-text); font-size: .95rem; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.stat .big-text { font-size: 1.5rem; overflow-wrap: anywhere; }
.live { font-variant-numeric: tabular-nums; color: var(--brass); font-weight: 600; margin-top: 6px; }
dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--border); }
dt { color: var(--muted); }
dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
dl.cols { border-top: 0; padding-top: 0; }
dl.cols dd { text-align: left; }
.ranks dd { font-family: var(--font-display); font-size: 1.25rem; }
.ranks { border-top: 0; padding-top: 0; }
.stat .btn { margin-top: 16px; }

.progress { height: 10px; background: var(--ink); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; margin: 12px 0 8px; }
.progress span { display: block; height: 100%; background: var(--brass); border-radius: 99px; }

.bars { display: flex; align-items: flex-end; gap: 8px; height: 210px; padding-top: 20px; background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% 25%; }
.bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; }
.bar-fill { width: 100%; max-width: 38px; background: var(--calque); border-radius: 6px 6px 2px 2px; min-height: 2px; opacity: .85; }
.bar:last-child .bar-fill { background: var(--brass); opacity: 1; }
.bar-value { font-size: .75rem; color: var(--muted); margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.bar-label { font-size: .7rem; color: var(--muted); margin-top: 6px; white-space: nowrap; }

.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hbars li { display: grid; grid-template-columns: minmax(80px, 160px) 1fr auto; gap: 12px; align-items: center; }
.hbar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: 8px; background: var(--ink); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.hbar-track span { display: block; height: 100%; background: var(--calque); border-radius: 99px; }
.hbar-val { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }

/* --- Onglets, filtres, tableaux --- */
.tabs { display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--border); padding: 4px; border-radius: 12px; flex-wrap: wrap; }
.tab { padding: 6px 14px; border-radius: 8px; color: var(--muted); font-weight: 500; }
.tab:hover { text-decoration: none; color: var(--text); background: var(--panel-2); }
.tab.active { background: var(--brass); color: var(--brass-ink); font-weight: 600; }

.my-rank { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-color: #f2b54466; background: linear-gradient(90deg, var(--brass-soft), transparent 60%), var(--panel); }
.my-rank strong { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; color: var(--brass); letter-spacing: -.03em; }
.my-rank-val { margin-left: auto; font-weight: 600; }

.table-card { padding: 0; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 11px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table th { color: var(--muted); font-size: .82rem; font-weight: 600; background: #1d2739; }
.table tbody tr:hover { background: #1f293b; }
.table tr.highlight { background: var(--brass-soft); }
.table tr.highlight:hover { background: #f2b54430; }
.table td.sorted { font-weight: 700; color: var(--text); }
.table td.rank { width: 64px; }
.table form { margin: 0; }
.rank-n { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 9px; font-family: var(--font-display); font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.rank-1 { background: var(--brass); color: var(--brass-ink); }
.rank-2 { background: #c9d1df; color: #1a2333; }
.rank-3 { background: #c98a55; color: #1f1309; }
.who { display: flex; align-items: center; gap: 10px; }
.who img { width: 34px; height: 34px; border-radius: 10px; }
.who.target { background: var(--panel-2); padding: 12px; border-radius: var(--r-md); margin-bottom: 14px; }
.who.target img { width: 48px; height: 48px; border-radius: 14px; }

.tag { display: inline-block; font-size: .74rem; font-weight: 600; padding: 1px 7px; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); vertical-align: middle; margin-left: 4px; }
.tag-ok { background: #3fbf7f1f; border-color: #3fbf7f55; color: #7ee2ae; }
.tag-warn, .tag-timeout { background: #f2b5441f; border-color: #f2b54455; color: var(--brass); }
.tag-kick { background: #f9731620; border-color: #f9731655; color: #fda36b; }
.tag-ban { background: #ef5b5b1f; border-color: #ef5b5b55; color: #ff9a9a; }
.tag-unban { background: #7cc0ff1f; border-color: #7cc0ff55; color: var(--calque); }

.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
input, select, textarea {
  background: var(--ink); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 9px 11px; font: inherit;
}
input::placeholder, textarea::placeholder { color: #6b7790; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brass); outline-offset: 0; border-color: transparent; }
input[type=checkbox] { accent-color: var(--brass); width: 16px; height: 16px; }
.check { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 5px; color: var(--muted); font-size: .9rem; font-weight: 500; }
.form label[hidden] { display: none; }
.form .btn { justify-self: start; }

.pagination { display: flex; justify-content: center; align-items: center; gap: 16px; }

.list { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.list form { margin: 0; }

/* --- Conversation d'un ticket --- */
.chat { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.msg { display: flex; gap: 12px; }
.msg img { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; }
.msg-head { display: flex; align-items: center; gap: 8px; }
.msg-head .tag { margin-left: 0; }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.msg-staff .msg-body { border-left: 3px solid var(--brass); padding-left: 10px; }
.reply textarea { width: 100%; resize: vertical; }
.reply-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 12px; }
#reply-error { color: #ff9a9a; }

/* --- Gestion du serveur (salons, catégories, rôles, permissions) --- */
.actions { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; justify-content: flex-end; }
.form label.check { display: flex; align-items: center; gap: 8px; color: var(--text); }
.form label.check input { margin: 0; }
.actions form { margin: 0; }
.actions-cell { width: 1%; white-space: nowrap; }
.server-cat { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.server-cat h2 { margin: 0; font-size: 1.15rem; }
.ch-icon { display: inline-block; width: 1.4em; text-align: center; color: var(--muted); }
.ch-topic { margin-left: 1.7em; max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); vertical-align: middle; }
.form-inline { display: flex; align-items: center; gap: 8px; color: var(--muted); }
input[type=color] { width: 44px; height: 38px; padding: 3px; cursor: pointer; }

.perm-head p { margin-top: 0; max-width: 80ch; }
.perm-scroll { overflow-x: auto; margin: 0 -22px; }
.perm-table th, .perm-table td { padding: 7px 14px; }
.perm-table td:first-child { white-space: nowrap; position: sticky; left: 0; background: var(--panel); }
.perm-table tbody tr:hover td:first-child { background: #1f293b; }
.perm-target { font-size: .85rem; color: var(--text); white-space: nowrap; text-align: center; }
.perm-remove { padding: 0 6px; margin-left: 2px; }
.perm-group td { background: #1d2739 !important; color: var(--brass); font-size: .82rem; font-weight: 600; }
.perm-select { padding: 4px 6px; min-width: 54px; text-align: center; font-weight: 700; }
.pv { display: inline-block; padding: 0 7px; border-radius: var(--r-sm); background: var(--panel-2); }
.pv-allow { background: #3fbf7f26; color: #7ee2ae; border-color: #3fbf7f88; }
.pv-deny { background: #ef5b5b26; color: #ff9a9a; border-color: #ef5b5b88; }
.pv-inherit { color: var(--muted); }
.perm-actions { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 28px; }
.perm-group-title { font-family: var(--font-text); font-size: .88rem; font-weight: 600; color: var(--brass); margin: 14px 0 6px; }
.perm-check { padding: 4px 0; color: var(--text); }
.perm-danger { color: #ff9a9a; }

/* --- Mon espace -----------------------------------------------------------
   Une « fiche membre » façon plan d'atelier : en-tête sur papier quadrillé
   avec l'anneau de niveau, puis une grille de tuiles (bento). */
.me-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1fr auto; gap: 28px 32px; align-items: center;
  padding: 30px 32px 0; margin-bottom: 18px;
  background: radial-gradient(120% 140% at 100% 0%, #f2b5441a, transparent 55%), var(--panel);
  border: 1px solid var(--border); border-radius: 22px;
}
.me-hero-plan {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(100deg, transparent 25%, #000 75%);
  opacity: .7;
}
.me-id { display: flex; align-items: center; gap: 24px; min-width: 0; }
.me-avatar img { width: 112px; height: 112px; border-radius: 32px; display: block; box-shadow: 0 0 0 4px var(--panel), 0 0 0 5px var(--brass); }
.me-avatar .status-dot { width: 24px; height: 24px; right: -5px; bottom: -5px; }
.me-id-text { min-width: 0; }
.me-kicker { margin: 0 0 4px; color: var(--brass); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.me-kicker span { margin-left: 8px; padding: 1px 8px; border: 1px dashed #f2b54488; border-radius: 99px; letter-spacing: .02em; }
.me-id-text h1 { margin: 0; font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--name-color, var(--text)); overflow-wrap: anywhere; }
.me-handle { margin: 4px 0 0; color: var(--muted); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.me-status { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--text); }
.me-status i { width: 8px; height: 8px; border-radius: 50%; background: #7c8597; }
.me-status-online i { background: var(--ok); box-shadow: 0 0 0 3px #3fbf7f33; }
.me-status-idle i { background: var(--warn); }
.me-status-dnd i { background: var(--danger); }

/* Anneau de niveau */
.me-ring { position: relative; width: 168px; height: 168px; flex-shrink: 0; }
.me-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring-track { fill: none; stroke: var(--ink); stroke-width: 12; }
.ring-ticks { fill: none; stroke: var(--calque); stroke-width: 4; stroke-dasharray: 1 6.2; opacity: .45; }
.ring-fill { fill: none; stroke: var(--brass); stroke-width: 12; stroke-linecap: round; filter: drop-shadow(0 0 6px #f2b54466); }
.me-ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.me-ring-label span { color: var(--muted); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.me-ring-label strong { font-family: var(--font-display); font-size: 3.2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.me-ring-label small { color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; margin-top: 2px; }

/* Chiffres clés */
.me-kpis {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 0 -32px; border-top: 1px solid var(--border); background: #131a2699;
}
.kpi { padding: 18px 24px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line); position: relative; }
.kpi:first-child { border-left: 0; }
.kpi-label { color: var(--muted); font-size: .82rem; font-weight: 500; }
.kpi strong { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kpi em { font-style: normal; font-size: .75rem; font-weight: 700; color: var(--brass-ink); background: var(--brass); padding: 1px 8px; border-radius: 99px; }
.kpi-accent strong { color: var(--brass); }

/* Grille de tuiles */
.bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.tile { display: flex; flex-direction: column; transition: border-color .2s, transform .2s; }
.tile:hover { border-color: #3b4a66; }
.tile-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.tile-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.05rem; }
.tile-icon { flex-shrink: 0; padding: 6px; width: 32px; height: 32px; border-radius: 10px; background: var(--brass-soft); fill: none; stroke: var(--brass); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tile-note { color: var(--muted); font-size: .82rem; }
.tile-link { font-size: .85rem; font-weight: 600; }

.live-pill { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 99px; font-size: .78rem; font-weight: 600; color: #b7f0d2; background: #3fbf7f1a; border: 1px solid #3fbf7f55; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex-shrink: 0; animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 #3fbf7f99; } 100% { box-shadow: 0 0 0 8px #3fbf7f00; } }

.empty { flex: 1; display: grid; place-content: center; text-align: center; padding: 18px; border: 1px dashed var(--border); border-radius: var(--r-md); }
.empty p { margin: 0 0 4px; }

/* Ancienneté */
.sen { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sen-days { display: flex; flex-direction: column; }
.sen-days strong { font-family: var(--font-display); font-size: 4rem; font-weight: 800; line-height: .95; letter-spacing: -.05em; color: var(--brass); font-variant-numeric: tabular-nums; }
.sen-days span { font-weight: 600; margin-top: 4px; }
.sen-days em { font-style: normal; color: var(--muted); font-size: .9rem; }
.odo { display: flex; gap: 6px; }
.odo-cell { min-width: 66px; padding: 8px 6px 6px; text-align: center; background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-md); }
.odo-cell b { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.odo-cell span { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.odo-live { border-color: #f2b54466; }
.odo-live b { color: var(--brass); }

.timeline { position: relative; margin-top: 26px; padding-top: 46px; }
.tl-join-label { position: absolute; top: 0; left: var(--join); transform: translateX(-50%); text-align: center; white-space: nowrap; display: flex; flex-direction: column; font-size: .8rem; line-height: 1.3; }
/* Arrivée proche d'un bord : l'étiquette s'aligne sur ce bord au lieu de déborder */
.tl-join-label.tl-align-end { left: auto; right: 0; transform: none; text-align: right; }
.tl-join-label.tl-align-start { left: 0; transform: none; text-align: left; }
.tl-join-label strong { color: var(--brass); }
.tl-join-label span { color: var(--muted); }
.tl-track { position: relative; height: 6px; }
.tl-before { position: absolute; left: 0; right: calc(100% - var(--join)); top: 2px; height: 2px; background: repeating-linear-gradient(90deg, var(--calque) 0 6px, transparent 6px 11px); opacity: .55; }
.tl-member { position: absolute; left: var(--join); right: 0; top: 0; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--brass), #f6c566); }
.tl-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--panel); border: 2px solid var(--calque); }
.tl-dot-start { left: 0; transform: translate(0, -50%); }
.tl-dot-join { left: var(--join); width: 18px; height: 18px; border: 3px solid var(--brass); background: var(--ink); box-shadow: 0 0 0 5px #f2b54426; }
.tl-dot-end { left: 100%; transform: translate(-100%, -50%); border-color: var(--brass); background: var(--brass); }
.tl-ends { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; font-size: .8rem; color: var(--muted); }
.tl-ends > span { display: flex; flex-direction: column; line-height: 1.35; }
.tl-ends strong { color: var(--text); font-weight: 600; }
.tl-end-right { text-align: right; }

/* Classement */
.ranks-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ranks-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--ink); border: 1px solid var(--line); }
.ranks-list .rank-n { min-width: 40px; height: 40px; font-size: 1.1rem; background: var(--panel-2); }
.ranks-list .rank-1 { background: var(--brass); }
.ranks-list .rank-2 { background: #c9d1df; }
.ranks-list .rank-3 { background: #c98a55; }
.ranks-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.top-pill { font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: #7cc0ff1f; color: var(--calque); white-space: nowrap; }
.top-pill-hot { background: var(--brass-soft); color: var(--brass); }

/* Messages */
.msg-layout .bar { min-width: 0; }
.msg-layout .bar-label { white-space: normal; text-align: center; line-height: 1.2; font-variant-numeric: tabular-nums; }
.msg-layout { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; align-items: end; flex: 1; }
.msg-figures { display: grid; gap: 10px; }
.msg-figures div { display: flex; flex-direction: column; padding-left: 12px; border-left: 2px solid var(--line); }
.msg-figures div:first-child { border-left-color: var(--brass); }
.msg-figures span { color: var(--muted); font-size: .8rem; }
.msg-figures strong { font-family: var(--font-display); font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.msg-layout .bars { height: 220px; }

/* Jeux */
.feature { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--r-md); background: linear-gradient(120deg, var(--brass-soft), transparent 70%), var(--ink); border: 1px solid #f2b54444; }
.feature > div { display: flex; flex-direction: column; min-width: 0; }
.feature-badge { display: grid; place-items: center; width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; background: var(--brass); color: var(--brass-ink); font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; }
.feature-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
/* Affiches de jeux (Steam / Discord), initiale en secours */
.poster { position: relative; display: grid; place-items: center; flex-shrink: 0; overflow: hidden; aspect-ratio: 2 / 3; border-radius: 10px; background: var(--brass); color: var(--brass-ink); font-family: var(--font-display); font-weight: 800; }
.poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--ink); }
.poster-square { background: var(--ink); }
.poster-square img.poster-blur { filter: blur(10px) brightness(.55) saturate(1.2); transform: scale(1.35); }
.poster-square img.poster-fit { object-fit: contain; background: transparent; }
.poster-lg { width: 104px; font-size: 2.4rem; border-radius: 12px; box-shadow: 0 10px 24px #0008, 0 0 0 1px #ffffff1a; }
.poster-sm { width: 34px; font-size: .95rem; border-radius: 6px; }
.feature { position: relative; overflow: hidden; isolation: isolate; align-items: stretch; }
.feature.has-art { border-color: #ffffff1f; background: var(--ink); padding: 16px; }
.feature-bg { position: absolute; inset: -20px; z-index: -1; background-size: cover; background-position: center; filter: blur(22px) saturate(1.3); opacity: .45; transform: scale(1.1); }
.feature.has-art::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #131a26cc 0%, #131a2699 60%, #131a2666); }
.feature-text { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
.feature-kicker { color: var(--brass); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.feature-time { color: #c9d1df; font-size: .9rem; }
.feature .live-pill { align-self: flex-start; margin-top: 8px; max-width: 100%; }
.game-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.game-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.game-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.game-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.game-list .hbar-track { height: 6px; }
.now { margin: 12px 0 0; color: var(--muted); }
.now strong { color: #b7f0d2; }
.hbars-compact { margin-top: 16px; gap: 10px; }
.hbars-compact li { grid-template-columns: minmax(60px, 110px) 1fr auto; }

/* Vocal */
.voice-layout { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; }
.voice-total { display: flex; flex-direction: column; }
.voice-total > strong { font-family: var(--font-display); font-size: 3.4rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.voice-total > strong small { font-size: 1.3rem; color: var(--muted); letter-spacing: 0; }
.fav { margin-top: 16px; padding: 12px 14px; border-radius: var(--r-md); background: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--calque); display: flex; flex-direction: column; }
.fav-label { color: var(--calque); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.fav strong { font-size: 1.05rem; overflow-wrap: anywhere; }
.hbars li.is-top .hbar-name { color: var(--text); font-weight: 600; }
.hbars li.is-top .hbar-track span { background: var(--brass); }

/* Profil */
.facts { margin: 0; padding: 0; border: 0; gap: 0; grid-template-columns: auto 1fr; }
.facts dt, .facts dd { padding: 9px 0; border-bottom: 1px solid var(--line); }
.facts dt:nth-last-child(2), .facts dd:last-child { border-bottom: 0; }
.facts dd { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }

@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
  .bento .span-2, .bento > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .me-hero { grid-template-columns: minmax(0, 1fr); padding: 22px 18px 0; }
  .me-id { flex-direction: column; align-items: flex-start; gap: 16px; }
  .me-ring { width: 140px; height: 140px; justify-self: center; }
  .me-kpis { grid-template-columns: repeat(2, 1fr); margin: 0 -18px; }
  .kpi { padding: 14px 16px; }
  .kpi:nth-child(3) { border-left: 0; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
  .msg-layout .bar-label { writing-mode: horizontal-tb; transform: none; font-size: .62rem; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .sen-days strong { font-size: 3.2rem; }
  .odo { width: 100%; gap: 5px; }
  .odo-cell { flex: 1; min-width: 0; padding: 7px 2px 5px; }
  .odo-cell b { font-size: 1.25rem; }
  .odo-cell span { font-size: .6rem; letter-spacing: 0; }
  .tile-head { flex-wrap: wrap; }
  .msg-layout, .voice-layout { grid-template-columns: minmax(0, 1fr); }
  .msg-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msg-layout .bars { gap: 3px; }
  .tl-join-label { white-space: normal; max-width: 100%; }
}

/* --- Animations ---------------------------------------------------------
   Une séquence au chargement (le contenu apparaît, les barres et les chiffres
   se remplissent), le logo qui se dessine sur l'accueil, et des retours
   visuels sur les actions. Rien ne bouge si le système demande moins d'animations. */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes flash-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.anim .reveal { animation: rise .5s cubic-bezier(.2,.8,.2,1) both; }
.anim .progress span.grow, .anim .hbar-track span.grow { transform-origin: left center; animation: grow-x .8s cubic-bezier(.2,.8,.2,1) both; }
.anim .bar-fill.grow { transform-origin: bottom center; animation: grow-y .7s cubic-bezier(.2,.8,.2,1) both; }
.anim .flash { animation: flash-in .35s ease-out both; }
.anim .js-count { font-variant-numeric: tabular-nums; }
@keyframes ring-fill { from { stroke-dashoffset: var(--c); } }
.anim .ring-fill { animation: ring-fill 1.2s .25s cubic-bezier(.2,.8,.2,1) both; }
.anim .tl-member { transform-origin: left center; animation: grow-x .9s .45s cubic-bezier(.2,.8,.2,1) both; }
.anim .tl-before { animation: fade-in .6s .2s ease-out both; }
.anim .tl-dot-join, .anim .tl-join-label { animation: fade-in .5s .35s ease-out both; }

/* Accueil : le logo se trace comme sur un plan */
.anim .hero-plan { animation: fade-in 1.2s ease-out both; }
.anim .hm-guides { stroke-dashoffset: 0; animation: fade-in .9s .1s ease-out both; }
.anim .hm-body { stroke-dasharray: 1100; stroke-dashoffset: 1100; fill-opacity: 0; animation: draw 1.1s .3s cubic-bezier(.6,0,.2,1) forwards, body-fill .6s 1.3s ease-out forwards; }
.anim .hm-k { stroke-dasharray: 520; stroke-dashoffset: 520; animation: draw 1s 1.05s cubic-bezier(.6,0,.2,1) forwards; }
.anim .hm-dim { animation: fade-in .6s 1.9s ease-out both; }
@keyframes body-fill { to { fill-opacity: 1; } }
.anim .hero-title, .anim .hero-lead, .anim .hero-body .btn, .anim .hero-note { animation: rise .6s cubic-bezier(.2,.8,.2,1) both; }
.anim .hero-lead { animation-delay: .12s; }
.anim .hero-body .btn { animation-delay: .24s; }
.anim .hero-note { animation-delay: .34s; }

/* Accueil : animation continue, une fois le logo tracé.
   - une lampe d'atelier éclaire le quadrillage (elle suit la souris, sinon elle se promène) ;
   - une ligne de lecture balaie le plan ;
   - des copeaux de laiton montent doucement ;
   - le logo flotte, s'incline vers la souris, et un reflet parcourt le K. */
.hero-lamp {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at var(--mx, 70%) var(--my, 45%), #f2b5441f, transparent 34%),
    linear-gradient(#f2b54459 1px, transparent 1px),
    linear-gradient(90deg, #f2b54459 1px, transparent 1px);
  background-size: 100% 100%, var(--grid, 24px) var(--grid, 24px), var(--grid, 24px) var(--grid, 24px);
  -webkit-mask-image: radial-gradient(280px circle at var(--mx, 70%) var(--my, 45%), #000 0%, transparent 70%);
  mask-image: radial-gradient(280px circle at var(--mx, 70%) var(--my, 45%), #000 0%, transparent 70%);
}
.hero-scan {
  position: absolute; top: 0; bottom: 0; left: -180px; width: 160px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, #7cc0ff0f 70%, #7cc0ff59 97%, #7cc0ff00);
}
.hero-dust { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-dust i { position: absolute; bottom: -8px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: var(--brass); opacity: 0; box-shadow: 0 0 6px #f2b544aa; }
.hero-mark { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; }
.hm-orbit, .hm-float { transform-box: view-box; transform-origin: 180px 180px; }
.hm-glint { fill: none; stroke: #fff6dc; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 26 700; stroke-dashoffset: 26; opacity: 0; }
.hero-title span { display: inline-block; }
.hero .btn-primary { position: relative; overflow: hidden; }
.hero .btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, #ffffff8c, transparent); transform: skewX(-20deg);
}

@keyframes lamp-on { from { opacity: 0; } to { opacity: 1; } }
@keyframes scan { 0% { left: -180px; opacity: 1; } 45% { left: 100%; opacity: 1; } 46%, 100% { left: 100%; opacity: 0; } }
@keyframes dust { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .55; } 80% { opacity: .2; } 100% { transform: translate(var(--dx), -520px); opacity: 0; } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes glint { 0% { stroke-dashoffset: 26; opacity: 0; } 4% { opacity: .9; } 30% { stroke-dashoffset: -420; opacity: .9; } 34%, 100% { stroke-dashoffset: -420; opacity: 0; } }
@keyframes letter { from { opacity: 0; transform: translateY(.35em) rotate(4deg); } to { opacity: 1; transform: none; } }
@keyframes shine { 0% { left: -60%; } 22%, 100% { left: 130%; } }

.anim .hero-lamp { animation: lamp-on 1.2s 1.8s ease-out both; }
.anim .hero-scan { animation: scan 9s 2.6s linear infinite; }
.anim .hero-dust i { animation: dust var(--d) var(--delay) linear infinite; }
.anim .hm-orbit { animation: orbit 60s linear infinite; }
.anim .hm-float { animation: float 6s 2.2s ease-in-out infinite; }
.anim .hm-glint { animation: glint 5.5s 2.4s ease-in-out infinite; }
.anim .hero-title { animation: none; }
.anim .hero-title span { animation: letter .55s calc(var(--i) * 45ms) cubic-bezier(.2,.8,.2,1) both; }
.anim .hero .btn-primary::after { animation: shine 5s 3s ease-in-out infinite; }

/* --- Mon espace : finitions des tuiles ---------------------------------- */
.tile {
  position: relative;
  background: linear-gradient(180deg, #ffffff07, transparent 140px), var(--panel);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.tile:hover { border-color: #f2b54440; box-shadow: 0 10px 30px -18px #000c; }

/* Ancienneté : prochain cap */
.cap { margin-top: 20px; padding: 12px 14px; border-radius: var(--r-md); background: var(--ink); border: 1px solid var(--line); }
.cap-head { display: flex; justify-content: space-between; gap: 12px; font-size: .84rem; }
.cap-head strong { color: var(--brass); }
.cap .progress { height: 8px; margin: 8px 0 0; }

/* Classement : objectif */
.goal {
  margin-top: auto; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--brass-soft), transparent 85%); border: 1px dashed #f2b54466;
}
.ranks-list + .goal { margin-top: 14px; }
.tile .ranks-list { flex: 1; grid-auto-rows: 1fr; }
.goal > div { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.goal strong { color: var(--brass); }
.goal span { color: var(--muted); font-size: .84rem; }
.goal-icon { flex-shrink: 0; width: 34px; height: 34px; padding: 6px; border-radius: 10px; background: var(--brass); fill: none; stroke: var(--brass-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Graphique : jours sans message en retrait, aujourd'hui en avant */
.bar.is-zero .bar-fill { background: var(--line); opacity: 1; }
.bar.is-today .bar-label { color: var(--brass); font-weight: 700; }
.bar.is-today.is-zero .bar-fill { background: var(--brass); opacity: .6; }
.bar:not(.is-zero):hover .bar-fill { filter: brightness(1.2); }

/* Jeu favori : chiffres en bas de tuile */
.mini-stats { margin-top: auto; padding-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile .game-list { margin-bottom: 0; }
.mini-stats div { display: flex; flex-direction: column; padding: 10px 12px; border-radius: var(--r-md); background: var(--ink); border: 1px solid var(--line); min-width: 0; }
.mini-stats span { color: var(--muted); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-stats strong { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* États vides illustrés */
.empty-rich { gap: 2px; padding: 28px 18px; background: radial-gradient(circle at 50% 30%, var(--brass-soft), transparent 60%); }
.empty-icon { position: relative; justify-self: center; margin-bottom: 12px; }
.empty-icon .tile-icon { width: 60px; height: 60px; padding: 15px; border-radius: 20px; background: var(--brass-soft); border: 1px solid #f2b54455; }
.empty-icon-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 20px; border: 2px solid var(--brass); opacity: 0; }
@keyframes ring-pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.55); opacity: 0; } }
.anim .empty-icon-pulse::after { animation: ring-pulse 2.4s ease-out infinite; }

/* --- Page Classement ------------------------------------------------------ */
.lb-hero { padding-top: 34px; }
.lb-intro { min-width: 0; padding-bottom: 6px; }
.lb-intro h1 { margin: 0 0 8px; font-size: clamp(1.9rem, 4vw, 2.8rem); }
.lb-lead { margin: 0 0 20px; color: #c9d1df; max-width: 52ch; }
.lb-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: #131a26cc; border: 1px solid var(--border); }
.lb-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; color: var(--muted); font-weight: 600; transition: background-color .18s, color .18s; }
.lb-tab svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lb-tab:hover { color: var(--text); background: var(--panel-2); text-decoration: none; }
.lb-tab.active { background: var(--brass); color: var(--brass-ink); }

.lb-trophy { width: 170px; height: 170px; overflow: visible; transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.lb-trophy-orbit { fill: none; stroke: var(--calque); stroke-width: 1; stroke-dasharray: 3 7; opacity: .45; transform-box: view-box; transform-origin: 100px 100px; }
.lb-trophy-body path { fill: var(--brass-soft); stroke: var(--brass); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.lb-trophy-body path:nth-child(2) { fill: none; }
.lb-trophy-glint { fill: none; stroke: #fff6dc; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 22 600; opacity: 0; }

.lb-top { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; margin-bottom: 18px; }
.lb-top > .card { margin-bottom: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, #ffffff07, transparent 140px), var(--panel); }

/* Podium */
.podium { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; padding-top: 10px; }
.pod { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.pod-avatar { position: relative; margin-bottom: 10px; }
.pod-avatar img, .pod-avatar-empty { display: block; width: 72px; height: 72px; border-radius: 22px; box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px var(--pod-color, var(--border)); }
.pod-1 .pod-avatar img { width: 92px; height: 92px; border-radius: 28px; }
.pod-avatar-empty { display: grid; place-items: center; background: var(--ink); color: var(--muted); font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; }
.pod-crown { position: absolute; left: 50%; top: -30px; width: 34px; height: 34px; translate: -50% 0; fill: var(--brass); stroke: var(--brass-ink); stroke-width: 1.2; stroke-linejoin: round; filter: drop-shadow(0 4px 10px #f2b54480); }
.pod-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
.pod-1 .pod-name { font-size: 1.15rem; }
.pod-val { font-family: var(--font-display); font-weight: 800; color: var(--pod-color, var(--text)); font-variant-numeric: tabular-nums; }
.pod-level { color: var(--muted); font-size: .78rem; }
.pod-block {
  width: 100%; margin-top: 12px; display: grid; place-items: center; border-radius: 14px 14px 6px 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pod-color) 32%, transparent), color-mix(in srgb, var(--pod-color) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--pod-color) 55%, transparent); border-bottom: 0;
}
.pod-block span { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; color: var(--pod-color); opacity: .9; }
.pod-1 { --pod-color: var(--brass); }
.pod-2 { --pod-color: #c9d1df; }
.pod-3 { --pod-color: #c98a55; }
.pod-1 .pod-block { height: 130px; }
.pod-2 .pod-block { height: 96px; }
.pod-3 .pod-block { height: 70px; }
.pod-empty { opacity: .45; }
.pod.is-me .pod-name { color: var(--brass); }

/* Ta position */
.lb-me { display: flex; align-items: center; gap: 14px; }
.lb-me img { width: 64px; height: 64px; border-radius: 20px; box-shadow: 0 0 0 3px var(--panel), 0 0 0 4px var(--brass); }
.lb-me-rank { display: flex; flex-direction: column; line-height: 1.1; }
.lb-me-rank strong { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; color: var(--brass); letter-spacing: -.04em; }
.lb-me-rank span { color: var(--muted); font-size: .84rem; }
.lb-me-val { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.lb-me-val span { color: var(--muted); font-size: .8rem; }
.lb-me-val strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.lb-progress { margin-top: 18px; }
.lb-progress-head { display: flex; justify-content: space-between; font-size: .84rem; color: var(--muted); }
.lb-progress-head strong { color: var(--text); }
.lb-progress .progress { margin-top: 8px; }
.lb-neighbors { list-style: none; margin: auto 0 0; padding: 16px 0 0; display: grid; gap: 8px; }
.lb-neighbors li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--ink); border: 1px solid var(--line); font-size: .88rem; color: var(--muted); }
.lb-neighbors strong { color: var(--text); }
.lb-neighbors svg { flex-shrink: 0; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-nb-up svg { stroke: var(--ok); }
.lb-nb-down svg { stroke: var(--danger); }

/* Liste */
.lb-list-card { background: linear-gradient(180deg, #ffffff07, transparent 140px), var(--panel); }
.lb-search { position: relative; display: flex; align-items: center; }
.lb-search svg { position: absolute; left: 11px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.lb-search input { padding-left: 34px; width: 240px; max-width: 100%; }
.lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lb-row {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 10px 16px 10px 10px; border-radius: 14px; background: var(--ink); border: 1px solid var(--line);
  transition: border-color .18s, background-color .18s, transform .18s;
}
.lb-row[hidden] { display: none; }
.lb-row:hover { border-color: #3b4a66; background: #172030; transform: translateX(3px); }
.lb-row.is-me { border-color: #f2b54488; background: linear-gradient(90deg, var(--brass-soft), transparent 70%), var(--ink); }
.lb-row > img { width: 40px; height: 40px; border-radius: 12px; }
.lb-row-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lb-row-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.lb-row-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row-name .tag { margin-left: 0; }
.lb-row-name .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row .hbar-track { height: 5px; }
.lb-row.is-me .hbar-track span, .lb-row:first-child .hbar-track span { background: var(--brass); }
.lb-row-sub { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .76rem; color: #6b7790; }
.lb-row-sub .on { color: var(--muted); font-weight: 600; }
.lb-row-val { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-noresult { margin: 14px 0 0; }

@keyframes pod-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes crown-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }
.anim .pod-block { transform-origin: bottom center; animation: pod-rise .8s cubic-bezier(.2,.8,.2,1) both; }
.anim .pod-3 .pod-block { animation-delay: .15s; }
.anim .pod-2 .pod-block { animation-delay: .3s; }
.anim .pod-1 .pod-block { animation-delay: .45s; }
.anim .pod-crown { animation: crown-bob 3s 1s ease-in-out infinite; }
.anim .lb-trophy-orbit { animation: orbit 60s linear infinite; }
.anim .lb-trophy-glint { animation: glint 5.5s 1.5s ease-in-out infinite; }

@media (max-width: 1100px) {
  .lb-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .lb-trophy { display: none; }
  .lb-tab { padding: 7px 10px; font-size: .85rem; }
  .podium { gap: 6px; }
  .pod-avatar img, .pod-avatar-empty { width: 56px; height: 56px; border-radius: 17px; }
  .pod-1 .pod-avatar img { width: 68px; height: 68px; border-radius: 21px; }
  .pod-name, .pod-1 .pod-name { font-size: .88rem; }
  .pod-val { font-size: .85rem; }
  .pod-1 .pod-block { height: 100px; }
  .pod-2 .pod-block { height: 74px; }
  .pod-3 .pod-block { height: 54px; }
  .lb-search, .lb-search input { width: 100%; }
  .lb-row { grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; }
  .lb-row-val { grid-column: 3; justify-self: start; font-size: .95rem; }
  .lb-row-sub { display: none; }
}

/* --- Espace équipe (Membres, Tickets, Modération) ------------------------- */
/* Bandeau commun */
.page-hero-icon { width: 150px; height: 150px; overflow: visible; transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.page-hero-orbit { fill: none; stroke: var(--calque); stroke-width: .12; stroke-dasharray: .35 .8; opacity: .5; transform-box: view-box; transform-origin: 12px 12px; }
.page-hero-glyph { transform-box: view-box; fill: var(--brass-soft); stroke: var(--brass); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; transform: scale(.62); transform-origin: 12px 12px; filter: drop-shadow(0 0 6px #f2b54455); }
.page-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.anim .page-hero-orbit { animation: orbit 60s linear infinite; }

/* Pastilles d'état */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: .76rem; font-weight: 700; white-space: nowrap; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.pill-xs { padding: 1px 7px; font-size: .7rem; }
.pill-ok { background: #3fbf7f1a; border-color: #3fbf7f55; color: #7ee2ae; }
.pill-brass { background: var(--brass-soft); border-color: #f2b54466; color: var(--brass); }
.pill-warn { background: #f2b5441f; border-color: #f2b54455; color: var(--brass); }
.pill-calque { background: #7cc0ff1a; border-color: #7cc0ff55; color: var(--calque); }
.pill-danger { background: #ef5b5b1f; border-color: #ef5b5b55; color: #ff9a9a; }
.pill-brass i { animation: pulse-brass 1.8s ease-out infinite; }
@keyframes pulse-brass { 0% { box-shadow: 0 0 0 0 #f2b54499; } 100% { box-shadow: 0 0 0 7px #f2b54400; } }

/* Barre d'outils (recherche, tri) */
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 10px; }
.toolbar-search { position: relative; flex: 1; min-width: 220px; display: flex; align-items: center; }
.toolbar-search svg { position: absolute; left: 12px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.toolbar-search input { width: 100%; padding-left: 36px; }
.toolbar-field { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .88rem; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .9rem; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-ui { position: relative; width: 38px; height: 22px; border-radius: 99px; background: var(--ink); border: 1px solid var(--border); transition: background-color .2s, border-color .2s; flex-shrink: 0; }
.switch-ui::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .2s, background-color .2s; }
.switch input:checked + .switch-ui { background: var(--brass-soft); border-color: var(--brass); }
.switch input:checked + .switch-ui::after { transform: translateX(16px); background: var(--brass); }
.switch input:focus-visible + .switch-ui { outline: 2px solid var(--brass); outline-offset: 2px; }
.result-count { margin: 0 0 14px 4px; }

/* Membres : cartes */
.m-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-bottom: 18px; }
.m-card {
  display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, #ffffff07, transparent 120px), var(--panel); border: 1px solid var(--border);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.m-card:hover { border-color: #f2b54444; transform: translateY(-2px); box-shadow: 0 12px 28px -18px #000d; }
.m-card.is-timeout { border-color: #f2b54455; }
.m-card-head { display: flex; align-items: center; gap: 12px; }
.m-card-head img { width: 52px; height: 52px; border-radius: 16px; display: block; }
.m-card-head .status-dot { width: 16px; height: 16px; border-width: 3px; right: -4px; bottom: -4px; }
.m-card-id { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.m-card-id strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.02rem; }
.m-level { display: flex; flex-direction: column; align-items: center; min-width: 46px; padding: 4px 8px; border-radius: 12px; background: var(--brass-soft); color: var(--brass); font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; line-height: 1.05; }
.m-level small { font-family: var(--font-text); font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.m-badges { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; align-items: center; }
.m-badges .chip { margin: 0; }
.m-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; border: 0; }
.m-stats div { padding: 8px 10px; border-radius: var(--r-md); background: var(--ink); border: 1px solid var(--line); min-width: 0; }
.m-stats dt { font-size: .7rem; color: var(--muted); }
.m-stats dd { margin: 0; text-align: left; font-family: var(--font-display); font-weight: 800; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-card-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); }
.m-card-foot svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-created { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; }
.btn.is-copied { color: #7ee2ae; }

.pager { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 6px 0 18px; }
.pager-info { color: var(--muted); }
.pager-info strong { color: var(--text); }
.btn.is-disabled { opacity: .35; pointer-events: none; }

/* Tickets : liste */
.section-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.lb-tab .count { min-width: 22px; padding: 0 6px; border-radius: 99px; background: #0003; font-size: .75rem; text-align: center; }
.t-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.t-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: var(--r-lg); color: var(--text);
  background: linear-gradient(180deg, #ffffff07, transparent 100px), var(--panel); border: 1px solid var(--border);
  transition: border-color .18s, transform .18s;
}
.t-card:hover { text-decoration: none; border-color: #3b4a66; transform: translateX(3px); }
.t-card.is-waiting { border-left: 3px solid var(--brass); }
.t-card.is-closed { opacity: .8; }
.t-card > img { width: 46px; height: 46px; border-radius: 14px; }
.t-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.t-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.t-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.02rem; }
.t-id { font-family: var(--font-display); font-weight: 800; color: var(--brass); }
.t-preview { margin: 0; color: var(--muted); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-preview span { color: var(--text); font-weight: 600; }
.t-preview .t-staff { color: #7ee2ae; }
.t-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .76rem; color: #6b7790; }
.t-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; position: relative; padding-right: 24px; }
.t-arrow { position: absolute; right: 0; top: 50%; translate: 0 -50%; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s; }
.t-card:hover .t-arrow { transform: translateX(3px); stroke: var(--brass); }

/* Ticket : conversation */
.back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; color: var(--muted); font-size: .9rem; }
.back-link svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.back-link:hover { color: var(--text); text-decoration: none; }
.ticket-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: linear-gradient(90deg, var(--brass-soft), transparent 45%), var(--panel); }
.ticket-head > img { width: 56px; height: 56px; border-radius: 18px; box-shadow: 0 0 0 3px var(--panel), 0 0 0 4px var(--brass); }
.ticket-head-main { flex: 1; min-width: 200px; }
.ticket-head-main h1 { margin: 0 0 2px; font-size: 1.6rem; overflow-wrap: anywhere; }
.ticket-head-main p { margin: 0; }
.ticket-head .me-kicker { margin-bottom: 2px; }
.text { color: var(--text); }
.ticket-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.ticket-head-side form { margin: 0; }
.ticket-head-side .btn svg, .reply .btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ticket-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.ticket-convo { min-width: 0; }
.ticket-side { position: sticky; top: 20px; }
.side-card h2 { font-family: var(--font-text); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 12px; }
.side-member { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.side-member img { width: 44px; height: 44px; border-radius: 14px; }
.side-member div { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.side-btn { width: 100%; margin-top: 12px; }

.chat { min-height: 260px; max-height: 62vh; padding: 20px; background: radial-gradient(circle at 50% 0%, #f2b5440a, transparent 60%), var(--panel); }
.chat-empty { margin: auto; }
.msg { align-items: flex-end; max-width: 82%; }
.msg img { width: 36px; height: 36px; }
.msg-bubble { padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--panel-2); border: 1px solid var(--line); min-width: 0; }
.msg-staff { align-self: flex-end; flex-direction: row-reverse; }
.msg-staff .msg-bubble { border-radius: 16px 16px 4px 16px; background: linear-gradient(180deg, #f2b5442a, #f2b54412); border-color: #f2b54444; }
.msg-staff .msg-body { border-left: 0; padding-left: 0; }
.msg-head { flex-wrap: wrap; margin-bottom: 2px; }
.msg-staff .msg-head { justify-content: flex-end; }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.msg-new { animation: msg-in .35s cubic-bezier(.2,.8,.2,1) both; }
.reply { padding: 14px; }
.reply textarea { min-height: 84px; border-radius: 12px; }
.reply-actions { flex-wrap: wrap; }
#reply-error { color: #ff9a9a; flex: 1; text-align: right; }
kbd { font: 600 .74rem var(--font-text); padding: 1px 6px; border-radius: 5px; background: var(--ink); border: 1px solid var(--border); border-bottom-width: 2px; }
.closed-note { padding: 14px 18px; }

/* Modération */
.mod-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; margin-bottom: 18px; align-items: start; }
.mod-layout > .card { margin-bottom: 0; }
.mod-target { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 16px; border-radius: var(--r-md); background: var(--ink); border: 1px solid var(--line); }
.mod-target img { width: 52px; height: 52px; border-radius: 16px; }
.mod-target > div { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.mod-note { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--r-md); background: #f2b5441a; border: 1px solid #f2b54455; color: #f6d698; font-size: .88rem; }
.field-help { color: #6b7790; font-size: .78rem; }
.mod-types { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.mod-types legend { color: var(--muted); font-size: .9rem; font-weight: 500; margin-bottom: 6px; padding: 0; }
.mod-type { position: relative; cursor: pointer; }
.mod-type input { position: absolute; opacity: 0; }
.mod-type-ui {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; height: 100%;
  border-radius: 12px; background: var(--ink); border: 1px solid var(--line); color: var(--muted); text-align: center;
  transition: border-color .15s, background-color .15s, color .15s;
}
.mod-type-ui strong { font-size: .8rem; line-height: 1.2; }
.mod-type-ui svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mod-type:hover .mod-type-ui { border-color: #3b4a66; color: var(--text); }
.mod-type input:focus-visible + .mod-type-ui { outline: 2px solid var(--brass); outline-offset: 2px; }
.mod-type input:checked + .mod-type-ui { color: var(--mt, var(--brass)); border-color: var(--mt, var(--brass)); background: color-mix(in srgb, var(--mt, var(--brass)) 14%, var(--ink)); }
.mod-type-warn { --mt: #f2b544; }
.mod-type-timeout { --mt: #fbbf62; }
.mod-type-kick { --mt: #fda36b; }
.mod-type-ban { --mt: #ff7a7a; }
.mod-type-unban { --mt: #7ee2ae; }
.mod-help { margin: -4px 0 0; color: var(--muted); font-size: .84rem; min-height: 1.3em; }
.form > div[data-for] { display: grid; gap: 6px; color: var(--muted); font-size: .9rem; font-weight: 500; }
.form > div[hidden] { display: none; }
.duration-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.duration-row input { width: 110px; }
.chips-select { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { padding: 5px 10px; border-radius: 99px; border: 1px solid var(--border); background: var(--ink); color: var(--muted); font: 600 .78rem var(--font-text); cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; }
.chip-btn:hover { color: var(--text); border-color: #3b4a66; }
.chip-btn.active { color: var(--brass-ink); background: var(--brass); border-color: var(--brass); }
.mod-submit { justify-self: stretch !important; }
.tile-icon-danger { display: inline-grid; place-items: center; background: #ef5b5b1f; }
.tile-icon-danger svg { fill: none; stroke: #ff9a9a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ban-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 460px; overflow-y: auto; }
.ban-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); background: var(--ink); border: 1px solid var(--line); }
.ban-list img { width: 38px; height: 38px; border-radius: 12px; filter: grayscale(.6); }
.ban-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ban-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ban-list form { margin: 0; }

.hist-list { list-style: none; margin: 0; padding: 0; position: relative; }
.hist-list::before { content: ""; position: absolute; left: 17px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.hist-item { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 10px 0; }
.hist-icon { position: relative; z-index: 1; flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--panel); border: 1px solid var(--hc, var(--border)); color: var(--hc, var(--muted)); }
.hist-icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hist-warn { --hc: #f2b544; }
.hist-timeout { --hc: #fbbf62; }
.hist-kick { --hc: #fda36b; }
.hist-ban { --hc: #ff7a7a; }
.hist-unban { --hc: #7ee2ae; }
.hist-body { flex: 1; min-width: 0; padding: 10px 14px; border-radius: var(--r-md); background: var(--ink); border: 1px solid var(--line); }
.hist-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.hist-line > strong { color: var(--hc); }
.hist-user { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.hist-user img { width: 20px; height: 20px; border-radius: 6px; }
.hist-reason { margin: 4px 0; color: #c9d1df; font-size: .9rem; overflow-wrap: anywhere; }
.hist-item > form { margin: 10px 0 0; }

@media (max-width: 1100px) {
  .mod-layout, .ticket-layout { grid-template-columns: minmax(0, 1fr); }
  .ticket-side { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
  .ticket-side .card { margin-bottom: 0; }
}
@media (max-width: 720px) {
  .page-hero-icon { display: none; }
  .page-hero .me-kpis { grid-template-columns: repeat(2, 1fr) !important; }
  .toolbar > * { width: 100%; }
  .toolbar-field select { flex: 1; }
  .mod-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .t-card { grid-template-columns: auto minmax(0, 1fr); }
  .t-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; padding-right: 0; }
  .t-arrow { display: none; }
  .msg { max-width: 100%; }
  .ticket-head-side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
  .hist-item { flex-wrap: wrap; }
  .hist-item > form { margin-left: 50px; margin-top: 0; }
}

/* --- Bienvenue -------------------------------------------------------------- */
.wl-form [hidden] { display: none !important; }
.form label.switch { display: inline-flex; align-items: center; gap: 10px; color: var(--text); justify-self: start; }
.wl-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.wl-fieldset:disabled { opacity: .7; }
.tab-dot { width: 7px; height: 7px; border-radius: 50%; background: #5b6782; }
.tab-dot.on { background: var(--ok); box-shadow: 0 0 0 3px #3fbf7f33; }
.lb-tab.active .tab-dot.on { background: #1b7a4a; box-shadow: none; }
.lb-tabs button.lb-tab { border: 0; background: transparent; font: inherit; font-weight: 600; cursor: pointer; }
.lb-tabs button.lb-tab.active { background: var(--brass); color: var(--brass-ink); }
.wl-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 18px; }
.wl-layout > .card { margin-bottom: 0; }
.tile-icon-svg { display: inline-grid; place-items: center; }
.tile-icon-svg svg { fill: none; stroke: var(--brass); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wl-help { margin: 4px 0 0 42px; }
.switch-label { min-width: 70px; }
.wl-fields { gap: 16px; }
.wl-embed { display: grid; gap: 14px; padding: 14px 16px; border-radius: var(--r-md); background: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--brass); }
.wl-row { display: flex; gap: 12px; align-items: flex-end; }
.wl-grow { flex: 1; min-width: 0; }
.wl-color { display: flex; align-items: center; gap: 8px; }
.wl-color code { font-size: .8rem; }
.wl-vars { padding-top: 4px; border-top: 1px dashed var(--line); }
.wl-vars p { margin: 10px 0 8px; }
.wl-vars .chip-btn { font-family: ui-monospace, Consolas, monospace; font-size: .74rem; }
.wl-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 6px; }
.wl-actions .btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wl-preview-col { position: sticky; top: 20px; }
.wl-preview-title { margin: 0 0 12px; font-weight: 700; }
.wl-off { margin: 12px 0 0; padding: 8px 12px; border-radius: var(--r-md); border: 1px dashed var(--border); text-align: center; }

/* Aperçu façon Discord */
.dc-msg { display: flex; gap: 14px; padding: 14px 16px; border-radius: 12px; background: #313338; color: #dbdee1; font: 15px/1.4 "gg sans", "Segoe UI", system-ui, sans-serif; transition: opacity .2s; }
.dc-msg.is-off { opacity: .45; }
.dc-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.dc-body { min-width: 0; flex: 1; }
.dc-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.dc-head strong { color: #f2f3f5; font-weight: 600; }
.dc-bot { background: #5865f2; color: #fff; font-size: .62rem; font-weight: 700; padding: 1px 5px; border-radius: 4px; }
.dc-time { color: #949ba4; font-size: .75rem; }
.dc-content { overflow-wrap: anywhere; }
.dc-content code, .dc-embed code { background: #1e1f22; border: 0; padding: 1px 4px; border-radius: 4px; font-size: .85em; }
.dc-mention { background: #5865f24d; color: #c9cdfb; padding: 0 3px; border-radius: 3px; font-weight: 500; }
.dc-embed { display: flex; gap: 16px; margin-top: 6px; padding: 10px 14px 14px 12px; max-width: 440px; border-radius: 4px; background: #2b2d31; border-left: 4px solid #f2b544; }
.dc-embed-main { flex: 1; min-width: 0; display: grid; gap: 6px; }
.dc-embed-title { color: #f2f3f5; font-weight: 700; font-size: 1rem; overflow-wrap: anywhere; }
.dc-embed-desc { font-size: .9rem; overflow-wrap: anywhere; }
.dc-embed-image { max-width: 100%; border-radius: 4px; margin-top: 4px; }
.dc-embed-footer { color: #b5bac1; font-size: .74rem; margin-top: 2px; }
.dc-embed-thumb { width: 72px; height: 72px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.dc-empty { margin: 4px 0 0; font-style: italic; }

/* Rôles automatiques */
.role-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.role-opt { position: relative; cursor: pointer; }
.role-opt input { position: absolute; opacity: 0; }
.role-opt-ui { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; background: var(--ink); border: 1px solid var(--border); font-size: .86rem; font-weight: 600; color: var(--muted); transition: border-color .15s, color .15s, background-color .15s; }
.role-opt-ui i { width: 10px; height: 10px; border-radius: 50%; }
.role-opt-ui svg { fill: none; stroke: currentColor; stroke-width: 2; }
.role-opt:hover .role-opt-ui { color: var(--text); border-color: #3b4a66; }
.role-opt input:checked + .role-opt-ui { color: var(--text); border-color: var(--brass); background: var(--brass-soft); }
.role-opt input:focus-visible + .role-opt-ui { outline: 2px solid var(--brass); outline-offset: 2px; }
.role-opt.is-locked { cursor: not-allowed; opacity: .5; }

/* --- Invitations ------------------------------------------------------------ */
.inv-note { margin: -4px 0 14px 4px; }
.inv-focus .back-link { margin-bottom: 14px; }
.inv-focus-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.inv-focus-head > img { width: 56px; height: 56px; border-radius: 18px; box-shadow: 0 0 0 3px var(--panel), 0 0 0 4px var(--brass); }
.inv-focus-name { margin: 0; font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; }
.inv-focus-stats { margin-left: auto; display: flex; gap: 8px; }
.inv-focus-stats div { display: flex; flex-direction: column; align-items: center; min-width: 84px; padding: 8px 12px; border-radius: var(--r-md); background: var(--ink); border: 1px solid var(--line); }
.inv-focus-stats strong { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--brass); }
.inv-focus-stats span { color: var(--muted); font-size: .74rem; }

.inv-top { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.inv-top-card { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--ink); border: 1px solid var(--line); color: var(--text); transition: border-color .18s, transform .18s; }
.inv-top-card:hover { text-decoration: none; border-color: #f2b54455; transform: translateY(-2px); }
.inv-top-card > img { width: 40px; height: 40px; border-radius: 12px; }
.inv-top-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.inv-top-main strong, .inv-top-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-top-nums { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.15; }
.inv-big { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--brass); }

.join-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.join-row { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--ink); border: 1px solid var(--line); }
.join-row[hidden] { display: none; }
.join-row.is-gone { opacity: .6; }
.join-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.join-who img { width: 38px; height: 38px; border-radius: 12px; }
.join-who div { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.join-who strong, .join-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.join-arrow { display: flex; flex-direction: column; align-items: center; color: var(--muted); font-size: .7rem; font-family: ui-monospace, Consolas, monospace; }
.join-arrow svg { fill: none; stroke: var(--brass); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.join-by { min-width: 0; }
.join-inviter { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.join-inviter img { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; }
.join-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; color: var(--muted); font-size: .8rem; }

.inv-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.inv-link { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--ink); border: 1px solid var(--line); }
.inv-link-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inv-link-head .btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.inv-code { background: transparent; border: 0; padding: 0; color: var(--brass); font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-link-by { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; }
.inv-link-by img { width: 22px; height: 22px; border-radius: 7px; }
.inv-link-uses { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: .88rem; }
.inv-link .progress { margin: 0; height: 6px; }

@media (max-width: 1100px) {
  .wl-layout { grid-template-columns: minmax(0, 1fr); }
  .wl-preview-col { position: static; order: -1; }
}
@media (max-width: 720px) {
  .wl-help { margin-left: 0; }
  .wl-row { flex-direction: column; align-items: stretch; }
  .join-row { grid-template-columns: minmax(0, 1fr) auto; }
  .join-arrow { display: none; }
  .join-by { grid-column: 1; }
  .join-meta { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; align-items: flex-end; }
  .inv-focus-stats { margin-left: 0; width: 100%; }
  .inv-focus-stats div { flex: 1; min-width: 0; }
  .inv-top { grid-template-columns: minmax(0, 1fr); }
}

/* --- Projets ----------------------------------------------------------------- */
.cooldown-note { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin-bottom: 18px; border-radius: var(--r-md); background: linear-gradient(90deg, var(--brass-soft), transparent 80%), var(--panel); border: 1px solid #f2b54455; }
.cooldown-note svg { flex-shrink: 0; fill: none; stroke: var(--brass); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.cooldown-note div { display: flex; flex-direction: column; gap: 2px; }
.cooldown-note strong span { color: var(--brass); }
.bypass-note { background: linear-gradient(90deg, #3fbf7f1a, transparent 80%), var(--panel); border-color: #3fbf7f55; }
.bypass-note svg { stroke: var(--ok); }
.set-help { margin-top: -8px; }
.page-hero-actions .btn svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.btn.is-disabled { opacity: .45; cursor: not-allowed; }
.pj-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
a.switch { color: var(--text); }
a.switch:hover { text-decoration: none; }
.switch-ui.on { background: var(--brass-soft); border-color: var(--brass); }
.switch-ui.on::after { transform: translateX(16px); background: var(--brass); }

.pj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 18px; }
.pj-grid > a[hidden] { display: none; }
.pj-card {
  display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--r-lg); color: var(--text);
  background: linear-gradient(180deg, #ffffff07, transparent 120px), var(--panel); border: 1px solid var(--border);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.pj-card:hover { text-decoration: none; border-color: #f2b54455; transform: translateY(-3px); box-shadow: 0 14px 30px -20px #000e; }
.pj-card.is-closed { opacity: .75; }
.pj-card-head { display: flex; align-items: center; gap: 10px; }
.pj-card-head img { width: 34px; height: 34px; border-radius: 11px; }
.pj-card-head div { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pj-card-head strong { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-title { margin: 2px 0 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; overflow-wrap: anywhere; }
.pj-desc { margin: 0; color: #c9d1df; font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.pj-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-skills .chip { background: var(--brass-soft); border-color: #f2b54444; color: #f6d698; }
.pj-wanted { margin: 0; font-size: .82rem; color: var(--muted); }
.pj-wanted span { color: var(--text); font-weight: 600; }
.pj-card-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); font-size: .82rem; color: var(--muted); }
.pj-card-foot span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.pj-card-foot svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.pj-more { margin-left: auto; color: var(--brass); font-weight: 600; transition: transform .18s; }
.pj-card:hover .pj-more { transform: translateX(3px); }

/* Jeu / plateforme : badge, filigrane, filtre */
.pj-card { position: relative; overflow: hidden; isolation: isolate; }
.pj-watermark { position: absolute; right: -26px; top: 34px; width: 130px; height: 130px; z-index: -1; opacity: .07; transform: rotate(-12deg); pointer-events: none; transition: opacity .25s, transform .25s; }
.pj-watermark img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(.2); border-radius: 28px; }
.pj-watermark svg { width: 100%; height: 100%; fill: none; stroke: var(--brass); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.pj-card:hover .pj-watermark { opacity: .13; transform: rotate(-8deg) scale(1.05); }
.pj-platform { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 3px 10px 3px 3px; border-radius: 99px; background: var(--ink); border: 1px solid var(--line); font-size: .78rem; font-weight: 700; color: var(--text); }
.pj-platform-logo { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; overflow: hidden; background: var(--panel-2); flex-shrink: 0; }
.pj-platform-logo img { width: 100%; height: 100%; object-fit: cover; }
.pj-platform-logo svg { width: 15px; height: 15px; fill: none; stroke: var(--brass); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pj-platform-logo.is-broken::after { content: "🎮"; font-size: .7rem; }
.plat-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.plat-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 6px; border-radius: 99px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); font: 600 .82rem var(--font-text); cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; }
.plat-chip:first-child { padding-left: 12px; }
.plat-chip img { width: 18px; height: 18px; border-radius: 5px; }
.plat-chip svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.plat-chip:hover { color: var(--text); border-color: #3b4a66; }
.plat-chip.active { color: var(--brass-ink); background: var(--brass); border-color: var(--brass); }
.pj-title-row { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
.pj-title-row > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.pj-title-row h1 { margin: 0 0 8px; }
.pj-big-logo { display: grid; place-items: center; width: 72px; height: 72px; flex-shrink: 0; border-radius: 20px; overflow: hidden; background: var(--ink); border: 1px solid var(--line); box-shadow: 0 10px 24px -14px #000c; }
.pj-big-logo img { width: 100%; height: 100%; object-fit: cover; }
.pj-big-logo svg { width: 38px; height: 38px; fill: none; stroke: var(--brass); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Formulaire : choix du jeu */
.plat-picker { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
.plat-picker legend { color: var(--text); font-weight: 600; font-size: .92rem; padding: 0; margin-bottom: 4px; }
.plat-group { margin: 4px 0 0; color: var(--muted); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.plat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.form label.plat-opt { display: block; position: relative; cursor: pointer; gap: 0; }
.plat-opt input { position: absolute; opacity: 0; }
.plat-ui { display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; padding: 12px 6px 10px; border-radius: 12px; background: var(--ink); border: 1px solid var(--line); text-align: center; transition: border-color .15s, background-color .15s, transform .15s; }
.plat-logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; overflow: hidden; background: var(--panel-2); }
.plat-logo img { width: 100%; height: 100%; object-fit: cover; }
.plat-logo b { color: var(--brass); font-family: var(--font-display); font-size: 1.1rem; }
.plat-logo svg { fill: none; stroke: var(--brass); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.plat-name { color: var(--text); font-size: .8rem; font-weight: 600; line-height: 1.2; }
.plat-opt:hover .plat-ui { border-color: #3b4a66; transform: translateY(-2px); }
.plat-opt input:checked + .plat-ui { border-color: var(--brass); background: linear-gradient(180deg, var(--brass-soft), transparent), var(--ink); box-shadow: 0 0 0 1px var(--brass); }
.plat-opt input:focus-visible + .plat-ui { outline: 2px solid var(--brass); outline-offset: 2px; }
.form label.plat-none { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .86rem; margin-top: 2px; }
.plat-none input { accent-color: var(--brass); }
.plat-custom { margin-top: 4px; }

/* --- Partenariats ----------------------------------------------------------- */
.pt-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 18px; margin-bottom: 18px; align-items: start; }
.pt-top > .card { margin-bottom: 0; }
.pt-steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.pt-steps li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--ink); border: 1px solid var(--line); }
.pt-steps li form { margin: 0; }
.pt-step-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: var(--panel-2); color: var(--muted); font-weight: 800; font-size: .85rem; }
.pt-steps li.is-ok .pt-step-n { background: var(--ok); color: #fff; }
.pt-step-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.pt-panel { display: grid; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--line); }
.pt-panel label { display: grid; gap: 5px; color: var(--muted); font-size: .9rem; }
.pt-panel .btn { justify-self: start; }
.pt-requests { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.pt-request { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--brass); }
.pt-request .who div { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.pt-request-text { margin: 0; color: #c9d1df; font-size: .88rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.pt-request-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: auto; }
.pt-request-actions form { margin: 0; }
.pt-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.pt-post { display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: var(--ink); border: 1px solid var(--line); }
.pt-post.is-soon { border-color: #f2b54466; }
.pt-post-media { position: relative; aspect-ratio: 16 / 9; background: radial-gradient(circle at 30% 30%, var(--brass-soft), transparent 70%), var(--panel-2); overflow: hidden; }
.pt-post-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pt-post-noimg { position: absolute; inset: 0; display: none; place-items: center; font-size: 2.4rem; }
.pt-post-media.no-img .pt-post-noimg { display: grid; }
.pt-post-body { display: flex; flex-direction: column; gap: 10px; padding: 12px; flex: 1; }
.pt-post-text { margin: 0; color: #c9d1df; font-size: .86rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.pt-expiry-head { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; color: var(--muted); }
.pt-expiry-head strong { color: var(--text); }
.pt-expiry-head strong.warn { color: var(--brass); }
.pt-expiry .progress { margin: 6px 0 0; height: 6px; }
.pt-post.is-soon .progress span { background: var(--danger); }
.pt-post-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.pt-post-actions form { margin: 0; }
.pt-history { margin-top: 14px; }
.pt-history summary { cursor: pointer; color: var(--muted); font-size: .88rem; }
.pt-history ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: .86rem; }
.pt-members { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.pt-members li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--r-md); background: var(--ink); border: 1px solid var(--line); }
.pt-members img { width: 38px; height: 38px; border-radius: 12px; }
.pt-member-main { flex: 1; min-width: 160px; display: flex; flex-direction: column; line-height: 1.3; }
.pt-add { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px dashed var(--line); }
.pt-add input { flex: 1; min-width: 180px; }
.pt-ticket-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 18px; border-radius: var(--r-lg); background: linear-gradient(90deg, var(--brass-soft), transparent 70%), var(--panel); border: 1px solid #f2b54466; }
.pt-ticket-banner.is-active { border-color: #3fbf7f66; background: linear-gradient(90deg, #3fbf7f1a, transparent 70%), var(--panel); }
.pt-ticket-banner.is-refused { border-color: var(--border); background: var(--panel); }
.pt-ticket-icon { font-size: 1.8rem; }
.pt-ticket-text { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.pt-ticket-actions { display: flex; gap: 8px; align-items: center; }
.pt-ticket-actions form { margin: 0; }

/* --- Centre de sécurité ----------------------------------------------------- */
.raid-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 18px; margin-bottom: 18px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--border); }
.raid-card form { margin: 0 0 0 auto; }
.raid-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #3fbf7f1a; color: var(--ok); flex-shrink: 0; }
.raid-icon svg, .sec-mod-icon svg, .sec-log-icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.raid-text { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; }
.raid-text span { color: var(--muted); font-size: .88rem; }
.raid-card.is-active { border-color: #ef5b5b; background: linear-gradient(90deg, #ef5b5b26, transparent 70%), var(--panel); box-shadow: 0 0 0 1px #ef5b5b55, 0 10px 30px -18px #ef5b5b; }
.raid-card.is-active .raid-icon { background: #ef5b5b; color: #fff; animation: raid-pulse 1.6s ease-out infinite; }
.raid-card.is-active strong { color: #ff9a9a; }
@keyframes raid-pulse { 0% { box-shadow: 0 0 0 0 #ef5b5b99; } 100% { box-shadow: 0 0 0 12px #ef5b5b00; } }
.calm .raid-card.is-active .raid-icon { animation: raid-pulse 2.4s ease-out infinite !important; }

.sec-general-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px 22px; align-items: start; }
.form-col { display: grid; gap: 6px; }
.sec-label { color: var(--muted); font-size: .9rem; font-weight: 500; }
.sec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; margin-bottom: 18px; align-items: start; }
.sec-mod { margin-bottom: 0; border-left: 3px solid var(--border); transition: border-color .2s, opacity .2s; }
.sec-mod.is-on { border-left-color: var(--ok); }
.sec-mod:not(.is-on) .sec-fields, .sec-mod:not(.is-on) .sec-desc { opacity: .5; }
.sec-mod-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sec-mod-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--panel-2); color: var(--muted); flex-shrink: 0; transition: background-color .2s, color .2s; }
.sec-mod.is-on .sec-mod-icon { background: #3fbf7f1f; color: var(--ok); }
.sec-mod-title { flex: 1; min-width: 0; }
.sec-mod-title h2 { margin: 0; font-size: 1.05rem; }
.sec-state { font-size: .76rem; font-weight: 700; color: var(--muted); }
.sec-mod.is-on .sec-state { color: #7ee2ae; }
.sec-desc { margin: 0 0 14px; }
.sec-fields { gap: 12px; }
.sec-multi { min-height: 110px; }

.sec-log { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.sec-log > li[hidden] { display: none; }
.sec-log-row { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--warn); }
.sec-log-row.lvl-critical { border-left-color: var(--danger); background: linear-gradient(90deg, #ef5b5b12, transparent 50%), var(--panel); }
.sec-log-row.lvl-info { border-left-color: var(--calque); }
.sec-log-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: var(--muted); flex-shrink: 0; }
.lvl-critical .sec-log-icon { color: #ff9a9a; }
.sec-log-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sec-log-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sec-log-top .pill { margin: 0; }
.sec-log-details { margin: 0; color: #c9d1df; font-size: .88rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.sec-log-user { display: inline-flex; align-items: center; gap: 5px; }
.sec-log-user img { border-radius: 5px; }

/* --- Actualités ------------------------------------------------------------- */
.page-hero-actions form { margin: 0; }
.page-hero-actions .btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plat-chip .chip-logo { width: 18px; height: 18px; border-radius: 5px; }
svg.chip-logo { fill: none; stroke: currentColor; stroke-width: 1.8; }
[data-news-list] [hidden] { display: none !important; }
.news-featured {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); margin-bottom: 18px; overflow: hidden; color: var(--text);
  border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--border); transition: border-color .18s, transform .18s, box-shadow .18s;
}
.news-featured:hover { text-decoration: none; border-color: #f2b54455; transform: translateY(-2px); box-shadow: 0 16px 34px -22px #000e; }
.news-featured-media { position: relative; min-height: 240px; background: radial-gradient(circle at 30% 30%, var(--brass-soft), transparent 70%), var(--ink); }
.news-featured-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.news-new { position: absolute; left: 14px; top: 14px; padding: 3px 10px; border-radius: 99px; background: var(--brass); color: var(--brass-ink); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.news-featured-body { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.news-featured-body h2 { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 800; letter-spacing: -.015em; overflow-wrap: anywhere; }
.news-featured .news-summary { -webkit-line-clamp: 5; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 14px; }
.news-card { display: flex; flex-direction: column; overflow: hidden; color: var(--text); border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--border); transition: border-color .18s, transform .18s, box-shadow .18s; }
.news-card:hover { text-decoration: none; border-color: #f2b54455; transform: translateY(-3px); box-shadow: 0 14px 30px -20px #000e; }
.news-card-media { position: relative; aspect-ratio: 16 / 8; background: radial-gradient(circle at 30% 30%, var(--brass-soft), transparent 70%), var(--ink); overflow: hidden; }
.news-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.news-card:hover .news-card-media img { transform: scale(1.04); }
.news-media-logo { position: absolute; inset: 0; display: grid; place-items: center; }
.news-card-media:not(.no-img) .news-media-logo, .news-featured-media:not(.no-img) img ~ .news-media-logo { display: none; }
.news-big-logo { width: 64px; height: 64px; border-radius: 18px; box-shadow: 0 10px 26px -10px #000c; }
svg.news-big-logo { fill: none; stroke: var(--brass); stroke-width: 1.4; box-shadow: none; }
.news-card-body { display: flex; flex-direction: column; gap: 8px; padding: 16px; flex: 1; }
.news-card-body h3 { margin: 0; font-size: 1.05rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.news-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .76rem; }
.news-src { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-src-logo { width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; }
svg.news-src-logo { fill: none; stroke: var(--brass); stroke-width: 1.8; }
.news-summary { margin: 0; color: #c9d1df; font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.news-read { margin-top: auto; padding-top: 6px; color: var(--brass); font-weight: 600; font-size: .84rem; }
.news-foot { margin: 6px 0 18px; }
.src-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.form label.src-row, .src-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); background: var(--ink); border: 1px solid var(--line); cursor: pointer; }
.src-row input { accent-color: var(--brass); width: 16px; height: 16px; flex-shrink: 0; }
.src-logo { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; overflow: hidden; background: var(--panel-2); flex-shrink: 0; }
.src-logo img { width: 100%; height: 100%; object-fit: cover; }
.src-logo svg { width: 18px; height: 18px; fill: none; stroke: var(--brass); stroke-width: 1.8; }
.src-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.src-main strong { font-size: .9rem; }
.src-remove { padding: 2px 8px; color: var(--muted); }
.src-remove:hover { color: #ff9a9a; }
.add-help { margin: -6px 0 14px; }
.add-search { padding: 0; border: 0; background: transparent; margin-bottom: 14px; }
.add-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.add-result { display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: var(--ink); border: 1px solid var(--line); }
.add-cover { aspect-ratio: 460 / 215; background: var(--panel-2); }
.add-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.add-info { display: flex; flex-direction: column; gap: 10px; padding: 12px; flex: 1; }
.add-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.add-name img { width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0; }
.add-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.add-info form { margin: 0; margin-top: auto; }
.add-info .btn, .add-info .pill { align-self: flex-start; }
@media (max-width: 720px) {
  .news-featured { grid-template-columns: minmax(0, 1fr); }
  .news-featured-media { min-height: 180px; }
}

/* Formulaire */
.pj-form-head { background: linear-gradient(90deg, var(--brass-soft), transparent 45%), var(--panel); }
.pj-form-icon { width: 52px; height: 52px; padding: 13px; border-radius: 16px; }
.pj-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.pj-form-layout > .card { margin-bottom: 0; }
.field-foot { display: flex; justify-content: space-between; gap: 10px; }
.counter { color: #6b7790; font-size: .76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.counter.is-low { color: var(--brass); }
.pj-skills-preview { min-height: 4px; margin-top: 4px; }
.pj-rules { position: sticky; top: 20px; }
.pj-rules ul { margin: 0; padding-left: 18px; display: grid; gap: 10px; color: var(--muted); font-size: .88rem; }
.pj-rules strong { color: var(--text); }

/* Page d'un projet */
.pj-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 24px; align-items: center; background: linear-gradient(120deg, var(--brass-soft), transparent 50%), var(--panel); }
.pj-head-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pj-head h1 { margin: 0 0 12px; font-size: clamp(1.6rem, 3.5vw, 2.3rem); overflow-wrap: anywhere; }
.pj-owner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--ink); border: 1px solid var(--line); }
.pj-owner img { width: 52px; height: 52px; border-radius: 16px; }
.pj-owner div { display: flex; flex-direction: column; line-height: 1.3; }
.pj-head-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; padding-top: 14px; border-top: 1px dashed var(--line); }
.pj-head-actions form { display: flex; gap: 8px; margin: 0; flex-wrap: wrap; }
.pj-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.pj-content { min-width: 0; }
.pj-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.pj-two > .card { margin-bottom: 0; }
.pj-text { white-space: pre-wrap; overflow-wrap: anywhere; color: #d5dbe6; line-height: 1.65; }
.pj-side { position: sticky; top: 20px; min-width: 0; }
.pj-apply .tile-head { margin-bottom: 10px; }
.pj-apply textarea { min-height: 150px; }
.pj-prompts { margin: 4px 0 14px; padding-left: 18px; color: var(--muted); font-size: .86rem; display: grid; gap: 3px; }
.pj-report summary { list-style: none; cursor: pointer; }
.pj-report summary::-webkit-details-marker { display: none; }
.pj-report[open] summary { margin-bottom: 12px; }
.pj-side-note { margin: 12px 0 0; }

.app-list { display: grid; gap: 12px; }
.app-card { display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: var(--ink); border: 1px solid var(--line); }
.app-card.is-pending { border-left: 3px solid var(--brass); }
.app-card.is-accepted { border-left: 3px solid var(--ok); }
.app-card.is-rejected { opacity: .65; }
.app-head { display: flex; align-items: center; gap: 12px; }
.app-head img { width: 52px; height: 52px; border-radius: 16px; }
.app-id { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.app-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.app-stats div { background: var(--panel); }
.app-message { white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px 14px; border-radius: var(--r-md); background: var(--panel-2); border: 1px solid var(--line); font-size: .92rem; color: #d5dbe6; }
.pj-apply .app-message { margin-bottom: 12px; }
.app-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.app-actions form { margin: 0; }
.app-actions .btn svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Équipe : liste des projets et signalements */
.adm-list { display: grid; gap: 10px; margin-bottom: 18px; }
.adm-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--border); }
.adm-row > img { width: 42px; height: 42px; border-radius: 13px; }
.adm-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.adm-main .t-title a { color: var(--text); }
.adm-reason { margin: 0; color: #c9d1df; font-size: .88rem; overflow-wrap: anywhere; }
.adm-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.adm-actions form { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.adm-report.is-resolved, .adm-report.is-dismissed { opacity: .65; }
.adm-menu { position: relative; }
.adm-menu summary { list-style: none; }
.adm-menu summary::-webkit-details-marker { display: none; }
.adm-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; width: 280px; padding: 14px; border-radius: var(--r-md); background: var(--panel-2); border: 1px solid var(--border); box-shadow: 0 16px 40px -12px #000c; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-bottom: 18px; align-items: start; }
.set-grid > .card { margin-bottom: 0; }
.set-sub { margin-top: 18px; }
.announce-preview { display: grid; gap: 8px; justify-items: start; padding: 12px; border-radius: 10px; background: #313338; color: #dbdee1; font: 14px/1.4 "gg sans", "Segoe UI", system-ui, sans-serif; }
.announce-preview .dc-embed { margin: 0; max-width: 100%; }
.dc-btn { display: inline-block; padding: 5px 14px; border-radius: 4px; background: #248046; color: #fff; font-weight: 600; font-size: .85rem; }
.announce-all { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 4px; padding: 14px 16px; border-radius: var(--r-md); border: 1px dashed var(--border); }
.announce-all p { margin: 0; flex: 1; min-width: 220px; }

@media (max-width: 1100px) {
  .pj-layout, .pj-form-layout { grid-template-columns: minmax(0, 1fr); }
  .pj-side, .pj-rules { position: static; }
}
@media (max-width: 720px) {
  .pj-head { grid-template-columns: minmax(0, 1fr); }
  .pj-two { grid-template-columns: minmax(0, 1fr); }
  .app-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-row { grid-template-columns: auto minmax(0, 1fr); }
  .adm-row > .pill { grid-column: 2; justify-self: start; }
  .adm-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .adm-pop { left: 0; right: auto; width: min(280px, 80vw); }
}

/* Fiche membre : même atelier que l'accueil (lampe, balayage, copeaux),
   l'anneau de niveau joue le rôle du logo. */
.me-hero { --grid: 22px; }
.me-hero .hero-lamp, .me-hero .hero-scan, .me-hero .hero-dust { z-index: -1; }
.me-ring { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; }
.me-ring .ring-ticks { transform-box: view-box; transform-origin: 64px 64px; }
.ring-glint { fill: none; stroke: #fff6dc; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 10 1000; opacity: 0; }

@keyframes ring-glint { 0% { stroke-dashoffset: 0; opacity: 0; } 5% { opacity: .85; } 40% { stroke-dashoffset: calc(var(--c) * -1); opacity: .85; } 44%, 100% { stroke-dashoffset: calc(var(--c) * -1); opacity: 0; } }
@keyframes avatar-glow {
  0%, 100% { box-shadow: 0 0 0 4px var(--panel), 0 0 0 5px var(--brass), 0 0 0 0 #f2b54400; }
  50% { box-shadow: 0 0 0 4px var(--panel), 0 0 0 5px var(--brass), 0 0 26px 4px #f2b54455; }
}
.anim .me-ring .ring-ticks { animation: orbit 60s linear infinite; }
.anim .ring-glint { animation: ring-glint 6s 1.6s ease-in-out infinite; }
.anim .me-avatar img { animation: avatar-glow 4s 1s ease-in-out infinite; }

/* Retours sur les actions */
.btn:active { transform: translateY(1px); }
.perm-select { transition: background-color .2s, color .2s, border-color .2s; }
.tab { transition: background-color .18s, color .18s; }
.rank-n { transition: transform .2s; }
.table tbody tr:hover .rank-n { transform: scale(1.08); }

/* --- Petits écrans --- */
@media (max-width: 960px) {
  .with-sidebar .topbar { display: flex; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; height: auto;
    transform: translateX(-100%); transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s;
  }
  .menu-open .sidebar { transform: none; box-shadow: 0 0 0 100vmax #0000, 18px 0 40px #0008; }
  .menu-open { overflow: hidden; }
  .container { padding: 26px 18px 48px; }
}
@media (max-width: 720px) {
  h1 { font-size: 1.6rem; }
  .container { padding: 22px 14px 40px; }
  .hero-body { padding: 36px 24px; }
  .hero-mark { right: -110px; width: 260px; opacity: .35; }
  .bar-label { writing-mode: vertical-rl; transform: rotate(180deg); }
  .hbars li { grid-template-columns: minmax(70px, 110px) 1fr auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }

  /* Mode calme de l'accueil (Windows « Effets d'animation » désactivés, etc.) :
     seulement des mouvements lents et discrets, sur place. */
  .calm .hero-dust i { animation: dust calc(var(--d) * 1.6) var(--delay) linear infinite !important; }
  .calm .hm-orbit { animation: orbit 90s linear infinite !important; }
  .calm .hm-float { animation: float 8s ease-in-out infinite !important; }
  .calm .hm-glint { animation: glint 7s 1s ease-in-out infinite !important; }
  .calm .me-ring .ring-ticks { animation: orbit 90s linear infinite !important; }
  .calm .ring-glint { animation: ring-glint 8s 1s ease-in-out infinite !important; }
  .calm .me-avatar img { animation: avatar-glow 6s ease-in-out infinite !important; }
  .calm .empty-icon-pulse::after { animation: ring-pulse 3.5s ease-out infinite !important; }
  .calm .lb-trophy-orbit { animation: orbit 90s linear infinite !important; }
  .calm .lb-trophy-glint { animation: glint 7s 1s ease-in-out infinite !important; }
  .calm .pod-crown { animation: crown-bob 4s ease-in-out infinite !important; }
  .calm .page-hero-orbit { animation: orbit 90s linear infinite !important; }
  .calm .pill-brass i { animation: pulse-brass 2.6s ease-out infinite !important; }
}

/* ===== Suggestions ===== */
.sg-form-card .tile-head { flex-wrap: wrap; }
.sg-list { display: grid; gap: 14px; }
.sg-card { margin: 0; scroll-margin-top: 80px; }
.sg-card:target { border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-soft); }
.sg-head { display: flex; align-items: center; gap: 12px; }
.sg-head img { border-radius: 50%; flex-shrink: 0; }
.sg-head > div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sg-title { margin: 14px 0 6px; font-size: 1.1rem; overflow-wrap: anywhere; }
.sg-desc { margin: 0; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; line-height: 1.55; }
.sg-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.sg-votes { display: flex; gap: 8px; margin: 0; }
.sg-vote { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: .95rem; cursor: pointer; transition: border-color .15s, background .15s; }
.sg-vote:hover:not(:disabled) { border-color: var(--muted); }
.sg-vote:disabled { opacity: .55; cursor: not-allowed; }
.sg-up.is-on { border-color: var(--ok); background: #3fbf7f22; }
.sg-down.is-on { border-color: var(--danger); background: #ef5b5b22; }
.sg-score { color: var(--muted); font-weight: 600; font-size: .9rem; }
.sg-score.pos { color: var(--ok); }
.sg-score.neg { color: var(--danger); }
.sg-link { margin-left: auto; }
.sg-more summary { cursor: pointer; margin: 4px 0; }
.sg-more .sg-desc { margin: 6px 0 8px; font-size: .92rem; }
.sg-adm-votes { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
@media (max-width: 640px) {
  .sg-link { margin-left: 0; }
  .sg-adm-votes { flex-wrap: wrap; }
}

/* ===== Vitrine des développeurs ===== */
.sc-search { margin-bottom: 12px; }
.sc-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.sc-cats .chip-btn { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.sc-count { font-size: .7rem; opacity: .75; }
.sc-h2 { margin: 0; font-size: 1.1rem; }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 18px; }
.sc-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; color: var(--text); transition: border-color .15s, transform .15s; }
.sc-card:hover { border-color: #f2b54480; transform: translateY(-2px); text-decoration: none; }
.sc-card-media { position: relative; aspect-ratio: 16 / 9; background: radial-gradient(circle at 30% 20%, var(--brass-soft), transparent 60%), var(--panel-2); overflow: hidden; }
.sc-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.sc-card-ph { position: absolute; inset: 0; display: grid; place-items: center; font: 800 2.6rem var(--font-display); color: #f2b54466; }
.sc-cat-pill { position: absolute; left: 10px; top: 10px; z-index: 2; background: #131a26d9; backdrop-filter: blur(4px); }
.sc-card-body { padding: 14px 16px 6px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sc-card-title { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.sc-card-sum { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sc-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.sc-price { color: var(--brass); border-color: #f2b54455; font-weight: 700; }
.sc-card-foot { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: .86rem; }
.sc-card-foot img { border-radius: 50%; flex-shrink: 0; }
.sc-card-dev { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-verified { flex-shrink: 0; margin-left: auto; fill: none; stroke: var(--ok); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.sc-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 99px; font-size: .78rem; font-weight: 700; border: 1px solid; white-space: nowrap; }
.sc-badge svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-badge-sm { padding: 1px 8px 1px 6px; font-size: .7rem; }
.sc-badge-sm svg { width: 12px; height: 12px; }
.sc-badge-certified { color: #7ee2ae; background: #3fbf7f1a; border-color: #3fbf7f55; }
.sc-badge-confirmed { color: var(--calque); background: #7cc0ff1a; border-color: #7cc0ff55; }
.sc-badge-partner { color: var(--brass); background: var(--brass-soft); border-color: #f2b54466; }

.sc-dev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 18px; }
.sc-dev-card { position: relative; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; color: var(--text); transition: border-color .15s, transform .15s; }
.sc-dev-card:hover { border-color: #f2b54480; transform: translateY(-2px); text-decoration: none; }
.sc-dev-banner { position: relative; height: 84px; background: linear-gradient(120deg, #f2b54433, #7cc0ff22), var(--panel-2); overflow: hidden; }
.sc-dev-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-dev-avatar { position: absolute; top: 48px; left: 16px; border-radius: 18px; border: 3px solid var(--panel); background: var(--panel); }
.sc-dev-body { padding: 42px 16px 10px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sc-dev-body h3 { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.sc-dev-bio { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.sc-dev-foot { display: flex; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--line); font-size: .84rem; color: var(--muted); }

.sc-profile { padding: 0; overflow: hidden; }
.sc-profile-banner { height: 180px; background: linear-gradient(120deg, #f2b54440, #7cc0ff26), var(--panel-2); overflow: hidden; }
.sc-profile-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-profile-head { display: flex; align-items: flex-end; gap: 18px; padding: 0 22px 20px; margin-top: -52px; flex-wrap: wrap; }
.sc-profile-avatar { border-radius: 26px; border: 4px solid var(--panel); background: var(--panel); flex-shrink: 0; }
.sc-profile-id { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.sc-profile-id h1 { margin: 0; overflow-wrap: anywhere; }
.sc-profile-id p { margin: 0; }
.sc-profile-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.sc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.sc-main, .sc-side { min-width: 0; }
.sc-main > .card, .sc-side > .card { margin-bottom: 18px; }
.sc-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.sc-text { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.6; color: #d7dde8; }
.sc-links { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.sc-links a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); background: var(--panel-2); color: var(--text); overflow: hidden; }
.sc-links a:hover { text-decoration: none; background: #2a364c; }
.sc-links svg { flex-shrink: 0; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-links span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.sc-links small { color: var(--muted); font-size: .76rem; }
.sc-badge-help ul, .sc-badge-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }

.sc-product-head { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.sc-product-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sc-product-title h1 { margin: 12px 0 8px; overflow-wrap: anywhere; }
.sc-lead { margin: 0; color: var(--muted); font-size: 1.02rem; line-height: 1.5; }
.sc-buy { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-md); background: var(--panel-2); border: 1px solid var(--border); }
.sc-buy-label { color: var(--muted); font-size: .8rem; }
.sc-buy-price { font: 800 1.6rem var(--font-display); color: var(--brass); overflow-wrap: anywhere; }
.sc-buy-links { display: grid; gap: 8px; }
.sc-buy-links .btn { justify-content: center; flex-wrap: wrap; }
.sc-host { font-size: .74rem; font-weight: 500; opacity: .75; }
.sc-buy .field-help { margin: 0; }
.sc-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.sc-shot { display: block; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); background: var(--panel-2); aspect-ratio: 16 / 9; }
.sc-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.sc-shot:hover img { transform: scale(1.03); }
.sc-shot-main { grid-column: span 2; grid-row: span 2; }
.sc-features { margin: 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.5; }
.sc-features li::marker { color: var(--brass); }
.sc-rules { margin: 0; padding-left: 22px; display: grid; gap: 8px; line-height: 1.5; }
.sc-rules li::marker { color: var(--brass); font-weight: 700; }
.sc-rules-sm { font-size: .88rem; gap: 5px; }
.sc-dev-mini { display: flex; align-items: center; gap: 14px; color: var(--text); }
.sc-dev-mini:hover { text-decoration: none; border-color: #f2b54480; }
.sc-dev-mini img { border-radius: 16px; flex-shrink: 0; }
.sc-dev-mini > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sc-others { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sc-others a { display: flex; flex-direction: column; padding: 8px 10px; border-radius: var(--r-md); color: var(--text); }
.sc-others a:hover { background: var(--panel-2); text-decoration: none; }
.sc-report summary { cursor: pointer; display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; list-style: none; }
.sc-report summary::-webkit-details-marker { display: none; }
.sc-report summary svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-report[open] summary { margin-bottom: 14px; color: var(--text); }

.sc-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sc-history li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sc-accept { align-items: flex-start !important; line-height: 1.45; }
.sc-accept input { margin-top: 3px !important; }
.sc-me { display: flex; align-items: center; gap: 12px; }
.sc-me img { border-radius: 14px; }
.sc-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sc-form .tile { margin-bottom: 18px; }
.sc-preview { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-preview img { width: 96px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); }
.sc-preview img.is-broken { opacity: .25; border-color: var(--danger); }
.sc-thumb { width: 42px; height: 42px; border-radius: 13px; object-fit: cover; flex-shrink: 0; }
.sc-thumb-ph { display: grid; place-items: center; background: var(--brass-soft); color: var(--brass); font: 800 1.1rem var(--font-display); }

.sc-admin-tabs { flex-wrap: wrap; }
.sc-badge-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px; }
.sc-badge-form .check { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; color: var(--text); }
.sc-cat-list { display: grid; gap: 8px; margin-bottom: 14px; }
.sc-cat-row { margin: 0; }
.sc-cat-fields, .sc-cat-new { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; border: 0; padding: 0; margin: 0; }
.sc-cat-fields input[name="name"], .sc-cat-new input[name="name"] { flex: 1; min-width: 180px; }
.sc-cat-pos { width: 72px; }
.sc-cat-fields .check { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; }
.sc-log-card { padding: 0; overflow-x: auto; }
.sc-log td { font-size: .86rem; }
.sc-log .nowrap { white-space: nowrap; }
.sc-log-details { color: var(--muted); overflow-wrap: anywhere; min-width: 200px; }
.sc-app-avatar { border-radius: 16px; flex-shrink: 0; }
.sc-gh { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.sc-gh img { border-radius: 50%; }
.sc-gh > div { display: flex; flex-direction: column; }
.sc-gh-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.sc-gh-stats div { background: var(--panel-2); border-radius: var(--r-md); padding: 8px 10px; }
.sc-gh-stats dt { color: var(--muted); font-size: .72rem; }
.sc-gh-stats dd { margin: 2px 0 0; font-weight: 700; }
.sc-repos { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.sc-repos li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--r-md); background: var(--panel-2); overflow-wrap: anywhere; }
.sc-refuse { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }

@media (max-width: 1100px) {
  .sc-layout, .sc-product-head { grid-template-columns: minmax(0, 1fr); }
  .sc-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sc-two, .sc-row { grid-template-columns: minmax(0, 1fr); }
  .sc-grid, .sc-dev-grid { grid-template-columns: minmax(0, 1fr); }
  .sc-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-profile-banner { height: 120px; }
  .sc-profile-head { padding: 0 16px 16px; }
  .sc-profile-avatar { width: 84px; height: 84px; }
  .sc-gh-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   Règlement obligatoire (/reglement, /admin/rules)
   ========================================================================== */
.rl-head { margin-bottom: 14px; }
.rl-account { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; }
.rl-account img { width: 40px; height: 40px; border-radius: 12px; }
.rl-account p { flex: 1; min-width: 200px; margin: 0; }
.rl-account form { margin: 0; }
.rl-done { display: flex; gap: 16px; align-items: flex-start; border-color: #3fbf7f66; background: linear-gradient(90deg, #3fbf7f14, transparent 60%), var(--panel); }
.rl-done h2 { margin: 2px 0 6px; font-size: 1.25rem; }
.rl-done p { margin: 0 0 4px; }
.rl-done-icon { flex-shrink: 0; fill: none; stroke: #7ee2ae; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.rl-body { max-width: 860px; line-height: 1.7; color: #d7dde8; overflow-wrap: anywhere; }
.rl-body h2, .rl-body h3, .rl-body h4 { color: var(--text); margin: 1.4em 0 .5em; }
.rl-body > :first-child { margin-top: 0; }
.rl-body h2 { font-size: 1.25rem; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.rl-body h3 { font-size: 1.05rem; }
.rl-body h4 { font-size: .95rem; color: var(--brass); }
.rl-body p { margin: 0 0 .9em; }
.rl-body ul, .rl-body ol { margin: 0 0 1em; padding-left: 1.4em; }
.rl-body li { margin-bottom: .35em; }
.rl-body li::marker { color: var(--brass); font-weight: 700; }
.rl-body strong { color: var(--text); }
.rl-body-sm { font-size: .9rem; max-height: 520px; overflow-y: auto; padding-right: 6px; }
.rl-end { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; color: #6b7790; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.rl-end::before, .rl-end::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.rl-accept { display: grid; gap: 12px; justify-items: start; border-color: #f2b54466; background: linear-gradient(90deg, var(--brass-soft), transparent 55%), var(--panel); }
.rl-check { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 1rem; cursor: pointer; }
.rl-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--brass); cursor: pointer; }
.rl-check input:disabled, .rl-check input:disabled + span { cursor: not-allowed; opacity: .55; }
.rl-accept .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.rl-checks { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.rl-checks li { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; }
.rl-checks .pill { margin-top: 2px; min-width: 74px; justify-content: center; }
.rl-steps { margin: 0 0 12px; padding-left: 1.3em; display: grid; gap: 8px; font-size: .9rem; color: #d7dde8; }
.rl-steps li::marker { color: var(--brass); font-weight: 700; }
.rl-existing, .rl-mode { display: grid; gap: 8px; margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--ink); }
.rl-existing legend, .rl-mode legend { padding: 0 6px; color: var(--muted); font-size: .84rem; font-weight: 600; }
.rl-existing .check, .rl-mode .check { align-items: flex-start; color: var(--text); font-size: .88rem; }
.rl-existing input, .rl-mode input { margin-top: 3px; accent-color: var(--brass); }
.rl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 8px; }
.rl-dc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 4px; background: #4e5058; color: #fff; font-size: .85rem; font-weight: 500; }
.rl-open { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; }
.rl-open li { padding: 4px 0; }
.rl-open li.is-cat { grid-column: 1 / -1; margin-top: 8px; font-weight: 700; font-size: .82rem; letter-spacing: .04em; }
.rl-open .check { color: var(--text); align-items: center; }
.rl-open input { accent-color: var(--brass); }
.rl-editor { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .86rem; line-height: 1.55; min-height: 340px; resize: vertical; }
.rl-table-card { padding: 0; overflow: hidden; }
.rl-table-wrap { overflow-x: auto; }
.rl-table-card .table td, .rl-table-card .table th { white-space: nowrap; }
.rl-who { display: inline-flex; align-items: center; gap: 10px; }
.rl-who img { width: 28px; height: 28px; border-radius: 9px; }
.rl-who > span { display: flex; flex-direction: column; line-height: 1.25; }
.rl-version { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.rl-vnum { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--brass-soft); border: 1px solid #f2b54455; color: var(--brass); font-family: var(--font-display); font-weight: 800; }
@media (max-width: 720px) {
  .rl-done { flex-direction: column; }
  .rl-check { font-size: .95rem; }
  .rl-version { grid-template-columns: auto minmax(0, 1fr); }
  .rl-version .pill, .rl-version .adm-actions { grid-column: 2; justify-self: start; }
}

/* ==========================================================================
   Mascotte Kraftlab — petit assistant fixé en bas à droite (partials/mascot.ejs, mascot.js)
   Animations : flottement, clignement, halo au survol, ouverture du panneau.
   Toutes coupées par la règle « prefers-reduced-motion » générale plus haut.
   ========================================================================== */
.mascot {
  --m-size: 104px;
  --m-gap: max(18px, env(safe-area-inset-right));
  --m-glow: #f2b544;
  --m-glow-2: #f28c38;            /* orange des reflets */
  position: fixed; right: var(--m-gap); bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 22;                    /* sous la barre latérale mobile (30) et son voile (25) */
  width: var(--m-size);
  pointer-events: none;           /* seuls la mascotte, la bulle et le panneau captent les clics */
}
.mascot.is-mini { --m-size: 58px; }
.mascot > * { pointer-events: auto; }

/* Évite que la mascotte cache la fin des pages */
body:has(.mascot) .footer { padding-bottom: calc(28px + 90px); padding-right: 120px; padding-left: 120px; }
body:has(.mascot.is-mini) .footer { padding-bottom: calc(28px + 40px); }

.mascot-btn {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 50%; color: inherit; -webkit-tap-highlight-color: transparent;
}
.mascot-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
.mascot-figure {
  position: relative; display: block; width: 100%;
  filter: drop-shadow(0 0 10px #f2b54438) drop-shadow(0 6px 14px #000a);
  transition: filter .25s ease, transform .25s ease;
  animation: mascot-float 4.2s ease-in-out infinite;
  will-change: transform;
}
.mascot-figure img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.mascot-btn:hover .mascot-figure,
.mascot-btn:focus-visible .mascot-figure,
.mascot.is-open .mascot-figure {
  filter: drop-shadow(0 0 14px #f2b54480) drop-shadow(0 0 26px #f28c3833) drop-shadow(0 6px 14px #000a);
}
.mascot-btn:active .mascot-figure { transform: scale(.96); }
.mascot-btn.is-hop { animation: mascot-hop .5s cubic-bezier(.3,1.6,.5,1); }

/* Paupières : de petites formes couleur visage qui recouvrent les yeux le temps d'un clignement */
.mascot-lid {
  position: absolute; border-radius: 50%; background: #0a0502; box-shadow: 0 0 3px 2px #0a0502;
  transform: scaleY(0); transform-origin: 50% 0; transition: transform .07s ease-in;
}
.mascot-lid-l { left: 32.6%; top: 31.8%; width: 14.8%; height: 10.6%; }
.mascot-lid-r { left: 52%; top: 33.2%; width: 17.4%; height: 11.4%; }
.mascot-figure.is-blink .mascot-lid { transform: scaleY(1); }

@keyframes mascot-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes mascot-hop {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-10px) scale(1.04); }
  70% { transform: translateY(1px) scale(.98); }
  100% { transform: translateY(0) scale(1); }
}

/* --- Bulle d'accueil --- */
.mascot-bubble {
  position: absolute; right: calc(var(--m-size) * .62); bottom: calc(var(--m-size) * .9);
  width: 238px; padding: 12px 34px 12px 14px; border-radius: 14px 14px 4px 14px;
  background: linear-gradient(160deg, var(--panel-2), var(--ink));
  border: 1px solid #f2b54466; color: var(--text); font-size: .88rem; line-height: 1.45;
  box-shadow: 0 0 0 1px #0006, 0 0 22px -6px #f2b54466, 0 14px 30px -12px #000c;
  cursor: pointer; opacity: 0; transform: translateY(6px) scale(.96); transform-origin: 100% 100%;
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,.9,.3,1.2);
}
.mascot-bubble.is-shown { opacity: 1; transform: none; }
.mascot-bubble[hidden] { display: none; }
.mascot-bubble p { margin: 0; }
.mascot-bubble-x {
  position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 24px; height: 24px;
  border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer;
}
.mascot-bubble-x:hover { background: #ffffff12; color: var(--text); }
.mascot-bubble-x svg, .mascot-close svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* --- Panneau d'assistance --- */
.mascot-panel {
  position: absolute; right: 0; bottom: calc(var(--m-size) * 1.08 + 8px);
  width: min(360px, calc(100vw - 2 * var(--m-gap)));
  max-height: min(600px, calc(100vh - var(--m-size) - 60px)); max-height: min(600px, calc(100dvh - var(--m-size) - 60px));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--border);
  background:
    radial-gradient(120% 60% at 100% 0%, #f2b5441a, transparent 60%),
    linear-gradient(180deg, var(--panel), #111723);
  box-shadow: 0 0 0 1px #0007, 0 0 40px -14px #f2b54459, 0 24px 60px -18px #000;
  opacity: 0; transform: translateY(10px) scale(.95); transform-origin: 100% 100%;
  transition: opacity .18s ease, transform .24s cubic-bezier(.2,.9,.3,1.15);
}
.mascot-panel.is-shown { opacity: 1; transform: none; }
.mascot-panel[hidden] { display: none; }
.mascot-panel::before {               /* fin liseré lumineux en haut du panneau */
  content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--m-glow), var(--m-glow-2), transparent); opacity: .7;
}
.mascot-panel-head { display: flex; align-items: center; gap: 12px; padding: 16px 14px 12px 16px; border-bottom: 1px solid var(--line); }
.mascot-panel-head > div { flex: 1; min-width: 0; }
.mascot-panel-head h2 { margin: 0; font-size: 1.05rem; }
.mascot-panel-avatar {
  display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
  background: radial-gradient(circle at 50% 40%, #f2b5442e, var(--ink) 70%); border: 1px solid #f2b54440; overflow: hidden;
}
.mascot-panel-avatar { position: relative; }
.mascot-panel-avatar img { position: absolute; left: -16px; top: 0; width: 74px; max-width: none; height: auto; }   /* gros plan sur la tête */
.mascot-kicker { margin: 0 0 2px; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--brass); }
.mascot-close {
  display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--ink); color: var(--muted); cursor: pointer;
}
.mascot-close:hover { color: var(--text); border-color: #f2b54466; }
.mascot-panel-body { padding: 14px 16px 6px; overflow-y: auto; overscroll-behavior: contain; font-size: .9rem; }
.mascot-intro { margin: 0 0 14px; color: var(--muted); }
.mascot-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.mascot-tile {
  display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; color: var(--text);
  background: var(--ink); border: 1px solid var(--border); transition: border-color .2s, box-shadow .2s, transform .2s;
}
.mascot-tile:hover { text-decoration: none; border-color: #f2b54480; box-shadow: 0 0 18px -8px #f2b544aa; transform: translateY(-1px); }
.mascot-tile svg { color: var(--brass); margin-bottom: 4px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mascot-tile span { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.mascot-h3 { margin: 0 0 8px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-family: var(--font-text); }
.mascot-nav { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 2px; }
.mascot-nav a { display: flex; flex-direction: column; padding: 7px 10px; border-radius: 9px; color: var(--text); }
.mascot-nav a:hover { text-decoration: none; background: var(--panel-2); }
.mascot-nav span { color: var(--muted); font-size: .78rem; }
.mascot-tip { margin: 0 0 16px; color: var(--muted); font-size: .82rem; }
.mascot-login { margin: -6px 0 16px; }
.mascot-facts { margin: 0 0 12px; padding-left: 18px; color: var(--muted); font-size: .82rem; }
.mascot-facts li { margin-bottom: 5px; }
.mascot-facts li::marker { color: var(--brass); }
.mascot-panel-foot { display: flex; justify-content: space-between; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); background: #0d121bcc; }

/* --- Tablettes et téléphones --- */
@media (max-width: 960px) {
  .mascot { --m-size: 86px; }
  .mascot.is-mini { --m-size: 52px; }
}
@media (max-width: 720px) {
  .mascot { --m-size: 68px; --m-gap: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
  .mascot.is-mini { --m-size: 46px; }
  body:has(.mascot) .footer { padding-bottom: calc(22px + 64px); padding-right: 76px; padding-left: 76px; }
  .mascot-bubble { width: min(220px, calc(100vw - var(--m-size) - 40px)); font-size: .84rem; }
  .mascot-panel { bottom: calc(var(--m-size) * 1.08 + 6px); }
}
.menu-open .mascot { visibility: hidden; }   /* menu mobile ouvert : la mascotte s'efface */
@media print { .mascot { display: none; } }

/* Règlement : personnalisation du message d'instructions */
.rl-msg-edit { margin-top: 14px; }
.rl-msg-edit > summary { list-style: none; cursor: pointer; }
.rl-msg-edit > summary::-webkit-details-marker { display: none; }
.rl-msg-form { margin-top: 12px; }
.rl-msg-row { display: grid; grid-template-columns: 1fr 110px; gap: 12px; align-items: end; }
.rl-msg-row input[type="color"] { width: 100%; height: 40px; padding: 4px; cursor: pointer; }
.rl-prev-desc { white-space: pre-wrap; }
@media (max-width: 520px) { .rl-msg-row { grid-template-columns: 1fr; } }

/* Règlement : suppression des versions archivées */
.rl-archived-bar { margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
.rl-version .adm-actions { display: flex; gap: 8px; align-items: center; }
.rl-version .adm-pop, .rl-archived-bar .adm-pop { min-width: 280px; }

/* Projets : personnalisation du message d'annonce */
.pj-prev-toggle { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-prev-content { color: #dbdee1; white-space: pre-wrap; overflow-wrap: anywhere; }
.pj-prev-author { color: #f2f3f5; font-size: .82rem; font-weight: 600; overflow-wrap: anywhere; }
.pj-prev-fields { display: grid; gap: 6px; margin-top: 2px; }
.pj-prev-field { display: grid; gap: 1px; font-size: .84rem; }
.pj-prev-field b { color: #f2f3f5; font-size: .8rem; }
.pj-prev-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-prev-btns .dc-btn.is-closed { background: #4e5058; opacity: .7; }
.pj-msg-edit { margin-top: 12px; }
.pj-msg-edit > summary { list-style: none; cursor: pointer; }
.pj-msg-edit > summary::-webkit-details-marker { display: none; }
.pj-msg-form { margin-top: 12px; }
.pj-msg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pj-msg-grid input[type="color"] { width: 100%; height: 40px; padding: 4px; cursor: pointer; }
@media (max-width: 560px) { .pj-msg-grid { grid-template-columns: 1fr; } }

/* Projets : aperçu de l'annonce au format carte (Components V2 de Discord) */
.pjd-card { display: grid; gap: 10px; width: 100%; max-width: 460px; padding: 14px 16px; border-radius: 0 8px 8px 0; background: #2b2d31; border: 1px solid #3f4147; border-left: 4px solid #f2b544; }
.pjd-card-row { display: flex; gap: 12px; align-items: flex-start; }
.pjd-card-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.pjd-card-author { color: #f2f3f5; font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.pjd-card-meta, .pjd-card-foot { color: #949ba4; font-size: .78rem; }
.pjd-card-title { color: #f2f3f5; font-size: 1.15rem; font-weight: 700; overflow-wrap: anywhere; }
.pjd-card-desc { font-size: .88rem; overflow-wrap: anywhere; }
.pjd-card-thumb { width: 52px; height: 52px; flex-shrink: 0; border-radius: 8px; background: #1e1f22; display: grid; place-items: center; color: #f2f3f5; font-weight: 700; }
.pjd-card-avatar { width: 40px; height: 40px; border-radius: 50%; background: #5c3a2e; color: #f5c4b3; }
.pjd-card-lines { display: grid; gap: 3px; font-size: .86rem; }
.pjd-card-lines b { color: #f2f3f5; }
.pjd-card-sep { border: 0; border-top: 1px solid #4e5058; margin: 0; }
.pjd-card-banner { position: relative; display: grid; place-items: center; aspect-ratio: 460 / 215; border-radius: 6px; overflow: hidden; background: #085041; color: #e1f5ee; font-weight: 700; font-size: 1.2rem; }
.pjd-card-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pjd-card-banner img + span { display: none; }

/* Projets : bannières des jeux */
.pj-banners { margin-top: 18px; }
.pj-banner-list { display: grid; gap: 10px; margin-top: 12px; }
.pj-banner-row { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--line, rgba(255,255,255,.08)); border-radius: 12px; }
.pj-banner-img { aspect-ratio: 460 / 215; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.04); display: grid; place-items: center; color: var(--muted, #8a93a6); font-size: .78rem; }
.pj-banner-img img { width: 100%; height: 100%; object-fit: cover; }
.pj-banner-info { display: grid; gap: 6px; min-width: 0; }
.pj-banner-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pj-banner-actions label.btn { cursor: pointer; }
.pj-banner-url { display: flex; gap: 6px; flex: 1; min-width: 220px; }
.pj-banner-url input { flex: 1; min-width: 0; }
.pj-banner-msg:empty { display: none; }
@media (max-width: 640px) { .pj-banner-row { grid-template-columns: 1fr; } }

/* Vitrine : aperçu du règlement publié sur Discord */
.sc-prev-intro { white-space: pre-wrap; }
.sc-announce-form { margin-top: 18px; }

/* Projets : règlement publié sur Discord */
.pj-rules-discord { margin-top: 18px; }

/* Tickets : aperçu du panneau Discord */
.tp-btn-blue { background: #5865f2; }
.tp-prev-desc { white-space: pre-wrap; }

/* Tickets : suppression des tickets fermés */
.t-li-del { display: flex; gap: 8px; align-items: stretch; }
.t-li-del > .t-card { flex: 1; min-width: 0; }
.t-del { display: flex; }
.t-del-btn { width: 48px; display: grid; place-items: center; border-radius: 14px; border: 1px solid rgba(239,91,91,.35); background: rgba(239,91,91,.08); color: #ef5b5b; cursor: pointer; transition: background .15s, border-color .15s; }
.t-del-btn:hover, .t-del-btn:focus-visible { background: rgba(239,91,91,.18); border-color: rgba(239,91,91,.6); }
.t-del-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn svg { vertical-align: -3px; }

/* Partenariats : message « Devenir partenaire » personnalisable */
.pt-panel-note { padding-top: 12px; border-top: 1px dashed var(--line); }
.pt-message .announce-preview { align-self: start; }

/* Suggestions : message Discord personnalisable */
.sg-msg-form { margin-top: 18px; }
.sg-prev-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-size: .82rem; }
.sg-prev-fields > div { display: grid; gap: 2px; }
.sg-prev-fields b { color: #f2f3f5; }
.sg-btn-red { background: #da373c; }
@media (max-width: 560px) { .sg-prev-fields { grid-template-columns: 1fr; } }

/* Autorole : panneaux de rôles au choix */
.ar-help { margin: 0 0 14px; }
.ar-list { display: grid; gap: 12px; margin-bottom: 14px; }
.ar-panel { padding: 0; overflow: hidden; }
.ar-sum { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.ar-sum::-webkit-details-marker { display: none; }
.ar-sw { width: 12px; height: 34px; border-radius: 4px; flex-shrink: 0; }
.ar-sum-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ar-form, .ar-bottom { padding: 0 18px 16px; }
.ar-roles-head { display: flex; justify-content: space-between; align-items: baseline; }
.ar-roles { display: grid; gap: 6px; }
.ar-role { display: grid; grid-template-columns: minmax(0, 1.4fr) 76px minmax(0, 1.4fr) 54px; gap: 6px; align-items: center; }
.ar-role-head { font-size: .78rem; }
.ar-role-new select { opacity: .85; }
.ar-role.is-bad select { border-color: #ef5b5b; }
.ar-count { text-align: center; font-weight: 600; }
.ar-warn { grid-column: 1 / -1; color: #ef5b5b; font-size: .8rem; }
.ar-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; border-top: 1px dashed var(--line, rgba(255,255,255,.1)); padding-top: 14px; }
.ar-newrole { display: grid; gap: 6px; flex: 1; min-width: 280px; }
.ar-newrole-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ar-newrole-row input[name="name"], .ar-newrole-row input[name="description"] { flex: 1; min-width: 140px; }
.ar-newrole-row input[name="emoji"] { width: 70px; }
.ar-newrole-row input[type="color"] { width: 46px; height: 38px; padding: 3px; }
.ar-create { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 16px 18px; }
.ar-create label { flex: 1; min-width: 240px; display: grid; gap: 5px; }
@media (max-width: 640px) { .ar-role { grid-template-columns: 1fr 70px; } .ar-role input[name="role_desc"] { grid-column: 1 / -1; } .ar-count { display: none; } }

/* Menu « Équipe » : groupes repliables + pastilles */
.side-fold > summary { list-style: none; cursor: pointer; user-select: none; }
.side-fold > summary::-webkit-details-marker { display: none; }
.side-fold-sum { width: 100%; }
.side-fold-sum.is-current { color: var(--text, #f5f1e8); }
.side-chev { margin-left: auto; flex-shrink: 0; opacity: .6; transition: transform .2s ease; }
.side-fold[open] > summary .side-chev { transform: rotate(90deg); }
.side-fold-items { display: grid; gap: 2px; margin: 2px 0 6px 19px; padding-left: 8px; border-left: 1px solid var(--line, rgba(255,255,255,.1)); }
.side-fold-items .side-link { padding-top: 7px; padding-bottom: 7px; }
.side-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 700; background: #f2b544; color: #2a1c04; }
.side-fold-sum .side-badge { margin-left: auto; }
.side-fold-sum .side-badge + .side-chev { margin-left: 6px; }
.side-fold[open] > summary .side-badge { display: none; }
@media (prefers-reduced-motion: reduce) { .side-chev { transition: none; } }

/* Embeds : éditeur + aperçu Discord */
.em-editing { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: rgba(242,181,68,.1); border: 1px solid rgba(242,181,68,.35); }
.em-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 18px; }
.em-editor { display: grid; gap: 14px; min-width: 0; }
.em-preview-col { min-width: 0; align-self: stretch; }
.em-sticky { position: sticky; top: 16px; }
.em-prev-label { margin: 0 0 6px; }
.em-prev { min-height: 120px; }
.em-prev-content { color: #dbdee1; white-space: pre-wrap; overflow-wrap: anywhere; }
.em-prev-embed { position: relative; max-width: 100%; }
.em-prev-author { display: flex; align-items: center; gap: 8px; color: #f2f3f5; font-size: .82rem; font-weight: 600; }
.em-prev-author img, .em-prev-footer img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.em-prev-footer { display: flex; align-items: center; gap: 6px; }
.em-prev-footer img { width: 18px; height: 18px; }
.em-md { white-space: pre-wrap; }
.em-md a, .dc-embed-title a { color: #00a8fc; text-decoration: none; }
.em-md code { background: #1e1f22; padding: 1px 4px; border-radius: 4px; font-size: .85em; }
.em-prev-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.em-prev-field { grid-column: 1 / -1; display: grid; gap: 2px; font-size: .85rem; overflow-wrap: anywhere; }
.em-prev-field.is-inline { grid-column: auto; }
.em-prev-field b { color: #f2f3f5; }
.em-prev-field span { white-space: pre-wrap; }
.em-fields { display: grid; gap: 8px; }
.em-field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 140px; gap: 6px; align-items: start; }
.em-field textarea { min-height: 38px; resize: vertical; }
.em-buttons { display: grid; gap: 6px; }
.em-button { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 6px; }
.em-btn-bad { outline: 1px dashed #ef5b5b; }
.em-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.em-history { margin-bottom: 18px; }
.em-hist-row .adm-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 980px) { .em-layout { grid-template-columns: 1fr; } .em-sticky { position: static; } }
@media (max-width: 560px) { .em-field, .em-button { grid-template-columns: 1fr; } }

/* Niveaux : message de passage de niveau */
.lv-dest { display: grid; gap: 8px; }
.lv-channel { margin-left: 26px; display: grid; gap: 5px; }
.lv-mention { background: rgba(88,101,242,.3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; font-weight: 500; }
.lv-thumb { display: grid; place-items: center; font-size: 1.8rem; background: #1e1f22; }
.lv-steps { margin-top: 12px; padding: 12px 14px; display: grid; gap: 4px; }
.lv-steps > div { display: flex; justify-content: space-between; }

/* --- Classement mensuel ----------------------------------------------------- */
.lb-periods { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 14px; border-bottom: 1px solid var(--border); }
.lb-period { padding: 0 2px 9px; margin-bottom: -1px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; transition: color .18s, border-color .18s; }
.lb-period:hover { color: var(--text); text-decoration: none; }
.lb-period.active { color: var(--brass); border-bottom-color: var(--brass); }
.lb-countdown { display: inline-flex; align-items: center; gap: 8px; margin: -8px 0 14px; padding: 6px 12px; border-radius: 99px; background: var(--brass-soft); border: 1px solid #f2b54455; color: var(--text); font-size: .9rem; }
.lb-countdown svg { fill: none; stroke: var(--brass); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lb-countdown strong { color: var(--brass); }
.lb-note { margin: -6px 0 14px; max-width: 60ch; }
.lb-note .tag { margin: 0 6px 0 0; }
.me-kicker a { color: inherit; }

.lbh-best { margin-bottom: 18px; }
.lbh-best-list { display: flex; flex-wrap: wrap; gap: 8px; }
.lbh-best-item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); font-size: .9rem; }
.lbh-best-item:hover { border-color: var(--brass); text-decoration: none; }
.lbh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.lbh-card { display: flex; flex-direction: column; gap: 14px; color: var(--text); transition: border-color .18s, transform .18s; min-width: 0; }
.lbh-card:hover { border-color: var(--brass); transform: translateY(-2px); text-decoration: none; }
.lbh-card.is-me { border-color: #f2b54488; }
.lbh-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lbh-card-head strong { font-size: 1.1rem; }
.lbh-card-head .tag { margin: 0; }
.lbh-winner { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--brass-soft); border: 1px solid #f2b54444; min-width: 0; }
.lbh-winner img { border-radius: 50%; border: 2px solid var(--brass); flex: none; }
.lbh-winner > div { display: flex; flex-direction: column; min-width: 0; }
.lbh-winner strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbh-crown { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brass); }
.lbh-podium { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lbh-podium li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lbh-podium img { border-radius: 50%; flex: none; }
.lbh-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbh-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.lbh-more { color: var(--brass); font-weight: 600; font-size: .85rem; }
.mlb-hint { margin-top: 4px; }

/* --- Couleur de pseudo (Mon espace) ------------------------------------------ */
.nc-card { grid-column: 1 / -1; }
.nc-label { margin: 0 0 8px; }
.nc-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.nc-sw { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--c); border: 2px solid transparent; box-shadow: inset 0 0 0 1px #0004; cursor: pointer; transition: transform .15s, border-color .15s; }
.nc-sw:hover { transform: scale(1.08); }
.nc-sw .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nc-admin-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.nc-admin-swatches span { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 3px; border-radius: 99px; border: 1px solid var(--line); font-size: .8rem; }
.nc-admin-swatches i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); }
.nc-sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.nc-sw:has(input:checked) { border-color: var(--text); box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px var(--c); }
.nc-sw:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 4px; }
.nc-swatches-off .nc-sw { width: 26px; height: 26px; cursor: default; opacity: .35; }
.nc-swatches-off .nc-sw:hover { transform: none; }
.nc-locked { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border-radius: 12px; background: var(--panel-2); border: 1px dashed var(--line); }
.nc-locked > div, .nc-custom > div { display: flex; flex-direction: column; }
.nc-locked svg, .nc-custom svg { flex: none; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nc-custom { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 16px; border-radius: 12px; border: 1px solid var(--line); }
.nc-custom.is-locked { border-style: dashed; }
.nc-custom .check { margin: 0; }
.nc-custom input[type="color"] { width: 46px; height: 32px; padding: 2px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; }
.nc-preview { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin-bottom: 16px; border-radius: 10px; background: #313338; }
.nc-preview img { border-radius: 50%; flex: none; }
.nc-preview strong { font-size: 1rem; }
.nc-preview p { margin: 2px 0 0; color: #dbdee1; }
.nc-time { font-size: .75rem; color: #949ba4; }
.nc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* --- Maintenance et messages programmés --------------------------------------- */
.mt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 18px; align-items: start; }
.mt-grid > .card { min-width: 0; }
.mt-backups, .mt-events { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 2px; }
.mt-backups li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.mt-backups li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mt-backups svg { flex: none; fill: none; stroke: var(--brass); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mt-help { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.mt-help summary { cursor: pointer; font-weight: 600; }
.mt-help ol { margin: 10px 0 6px; padding-left: 20px; display: grid; gap: 6px; }
.mt-sub { margin: 22px 0 10px; font-size: 1rem; }
.mt-events li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 0; }
.mt-dot { width: 9px; height: 9px; border-radius: 50%; background: #3fbf7f; flex: none; }
.mt-dot.is-bad { background: #f23f43; }
.es-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.es-grid label[hidden] { display: none; }
.es-error { color: #f0a35e; }

/* --- Croissance du serveur ----------------------------------------------------- */
.inv-tabs { margin: 0 0 18px; }
.gr-head { margin-bottom: 14px; }
.gr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 18px; }
.gr-kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; }
.gr-kpi > span { color: var(--muted); font-size: .85rem; }
.gr-kpi strong { font-size: 1.7rem; line-height: 1.1; }
.gr-kpi small { font-size: .78rem; }
.gr-up { color: #3fbf7f; }
.gr-down { color: #f0735e; }
.gr-legend { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); }
.gr-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 8px; }
.gr-in { background: #3fbf7f; }
.gr-out { background: #e5734f; }
.gr-chart { display: flex; align-items: stretch; gap: 6px; height: 190px; margin: 6px 0 12px; }
.gr-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gr-bars { flex: 1; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--line); }
.gr-bars span { flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; transition: opacity .15s; }
.gr-col:hover .gr-bars span { opacity: .75; }
.gr-col em { font-style: normal; font-size: .7rem; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; }
.gr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px; margin: 18px 0; }
.gr-grid > .card { min-width: 0; }
.gr-sources { display: grid; gap: 12px; }
.gr-src-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; font-size: .9rem; }
.gr-src-head span:last-child { white-space: nowrap; }
.gr-rec { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.gr-rec li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.gr-rec img { border-radius: 50%; }
.gr-rec a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.gr-table-wrap { overflow-x: auto; }
.gr-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.gr-table th { text-align: left; font-weight: 500; color: var(--muted); font-size: .8rem; padding: 6px 8px; }
.gr-table td { padding: 9px 8px; border-top: 1px solid var(--line); }
.gr-ret { display: flex; align-items: center; gap: 8px; min-width: 140px; }
.gr-ret .progress { flex: 1; }
.progress.gr-bad > span { background: #e5734f; }
.gr-label-form { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.gr-label-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.gr-label-row input { flex: 1 1 180px; }

/* --- Rappel de bump -------------------------------------------------------------- */
#bump { margin-top: 18px; }
.bp-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 12px; }
.bp-status > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.bp-form { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.gr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Cartes de partenaires (/partenariat) -------------------------------------------- */
.pc-pending { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.pc-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); min-width: 0; }
.pc-card .who { display: flex; align-items: center; gap: 10px; }
.pc-card .who img { border-radius: 50%; }
.pc-card .who div { display: flex; flex-direction: column; }
.pc-embed { border-left-color: #f2b544; }
.pc-embed .dc-embed-desc { white-space: pre-line; }
.pc-embed .dc-embed-image { max-width: 100%; border-radius: 6px; margin-top: 8px; }
.pc-links { overflow-wrap: anywhere; margin: 0; }

/* --- Compteurs en direct ------------------------------------------------------------ */
#compteurs { margin-top: 18px; }
.ct-list { display: grid; gap: 10px; }
.ct-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 12px; }
.ct-row .switch { margin: 0; }
.ct-prev { padding: 6px 10px; border-radius: 6px; background: #2b2d31; color: #dbdee1; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-goal { max-width: 220px; }
@media (max-width: 720px) { .ct-row { grid-template-columns: minmax(0, 1fr); } }