/* =========================================================
   Tableau de bord — thème sombre par défaut, clair en option
   ========================================================= */
:root {
  --bg: #0b0d12;
  --bg-glow: rgba(109, 93, 252, 0.16);
  --surface: #12151c;
  --surface-2: #181c26;
  --surface-3: #202533;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #e8eaf0;
  --muted: #8b92a5;
  --accent: #6d5dfc;
  --accent-2: #22d3ee;
  --accent-soft: rgba(109, 93, 252, 0.16);
  --accent-text: #ffffff;
  --success: #22c55e;
  --success-soft: rgba(34, 197, 94, 0.14);
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.14);
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.14);
  --log-bg: #07080c;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
  --radius: 16px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f4f5fa; --bg-glow: rgba(109, 93, 252, 0.10); --surface: #ffffff; --surface-2: #f6f7fb; --surface-3: #eceef5;
    --border: rgba(15, 20, 40, 0.08); --border-strong: rgba(15, 20, 40, 0.16); --text: #161925; --muted: #646b80;
    --accent-soft: rgba(109, 93, 252, 0.10); --log-bg: #0f1117; --shadow: 0 1px 2px rgba(15, 20, 40, 0.05), 0 8px 24px rgba(15, 20, 40, 0.06);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f4f5fa; --bg-glow: rgba(109, 93, 252, 0.10); --surface: #ffffff; --surface-2: #f6f7fb; --surface-3: #eceef5;
  --border: rgba(15, 20, 40, 0.08); --border-strong: rgba(15, 20, 40, 0.16); --text: #161925; --muted: #646b80;
  --accent-soft: rgba(109, 93, 252, 0.10); --log-bg: #0f1117; --shadow: 0 1px 2px rgba(15, 20, 40, 0.05), 0 8px 24px rgba(15, 20, 40, 0.06);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(900px 500px at 85% -10%, var(--bg-glow), transparent 60%),
    radial-gradient(700px 400px at -10% 110%, rgba(34, 211, 238, 0.07), transparent 60%),
    var(--bg);
  color: var(--text);
  font: 15px/1.5 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: 26px; font-weight: 750; }
h2 { font-size: 15px; font-weight: 650; }
h3 { font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 10px; }
p { margin: 0; }
.muted { color: var(--muted); font-size: 13px; }
.mt { margin-top: 22px; }
.mt-s { margin-top: 12px; }
.grow { flex: 1; min-width: 0; }
code { font: 12.5px ui-monospace, "Cascadia Code", Consolas, monospace; background: var(--surface-3); border-radius: 6px; padding: 2px 6px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon.big { width: 40px; height: 40px; stroke-width: 1.5; }

/* =================== Structure =================== */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 14px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(14px);
  border-right: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px; }
.avatar-wrap { position: relative; flex-shrink: 0; }
.avatar { display: block; width: 42px; height: 42px; border-radius: 50%; background: var(--surface-3); object-fit: cover; }
.presence { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; background: var(--muted); border: 3px solid var(--surface); }
.presence.on { background: var(--success); }
.presence.off { background: var(--danger); }
.brand-text { min-width: 0; }
.name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta { color: var(--muted); font-size: 12.5px; }

.nav { display: flex; flex-direction: column; gap: 4px; }
.nav button, .side-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), transform 0.12s var(--ease);
}
.nav button:hover, .side-btn:hover { background: var(--surface-2); color: var(--text); }
.nav button:active, .side-btn:active { transform: scale(0.98); }
.nav button.active { background: var(--accent-soft); color: var(--text); }
.nav button.active .icon { color: var(--accent); }
.nav button.active::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(var(--accent), var(--accent-2));
}
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.uptime { padding: 10px 12px; margin-bottom: 6px; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: 12.5px; }
.uptime strong { color: var(--text); }
.side-btn { font-size: 13.5px; }

.main { min-width: 0; padding: 26px 32px 48px; max-width: 1240px; width: 100%; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-title p { margin-top: 4px; }
.head-actions { display: flex; align-items: center; gap: 8px; }
.head-actions select { width: auto; max-width: 220px; }
.mobile-only { display: none !important; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background 0.18s var(--ease), transform 0.12s var(--ease), border-color 0.18s;
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.icon-btn:active { transform: scale(0.94); }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.span-2 { grid-column: span 2; }

/* Apparition fluide des onglets et des cartes */
/* Changement d'onglet : apparition courte et légère (moins d'un quart de seconde en tout) */
.tab-panel.enter > .card { animation: rise 0.24s var(--ease) both; }
.tab-panel.enter > .card:nth-child(2) { animation-delay: 0.02s; }
.tab-panel.enter > .card:nth-child(3) { animation-delay: 0.04s; }
.tab-panel.enter > .card:nth-child(n+4) { animation-delay: 0.06s; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
#page-title, #page-sub { animation: fade 0.3s var(--ease); }

/* =================== Cartes =================== */
.card {
  min-width: 0;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color 0.2s var(--ease);
}
.card:hover { border-color: var(--border-strong); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; min-height: 26px; }
.card.hero { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface) 60%); }
.link { border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.link:hover { background: var(--accent-soft); }
.stack { display: flex; flex-direction: column; gap: 14px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.banner { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; font-size: 14px; }
.banner.warning, .warning { background: var(--warning-soft); color: var(--text); border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent); }
.warning { padding: 10px 12px; border-radius: 10px; font-size: 13.5px; }
.warning .icon, .banner .icon { color: var(--warning); }

/* =================== Tuiles de chiffres =================== */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.tiles.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 84px;
  padding: 14px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: transform 0.18s var(--ease), border-color 0.18s;
}
.tile:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.tile .tile-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; margin-bottom: 6px; background: var(--accent-soft); color: var(--accent); }
.tile .tile-icon .icon { width: 16px; height: 16px; }
.tile strong { font-size: 24px; font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.tile span.label { color: var(--muted); font-size: 12.5px; }
.tile.green .tile-icon { background: var(--success-soft); color: var(--success); }
.tile.red .tile-icon { background: var(--danger-soft); color: var(--danger); }
.tile.orange .tile-icon { background: var(--warning-soft); color: var(--warning); }
.tile.cyan .tile-icon { background: rgba(34, 211, 238, 0.14); color: var(--accent-2); }
.tile.alert { border-color: color-mix(in srgb, var(--warning) 45%, transparent); }

/* =================== Chargement =================== */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface-2) !important;
  border-color: transparent !important;
  list-style: none;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 6%, transparent), transparent);
  animation: shimmer 1.3s infinite;
}
.line.skeleton { height: 40px; border-radius: 10px; margin-bottom: 8px; padding: 0 !important; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* =================== Listes =================== */
.feed, .podium, .feeds, .results, .warn-list { list-style: none; margin: 0; padding: 0; }
.feed li, .warn-list li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.feed li:last-child, .warn-list li:last-child { border-bottom: 0; }
.feed .dot-icon { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: var(--warning-soft); color: var(--warning); }
.feed .dot-icon .icon { width: 15px; height: 15px; }
.feed strong { font-weight: 650; }
.podium li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; transition: background 0.15s; }
.podium li:hover { background: var(--surface-2); }
.podium .rank {
  display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
  background: var(--surface-3); font-weight: 750; font-size: 13px;
}
.podium li:nth-child(1) .rank { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #3b2500; }
.podium li:nth-child(2) .rank { background: linear-gradient(135deg, #e5e7eb, #9ca3af); color: #1f2937; }
.podium li:nth-child(3) .rank { background: linear-gradient(135deg, #fdba74, #c2410c); color: #2a1004; }
.podium .lvl { margin-left: auto; text-align: right; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.podium .lvl b { display: block; color: var(--text); font-size: 14px; }
.empty-line { color: var(--muted); font-size: 13.5px; padding: 8px 0; }

.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.check-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-weight: 600; font-size: 13.5px; }
.check-item .state { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.check-item .state .icon { width: 13px; height: 13px; stroke-width: 3; }
.check-item.on .state { background: var(--success-soft); color: var(--success); }
.check-item.off .state { background: var(--danger-soft); color: var(--danger); }

.feeds li { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 8px; border-radius: 12px; background: var(--surface-2); }
.platform { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; font-size: 18px; }
.platform.youtube { background: rgba(255, 0, 0, 0.14); }
.platform.twitch { background: rgba(145, 70, 255, 0.18); }
.platform.tiktok, .platform.rss { background: var(--surface-3); }

.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-3); color: var(--text); white-space: nowrap; }
.tag .swatch { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.tag.live { background: var(--danger); color: #fff; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: 0.6; } }
.badge { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; background: var(--surface-3); color: var(--muted); }
.badge.ok { background: var(--success-soft); color: var(--success); }
.badge.bad { background: var(--danger-soft); color: var(--danger); }
.roles { display: flex; flex-wrap: wrap; gap: 6px; }

/* =================== Formulaires =================== */
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
label .hint { font-weight: 400; }
label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; color: var(--text); cursor: pointer; }
input, select, textarea {
  width: 100%;
  font: inherit;
  font-size: 14.5px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s;
}
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); background: var(--surface); }
input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); }
textarea { resize: vertical; line-height: 1.55; }
select { cursor: pointer; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 650;
  font-size: 14px;
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
  color: var(--accent-text);
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--accent-2)));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent);
  white-space: nowrap;
  transition: transform 0.12s var(--ease), filter 0.18s, box-shadow 0.18s, opacity 0.18s;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.55; cursor: progress; }
.btn .icon { width: 16px; height: 16px; }
.btn.ghost { background: var(--surface-2); color: var(--text); box-shadow: none; border: 1px solid var(--border); }
.btn.ghost:hover { border-color: var(--border-strong); filter: none; background: var(--surface-3); }
.btn.danger { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25); }
.btn.success { background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 4px 14px rgba(34, 197, 94, 0.25); }
.btn.warn { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25); }
.btn.small { padding: 6px 10px; font-size: 12.5px; border-radius: 8px; }
.btn.icon-only { padding: 10px 12px; }
.btn.loading { position: relative; color: transparent !important; }
.btn.loading::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; animation: spin 0.7s linear infinite;
}
.btn.ghost.loading::after { border-color: var(--border-strong); border-top-color: var(--text); }
@keyframes spin { to { transform: rotate(360deg); } }

.search { position: relative; display: block; }
.search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search input { padding-left: 40px; }

/* =================== Interrupteurs =================== */
.toggles { display: flex; flex-direction: column; }
.switch {
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 8px;
  margin: 0 -8px;
  border-radius: 10px;
  font-weight: 550;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.switch:hover { background: var(--surface-2); }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch i { position: relative; flex-shrink: 0; width: 42px; height: 24px; border-radius: 12px; background: var(--surface-3); transition: background 0.22s var(--ease); }
.switch i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.25s var(--ease);
}
.switch input:checked + i { background: linear-gradient(135deg, var(--success), #16a34a); }
.switch input:checked + i::after { transform: translateX(18px); }
.switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch input:disabled + i { opacity: 0.5; }
.switch.locked { cursor: not-allowed; }

/* =================== Sécurité =================== */
.sec-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.sec-icon { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }

/* =================== Membres =================== */
.results { margin-top: 10px; max-height: 460px; overflow-y: auto; }
.member-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; margin-bottom: 2px;
  border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--text);
  font: inherit; text-align: left; cursor: pointer; transition: background 0.15s, border-color 0.15s;
  animation: rise 0.3s var(--ease) both;
}
.member-row:hover { background: var(--surface-2); }
.member-row.selected { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.member-row .who { display: flex; flex-direction: column; min-width: 0; }
.member-row .who strong, .member-row .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar.small { width: 36px; height: 36px; }
.avatar.big { width: 76px; height: 76px; border: 4px solid var(--surface); }

.member-card { padding: 0; overflow: hidden; }
@media (min-width: 981px) {
  [data-panel="moderation"] { grid-template-rows: auto auto 1fr; }
  [data-panel="moderation"] > .card { grid-column: 1; }
  /* Pas de « position: sticky » ici : en défilant, la fiche (devenue longue avec les notes) glissait par-dessus
     l'historique des sanctions placé en dessous */
  [data-panel="moderation"] > .member-card { grid-column: 2; grid-row: 1 / span 3; }
}
.member-card .empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 24px; color: var(--muted); text-align: center; }
.member-card.loaded { animation: rise 0.35s var(--ease); }
.member-banner { height: 76px; background: linear-gradient(120deg, var(--accent), var(--accent-2)); }
.member-body { padding: 0 20px 20px; }
.member-head { display: flex; align-items: flex-end; gap: 14px; margin-top: -38px; }
.member-head .who { padding-bottom: 6px; min-width: 0; }
.member-head h2 { font-size: 19px; overflow-wrap: anywhere; }
.member-body .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.member-body .tile { min-height: 0; padding: 10px 12px; }
.member-body .tile strong { font-size: 19px; }
.actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mute-row { display: flex; gap: 8px; }
.mute-row select { width: auto; flex: 1; }
.warn-list li { align-items: center; }

/* =================== Graphiques d'activité =================== */
/* Couleurs validées (lisibles par les daltoniens, contraste ≥ 3:1) : thème sombre ici, thème clair dessous */
:root { --series-messages: #8b7bff; --series-joins: #0ea5c6; --series-leaves: #e64a93; --grid: rgba(255, 255, 255, 0.06); }
:root[data-theme="light"] { --series-messages: #6d5dfc; --series-joins: #0891b2; --series-leaves: #db2777; --grid: rgba(15, 20, 40, 0.07); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --series-messages: #6d5dfc; --series-joins: #0891b2; --series-leaves: #db2777; --grid: rgba(15, 20, 40, 0.07); }
}
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .charts { grid-template-columns: 1fr; } }
.chart { margin: 0; min-width: 0; }
.chart figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.legend { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--text); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 2px; }
.sw.messages { background: var(--series-messages); }
.sw.joins { background: var(--series-joins); }
.sw.leaves { background: var(--series-leaves); margin-left: 6px; }
.chart-body { position: relative; }
.chart-body .line.skeleton { height: 150px; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-svg .grid { stroke: var(--grid); stroke-width: 1; }
.chart-svg .axis { stroke: var(--border-strong); stroke-width: 1; }
.chart-svg .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-svg .bar { transition: opacity 0.15s; }
.chart-svg .bar.messages { fill: var(--series-messages); }
.chart-svg .bar.joins { fill: var(--series-joins); }
.chart-svg .bar.leaves { fill: var(--series-leaves); }
.chart-svg .hit { fill: transparent; cursor: crosshair; }
.chart-svg .hit.on { fill: color-mix(in srgb, var(--text) 6%, transparent); }
.chart-tip {
  position: absolute; top: 6px; transform: translateX(-50%); z-index: 3; pointer-events: none; white-space: nowrap;
  padding: 8px 10px; border-radius: 10px; font-size: 12.5px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.chart-tip strong { display: block; margin-bottom: 3px; text-transform: capitalize; }
.chart-tip div { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.chart-tip b { color: var(--text); }

/* =================== Communauté =================== */
.matches { list-style: none; margin: 0; padding: 0; }
.matches li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.matches li:last-child { border-bottom: 0; }
.matches .count { display: flex; flex-direction: column; align-items: center; min-width: 52px; font-size: 11px; color: var(--muted); line-height: 1.15; }
.matches .count b { font-size: 16px; color: var(--text); }
.checks-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.checks-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 80%, transparent); font-size: 14px; }
.checks-list .state { display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; margin-top: 1px; }
.checks-list .state .icon { width: 13px; height: 13px; stroke-width: 3; }
.checks-list .on .state { background: var(--success-soft); color: var(--success); }
.checks-list .off .state { background: var(--danger-soft); color: var(--danger); }
.dot-icon.away { background: rgba(34, 211, 238, 0.14); font-size: 15px; }
@media (max-width: 760px) { .nav button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9.5px; } }

/* =================== Messages programmés =================== */
.form-foot.end { justify-content: flex-end; }
.scheduled { list-style: none; margin: 0; padding: 0; }
.scheduled li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.scheduled li:last-child { border-bottom: 0; }
.sched-when { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 74px; padding: 8px 6px;
  border-radius: 12px; background: var(--accent-soft); color: var(--muted); font-size: 12.5px; text-align: center; line-height: 1.25; }
.sched-when strong { color: var(--text); font-size: 13px; text-transform: capitalize; }
.scheduled .tag { margin-left: 6px; }
.sched-preview { margin: 3px 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
input[type="datetime-local"] { color-scheme: inherit; }

/* =================== Aperçu façon Discord =================== */
.dc-preview { padding: 14px; border-radius: 12px; background: #313338; color: #dbdee1; font-size: 15px; }
:root[data-theme="light"] .dc-preview { background: #ffffff; color: #313338; border: 1px solid var(--border); }
.dc-msg { display: flex; gap: 14px; }
.dc-msg.dc-empty .dc-line, .dc-msg.dc-empty .dc-embed-desc { opacity: 0.5; font-style: italic; }
.dc-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: var(--surface-3); }
.dc-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.dc-head strong { font-weight: 600; }
.dc-bot { padding: 1px 5px; border-radius: 4px; background: #5865f2; color: #fff; font-size: 10px; font-weight: 700; }
.dc-time { color: #949ba4; font-size: 12px; }
.dc-line, .dc-li, .dc-sub, .dc-quote { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.375; }
.dc-h { margin: 6px 0 2px; font-weight: 700; line-height: 1.25; }
h3.dc-h { font-size: 22px; text-transform: none; letter-spacing: 0; color: inherit; } h4.dc-h { font-size: 19px; } h5.dc-h { font-size: 16px; }
.dc-sub { font-size: 12px; color: #949ba4; }
.dc-quote { border-left: 4px solid #4e5058; padding-left: 10px; }
.dc-mention { padding: 0 2px; border-radius: 3px; background: rgba(88, 101, 242, 0.3); color: #c9cdfb; font-weight: 500; }
:root[data-theme="light"] .dc-mention { color: #505cdc; background: rgba(88, 101, 242, 0.15); }
.dc-spoiler { background: #1e1f22; color: transparent; border-radius: 3px; }
.dc-spoiler:hover { color: inherit; }
.dc-preview code, .tmsg code { padding: 1px 4px; border-radius: 4px; background: rgba(0, 0, 0, 0.3); font-size: 13px; }
.dc-embed { margin-top: 6px; max-width: 520px; padding: 10px 14px; border-radius: 4px; border-left: 4px solid #5865f2; background: #2b2d31; }
:root[data-theme="light"] .dc-embed { background: #f2f3f5; }
.dc-embed-title { font-weight: 700; margin-bottom: 4px; }
.dc-embed-author { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.dc-embed-desc { font-size: 14px; }

/* =================== Tickets =================== */
@media (min-width: 981px) {
  .tickets-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); }
  .tickets-grid > .ticket-view { position: sticky; top: 20px; }
}
.ticket-list { list-style: none; margin: 0; padding: 0; max-height: 640px; overflow-y: auto; }
.ticket-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; margin-bottom: 4px; border: 1px solid transparent;
  border-radius: 12px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background 0.15s; }
.ticket-row:hover { background: var(--surface-2); }
.ticket-row.selected { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.ticket-row .who { display: flex; flex-direction: column; min-width: 0; }
.ticket-row .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.tag.new { background: var(--warning-soft); color: var(--warning); }
.ticket-view { display: flex; flex-direction: column; min-height: 420px; }
.ticket-view .empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--muted); text-align: center; }
.ticket-head { align-items: flex-start; flex-wrap: wrap; }
.ticket-messages { flex: 1; display: flex; flex-direction: column; gap: 14px; max-height: 520px; overflow-y: auto; padding: 14px;
  border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 80%, transparent); font-size: 14px; }
.tmsg { display: flex; gap: 10px; }
.tmsg.staff .grow > .dc-line { color: var(--text); }
.tag.role-staff { background: var(--accent-soft); color: var(--accent); }
.tag.role-user { background: rgba(34, 211, 238, 0.14); color: var(--accent-2); }
.tag.role-bot { background: #5865f2; color: #fff; }
.tmsg-img { display: block; max-width: 260px; max-height: 220px; margin-top: 6px; border-radius: 8px; }
.ticket-reply { display: flex; gap: 8px; margin-top: 12px; align-items: flex-end; }
.ticket-reply textarea { min-height: 52px; }

/* Petite pastille sur l'onglet (nombre de tickets ouverts) */
.nav button { position: relative; }
.nav-badge { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 800; text-align: center; }
@media (max-width: 760px) {
  .nav { overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav button { flex: 1 0 auto; width: auto; min-width: 62px; }
  .nav-badge { position: absolute; top: 2px; right: 8px; margin: 0; min-width: 16px; padding: 0 4px; font-size: 10px; }
}

/* =================== Historique des sanctions =================== */
@media (min-width: 981px) { [data-panel="moderation"] > :is(.history-card, #safety-card) { grid-column: 1 / -1; grid-row: auto; } }
.history-filters { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; margin-bottom: 12px; }
.history-filters select { width: auto; }
@media (max-width: 760px) { .history-filters { grid-template-columns: 1fr; } .history-filters select { width: 100%; } }
.history-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: start; }
@media (max-width: 980px) { .history-layout { grid-template-columns: 1fr; } }
.history, .by-mod-list, .backups { list-style: none; margin: 0; padding: 0; }
.history { max-height: 560px; overflow-y: auto; }
.history li, .backups li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.history li:last-child, .backups li:last-child { border-bottom: 0; }
.h-icon { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: var(--surface-2); font-size: 16px; }
.h-ban .h-icon, .h-kick .h-icon { background: var(--danger-soft); }
.h-warn .h-icon { background: var(--warning-soft); }
.h-mute .h-icon { background: var(--accent-soft); }
.h-unban .h-icon, .h-unmute .h-icon { background: var(--success-soft); }
.h-reason { margin: 2px 0; overflow-wrap: anywhere; }
.by-mod { padding: 14px; border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 80%, transparent); }
.by-mod-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.by-mod-list li:last-child { border-bottom: 0; }
.by-mod-total { min-width: 32px; padding: 3px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 800; text-align: center; }
.b-missing { color: var(--warning); font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.night-strict { align-self: end; padding-bottom: 10px; }
#night-form .switch { margin: 0; }

/* =================== Demandes =================== */
.requests { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.requests > li { padding: 14px; border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 80%, transparent); display: flex; flex-direction: column; gap: 10px; }
.requests > li.decided { opacity: 0.6; }
.req-head { display: flex; align-items: center; gap: 10px; }
.requests details summary { cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 600; }
.answers { margin: 10px 0 0; display: grid; gap: 4px; font-size: 13.5px; }
.answers dt { color: var(--muted); font-weight: 600; margin-top: 6px; }
.answers dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sug-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.votes { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.votes a { margin-left: auto; font-size: 12.5px; }
.vote-bar { flex: 1; max-width: 160px; height: 7px; border-radius: 99px; background: var(--danger-soft); overflow: hidden; }
.vote-bar i { display: block; height: 100%; background: var(--success); border-radius: inherit; }

/* =================== Accès selon le rôle =================== */
body[data-level="mod"] .admin-only { display: none !important; }
body:not([data-level="owner"]) .owner-only { display: none !important; }
body[data-level="owner"] .not-owner { display: none; }
.me { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 4px; border-radius: 10px; background: var(--accent-soft); }
.me .name { font-size: 13.5px; }
.dot-icon.who { background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 13px; }
.feed.actions { max-height: 360px; overflow-y: auto; }

/* =================== Animations (motion design) =================== */
/* Toutes coupées automatiquement si l'appareil demande moins d'animations (règle prefers-reduced-motion plus haut). */
:root { --spring: cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Menu : une seule pastille qui glisse jusqu'à l'onglet choisi */
.nav { position: relative; }
.nav button { z-index: 1; }
.nav-indicator {
  position: absolute; left: 0; right: 0; top: 0; height: 40px; z-index: 0; border-radius: 10px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 6%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}
.nav-indicator::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(var(--accent), var(--accent-2)); }
.nav-indicator.ready { transition: transform 0.38s var(--spring), height 0.25s var(--ease), opacity 0.2s; }
@media (min-width: 761px) {
  .nav .nav-indicator ~ button.active { background: transparent; box-shadow: none; }  /* la pastille glissante remplace le fond */
  .nav .nav-indicator ~ button.active::before { display: none; }
}
@media (max-width: 760px) { .nav-indicator { display: none; } }

/* Icône de l'onglet : petit rebond au changement */
.page-icon.pop { animation: pop-icon 0.5s var(--spring); }
@keyframes pop-icon { 0% { transform: scale(0.7) rotate(-12deg); } 60% { transform: scale(1.08) rotate(3deg); } 100% { transform: none; } }

/* Entrée en cascade des tuiles et des listes quand on ouvre un onglet */
.tab-panel.enter .tile, .tab-panel.enter .feed > li, .tab-panel.enter .podium > li, .tab-panel.enter .history > li,
.tab-panel.enter .matches > li, .tab-panel.enter .changelog > li, .tab-panel.enter .checks > *, .tab-panel.enter .requests > li,
.tab-panel.enter .scheduled > li, .tab-panel.enter .ticket-list > li {
  /* « backwards » et pas « both » : une fois fini, l'animation ne bloque pas l'effet de survol */
  animation: rise 0.42s var(--ease) backwards; animation-delay: calc(0.05s + var(--n, 0) * 0.035s);
}
:is(.tiles, .feed, .podium, .history, .matches, .changelog, .checks, .requests, .scheduled, .ticket-list) > :nth-child(2) { --n: 1; }
:is(.tiles, .feed, .podium, .history, .matches, .changelog, .checks, .requests, .scheduled, .ticket-list) > :nth-child(3) { --n: 2; }
:is(.tiles, .feed, .podium, .history, .matches, .changelog, .checks, .requests, .scheduled, .ticket-list) > :nth-child(4) { --n: 3; }
:is(.tiles, .feed, .podium, .history, .matches, .changelog, .checks, .requests, .scheduled, .ticket-list) > :nth-child(5) { --n: 4; }
:is(.tiles, .feed, .podium, .history, .matches, .changelog, .checks, .requests, .scheduled, .ticket-list) > :nth-child(6) { --n: 5; }
:is(.tiles, .feed, .podium, .history, .matches, .changelog, .checks, .requests, .scheduled, .ticket-list) > :nth-child(n+7) { --n: 6; }

/* Graphiques : les barres poussent depuis la ligne de base, l'une après l'autre */
.chart-svg.intro .bar { transform-box: fill-box; transform-origin: 50% 100%; animation: bar-grow 0.7s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 18ms); }
.chart-svg.intro .bar.down { transform-origin: 50% 0%; }
@keyframes bar-grow { from { transform: scaleY(0); opacity: 0.3; } to { transform: none; opacity: 1; } }

/* Cartes : reflet lumineux qui suit la souris + légère élévation */
@media (hover: hover) {
  .card::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s var(--ease);
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--accent) 8%, transparent), transparent 45%);
  }
  .card:hover::after { opacity: 1; }
  .terminal::after, .member-card::after { display: none; }
  .tile { transition: transform 0.3s var(--spring), border-color 0.18s; }
  .tile:hover { transform: translateY(-3px); }
  .btn { transition: transform 0.2s var(--spring), filter 0.18s, box-shadow 0.18s, opacity 0.18s, background 0.18s, color 0.18s; }
  .btn:hover:not(:disabled) { transform: translateY(-1px); }
  .btn:active:not(:disabled) { transform: scale(0.97); }
  .tile .tile-icon { transition: transform 0.35s var(--spring); }
  .tile:hover .tile-icon { transform: scale(1.12) rotate(-6deg); }
}

/* Bascule des interrupteurs : petit ressort */
.switch i::after { transition: transform 0.35s var(--spring), width 0.2s var(--ease); }
.switch:active i::after { width: 22px; }
.switch input:checked + i::after { transform: translateX(18px); }
.switch:active input:checked + i::after { transform: translateX(14px); }

/* Badges du menu : petit battement quand un ticket attend */
.nav-badge:not([hidden]) { animation: badge-in 0.5s var(--spring); }
@keyframes badge-in { from { transform: scale(0); } to { transform: scale(1); } }

/* =================== Statistiques =================== */
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 650;
  padding: 5px 11px; border-radius: 7px; cursor: pointer; transition: background 0.2s var(--ease), color 0.2s; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.tiles.kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .tiles.kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tiles.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile.kpi { min-height: 0; }
.delta { margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.delta.up { color: var(--success); }
.delta.down { color: var(--danger); }
.delta.new { color: var(--accent); }
.insight { display: flex; flex-wrap: wrap; gap: 8px; }
.insight span { padding: 6px 10px; border-radius: 999px; font-size: 13px; background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.heat { overflow-x: auto; }
.heat-grid { display: grid; grid-template-columns: 34px repeat(24, minmax(14px, 1fr)); gap: 3px; min-width: 520px; align-items: center; }
.heat-hour { font-size: 10.5px; color: var(--muted); text-align: left; }
.heat-day { font-size: 12px; color: var(--muted); text-transform: capitalize; }
.heat-cell { aspect-ratio: 1; border-radius: 4px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--series-messages) calc(var(--v, 0) * 100%), var(--surface-2));
  animation: fade 0.5s var(--ease) backwards; animation-delay: calc(var(--d, 0) * 3ms); transition: transform 0.15s var(--spring); }
.heat-cell:hover { transform: scale(1.35); position: relative; z-index: 1; border-color: var(--text); }
.bars-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.bars-list li:not(.line):not(.empty-line) { display: grid; grid-template-columns: minmax(0, 150px) 1fr auto; align-items: center; gap: 10px; font-size: 13.5px; }
.bl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.bl-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--series-messages); transition: width 0.9s var(--ease); }
.bars-list b { font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; }

/* =================== Objectif « membres actifs » =================== */
.goal-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.goal-num strong { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.goal-num .muted { font-size: 18px; font-weight: 650; }
.goal-bar { height: 12px; margin: 10px 0 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.goal-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.8s var(--ease); }
.goal-bar.done i { background: var(--success); }
/* Évolution de l'objectif semaine par semaine */
.goal-weeks { margin: 14px 0 0; }
.goal-weeks figcaption { font-size: 12px; font-weight: 650; margin-bottom: 6px; }
.gw-plot { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; height: 110px; }
/* 110 px = chiffre (18 px) + barres (74 px au plus) + date (18 px) */
.gw-target { position: absolute; left: 0; right: 0; bottom: calc(18px + 74px * var(--goal)); border-top: 2px dashed color-mix(in srgb, var(--success) 70%, transparent); pointer-events: none; }
.gw-col { display: grid; grid-template-rows: 1fr 18px; align-items: end; justify-items: center; min-width: 0; height: 100%; }
.gw-stack { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: 100%; height: 100%; }
.gw-col b { flex: none; height: 18px; line-height: 16px; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--muted);
  animation: fade 0.3s var(--ease) both; animation-delay: calc(var(--i) * 50ms + 0.2s); }
.gw-col i { flex: none; height: calc((100% - 18px) * var(--h)); width: min(100%, 34px); border-radius: 6px 6px 3px 3px; background: color-mix(in srgb, var(--accent) 35%, var(--surface-2)); transform-origin: bottom; animation: gw-grow 0.6s var(--ease) both; animation-delay: calc(var(--i) * 50ms); }
.gw-col span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gw-col.now i { background: var(--accent); }
.gw-col.now b, .gw-col.now span { color: var(--text); font-weight: 700; }
.gw-col.done i { background: var(--success); }
@keyframes gw-grow { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) { :root:not([data-motion="on"]) .gw-col i, :root:not([data-motion="on"]) .gw-col b { animation: none; } }
/* À venir */
.upcoming { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 980px) { .upcoming { grid-template-columns: 1fr; } }
.upcoming > li:not(.line):not(.empty-line) { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 80%, transparent); min-width: 0; }
.upcoming > li.empty-line { grid-column: 1 / -1; }
.upcoming .grow { min-width: 0; }
.upcoming a { color: inherit; text-decoration: none; }
.upcoming a:hover strong { color: var(--accent); }
.upcoming strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; line-height: 1.3; }
.upcoming .muted { font-size: 12.5px; }
.up-date { flex: none; width: 46px; padding: 5px 0; border-radius: 10px; text-align: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); line-height: 1.1; }
.up-date b { display: block; font-size: 19px; font-weight: 800; }
.up-date span { font-size: 11px; font-weight: 700; text-transform: uppercase; }
.upcoming .pill { flex: none; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.upcoming .pill.on { background: color-mix(in srgb, var(--danger) 16%, transparent); border-color: transparent; color: var(--danger); }
.upcoming li.live .up-date { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
#goal p { margin: 0; font-size: 13px; }
/* Prêt pour la 2.0 : une pastille par étape (verte = faite, rouge = en retard ou script absent) */
.launch-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.launch-done .launch-icon { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.launch-late .launch-icon, .launch-missing .launch-icon { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.launch-done .pill { color: var(--success); }
.sec-checks strong { display: block; }
.sec-help { margin-top: 4px; font-size: 12.5px; line-height: 1.45; }
.field-hint { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 500; }
.field-hint:empty { display: none; }
.best-time { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 9px 12px; border-radius: 12px;
             font-size: 13px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.best-time[hidden] { display: none; }
.best-time .icon { flex: none; width: 16px; height: 16px; color: var(--accent); }
.best-time .link { font-weight: 650; }

/* =================== Bandeau « en direct » =================== */
.live-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px;
  background: linear-gradient(100deg, color-mix(in srgb, #9146ff 26%, var(--surface)), color-mix(in srgb, var(--surface) 88%, transparent) 70%);
  border-color: color-mix(in srgb, #9146ff 45%, transparent); }
.live-banner .muted { overflow-wrap: anywhere; }
.live-dot { position: relative; width: 12px; height: 12px; flex-shrink: 0; border-radius: 50%; background: #ef4444; }
.live-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #ef4444; animation: halo 1.6s ease-out infinite; }
.btn.small .icon { width: 14px; height: 14px; }
a.btn { text-decoration: none; }

/* =================== Nouveautés du bot =================== */
.changelog { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 980px) { .changelog { grid-template-columns: 1fr; } }
.changelog > li:not(.line) { padding: 14px; border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 80%, transparent); border: 1px solid var(--border); }
.cl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.changelog ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: color-mix(in srgb, var(--text) 85%, var(--muted)); }

/* =================== Recherche rapide (Ctrl+K) =================== */
.search-trigger { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); font: inherit; font-size: 13.5px; cursor: pointer;
  transition: border-color 0.18s, background 0.18s; }
.search-trigger:hover { border-color: var(--border-strong); background: var(--surface-2); color: var(--text); }
.search-trigger span { min-width: 90px; text-align: left; }
kbd { padding: 1px 6px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--muted);
  font: 600 11px ui-monospace, "Cascadia Code", Consolas, monospace; }
.palette { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px;
  background: rgba(5, 6, 10, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade 0.15s var(--ease); }
.palette-box { width: 100%; max-width: 560px; border-radius: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--border-strong);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); animation: rise 0.2s var(--ease); }
.palette-input { position: relative; display: block; border-bottom: 1px solid var(--border); }
.palette-input .icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.palette-input input { border: 0; border-radius: 0; background: transparent; padding: 16px 16px 16px 46px; font-size: 16px; box-shadow: none; }
.palette-input input:focus { box-shadow: none; background: transparent; }
.palette-results { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; }
.palette-results li[role="option"] { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.palette-results li.on { background: var(--accent-soft); }
.palette-results .empty-line { padding: 14px; text-align: center; }
.pal-icon { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: var(--surface-2); color: var(--accent); }
.pal-kind { font-size: 11.5px; font-weight: 650; color: var(--muted); }
.palette-foot { display: flex; gap: 6px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 12px; }
@media (max-width: 760px) {
  .search-trigger { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .search-trigger span, .search-trigger kbd { display: none; }
  .palette { padding-top: 8vh; }
  .palette-foot { display: none; }
}

/* =================== Notes du staff =================== */
.notes-block h3 .hint { text-transform: none; letter-spacing: 0; font-weight: 500; }
.notes { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.notes li:not(.empty-line) { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--warning) 8%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--warning) 22%, transparent); }
.notes li.mine { background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; margin-bottom: 2px; }
.icon-btn.small { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; }
.icon-btn.small .icon { width: 15px; height: 15px; }
.note-form { display: flex; gap: 8px; align-items: flex-end; }
.note-form textarea { min-height: 44px; }

/* =================== Note de confiance =================== */
.trust { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 80%, transparent); border: 1px solid var(--border); }
.trust-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.trust-head span { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; }
.trust-head .icon { width: 16px; height: 16px; }
.trust-bar { height: 8px; margin: 10px 0 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.trust-bar i { display: block; height: 100%; width: 0; border-radius: inherit; transition: width 1s var(--ease); }
.trust.good .trust-bar i { background: linear-gradient(90deg, #16a34a, #22c55e); }
.trust.ok .trust-bar i { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.trust.watch .trust-bar i { background: linear-gradient(90deg, #d97706, #f59e0b); }
.trust.risk .trust-bar i { background: linear-gradient(90deg, #dc2626, #ef4444); }
.trust.good strong { color: var(--success); }
.trust.watch strong { color: var(--warning); }
.trust.risk strong { color: var(--danger); }
.trust summary { cursor: pointer; color: var(--muted); font-size: 12.5px; font-weight: 600; user-select: none; }
.trust summary:hover { color: var(--text); }
.trust-factors { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.trust-factors li { display: flex; gap: 8px; align-items: baseline; }
.trust-factors b { min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.trust-factors .plus b { color: var(--success); }
.trust-factors .minus b { color: var(--danger); }

/* =================== Discussion avec l'IA =================== */
.chat-card { display: flex; flex-direction: column; }
.chat { display: flex; flex-direction: column; gap: 10px; min-height: 280px; max-height: 480px; overflow-y: auto; margin: 14px 0; padding: 14px; border-radius: 12px; background: var(--surface-2); }
.chat-empty { margin: auto; text-align: center; color: var(--muted); font-size: 13.5px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.12s; }
.chip:hover { border-color: var(--accent); background: var(--accent-soft); }
.chip:active { transform: scale(0.96); }
.bubble { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; animation: pop 0.28s var(--ease) both; }
.bubble.me { align-self: flex-end; border-bottom-right-radius: 5px; color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--accent-2))); }
.bubble.bot { align-self: flex-start; border-bottom-left-radius: 5px; background: var(--surface); border: 1px solid var(--border); }
.bubble.bot strong { display: block; font-size: 12px; color: var(--accent); margin-bottom: 2px; }
.bubble.error { border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
.typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: bounce 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
.chat-form { display: flex; gap: 8px; }

/* =================== Journal =================== */
.terminal { padding: 0; overflow: hidden; background: var(--log-bg); border-color: rgba(255, 255, 255, 0.08); }
.terminal-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.dots { display: flex; gap: 7px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: #ef4444; }
.dots i:nth-child(2) { background: #f59e0b; }
.dots i:nth-child(3) { background: #22c55e; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.terminal .filters select, .terminal .filters input[type="search"] { width: auto; padding: 6px 10px; font-size: 13px; background: #12151c; color: #d6d8de; border-color: rgba(255, 255, 255, 0.1); }
.terminal label.check { color: #d6d8de; font-size: 13px; }
.logs {
  margin: 0; height: min(64vh, 600px); overflow: auto; padding: 12px 16px; color: #c9ccd6;
  font: 12.5px/1.65 ui-monospace, "Cascadia Code", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere;
}
.logs > div { padding: 1px 6px; margin: 0 -6px; border-radius: 4px; }
.logs > div.new { animation: flash 1.2s var(--ease); }
@keyframes flash { from { background: rgba(109, 93, 252, 0.25); } to { background: transparent; } }
.log-warning { color: #fbbf24; }
.log-error, .log-critical { color: #f87171; background: rgba(239, 68, 68, 0.07); }

/* =================== Notification =================== */
.toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 50; display: flex; align-items: center; gap: 10px;
  max-width: min(420px, calc(100% - 32px)); padding: 12px 16px; border-radius: 12px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  font-weight: 600; font-size: 14px; animation: toast-in 0.35s var(--ease);
}
.toast .icon { width: 20px; height: 20px; padding: 3px; border-radius: 50%; stroke-width: 3; }
.toast.ok .icon { background: var(--success); color: #fff; }
.toast.bad .icon { background: var(--danger); color: #fff; }
.toast.out { animation: toast-out 0.25s var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px); } }

/* =================== Téléphone et tablette =================== */
@media (max-width: 980px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .span-2 { grid-column: auto; }
}
@media (max-width: 760px) {
  .app { display: block; padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  .sidebar {
    position: fixed; inset: auto 0 0 0; top: auto; z-index: 40; height: auto; flex-direction: row; gap: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
  }
  .brand, .sidebar-foot { display: none; }
  .nav { flex-direction: row; width: 100%; justify-content: space-around; gap: 2px; }
  .nav button { flex-direction: column; gap: 3px; padding: 7px 2px; font-size: 10.5px; text-align: center; justify-content: center; }
  .nav button .icon { width: 21px; height: 21px; }
  .nav button.active { background: transparent; }
  .nav button.active::before { left: 30%; right: 30%; top: -6px; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
  .mobile-only { display: grid !important; }
  .main { padding: 18px 14px 24px; }
  h1 { font-size: 22px; }
  .page-head { margin-bottom: 14px; }
  .card { padding: 16px; }
  .toast { left: 16px; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); max-width: none; }
  .member-body .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .two, .actions-grid { grid-template-columns: 1fr; }
  .head-actions select { max-width: 130px; }
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) *, :root:not([data-motion="on"]) *::before, :root:not([data-motion="on"]) *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* =================== Fond animé (halos de couleur) =================== */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* Halos en dégradés radiaux (déjà flous par nature) : même rendu qu'un filtre « blur », mais presque gratuit à
   afficher. Seule leur position bouge (animation gérée par la carte graphique). */
.aurora span {
  position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%;
  opacity: 0.55; will-change: transform; transform: translateZ(0);
  animation: drift 30s ease-in-out infinite alternate;
}
.aurora span:nth-child(1) { background: radial-gradient(circle, rgba(109, 93, 252, 0.55), transparent 62%); top: -30vmax; right: -22vmax; }
.aurora span:nth-child(2) { background: radial-gradient(circle, rgba(34, 211, 238, 0.32), transparent 62%); bottom: -34vmax; left: -26vmax; animation-duration: 36s; animation-delay: -8s; }
.aurora span:nth-child(3) { background: radial-gradient(circle, rgba(236, 72, 153, 0.22), transparent 62%); top: 20%; left: 30%; width: 48vmax; height: 48vmax; animation-duration: 42s; animation-delay: -16s; }
@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-6vmax, 4vmax) scale(1.12); }
  100% { transform: translate(5vmax, -3vmax) scale(0.95); }
}
:root[data-theme="light"] .aurora span { opacity: 0.3; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .aurora span { opacity: 0.3; } }
.grid-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
}

/* =================== Verre dépoli =================== */
/* Cartes : fond presque opaque, sans flou d'arrière-plan (le flou sur chaque carte ralentit le défilement,
   surtout sur téléphone). Le flou est gardé seulement pour la barre latérale et la page de connexion. */
.card { background: color-mix(in srgb, var(--surface) 88%, transparent); }
.sidebar, .login-card {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}.card { position: relative; }
.card::before {  /* fin liseré lumineux en haut des cartes */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, color-mix(in srgb, var(--text) 14%, transparent), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.terminal::before, .member-card::before { display: none; }
body { background: var(--bg); }
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); }
#page-title {
  background: linear-gradient(90deg, var(--text), color-mix(in srgb, var(--text) 55%, var(--accent)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* =================== Bannière d'accueil =================== */
.card.hero {
  overflow: hidden;
  background:
    radial-gradient(600px 220px at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(500px 220px at 100% 0%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface) 88%, transparent);
}
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.hero-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.guild-icon {
  width: 64px; height: 64px; flex-shrink: 0; border-radius: 20px; object-fit: cover;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--border-strong);
}
.guild-icon.letter { display: grid; place-items: center; font-size: 28px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.hero-text { min-width: 0; }
.eyebrow { font-size: 13px; font-weight: 650; color: var(--accent); letter-spacing: 0.02em; }
.hero-title { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; margin: 2px 0 4px; }
.ring-wrap { position: relative; width: 108px; height: 108px; flex-shrink: 0; }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring-bg { stroke: var(--surface-3); }
.ring-fg { stroke: url(#g-accent); stroke-linecap: round; stroke-dashoffset: 314.16; transition: stroke-dashoffset 1.2s var(--ease); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent)); }
.ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.ring-label strong { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ring-label strong::after { content: "%"; font-size: 14px; margin-left: 1px; color: var(--muted); }
.ring-label span { font-size: 11.5px; color: var(--muted); }
.hero .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hero .tile { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
@media (max-width: 1100px) { .hero .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Tuiles : halo coloré au survol */
.tile { position: relative; overflow: hidden; }
.tile::after {
  content: ""; position: absolute; width: 120px; height: 120px; right: -50px; top: -50px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);
  opacity: 0; transition: opacity 0.25s var(--ease);
}
.tile:hover::after { opacity: 1; }
.tile.green::after { background: radial-gradient(circle, rgba(34, 197, 94, 0.3), transparent 70%); }
.tile.red::after { background: radial-gradient(circle, rgba(239, 68, 68, 0.3), transparent 70%); }
.tile.orange::after { background: radial-gradient(circle, rgba(245, 158, 11, 0.3), transparent 70%); }
.tile.cyan::after { background: radial-gradient(circle, rgba(34, 211, 238, 0.3), transparent 70%); }
.nav button.active { background: linear-gradient(90deg, var(--accent-soft), transparent); }

/* =================== Connexion =================== */
.login-page { min-height: 100vh; overflow-x: hidden; }
.login-wrap { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; }
.login-card {
  width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 14px; padding: 36px 30px 26px;
  border: 1px solid var(--border-strong); border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent);
  animation: rise 0.6s var(--ease) both;
}
.login-card.shake { animation: shake 0.45s var(--ease); }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.login-logo {
  position: relative; display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 6px; border-radius: 22px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 14px 40px color-mix(in srgb, var(--accent) 45%, transparent);
  animation: float 5s ease-in-out infinite;
}
.login-logo::after {
  content: ""; position: absolute; inset: -8px; border-radius: 28px; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  animation: halo 2.6s ease-out infinite;
}
.login-logo img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.login-logo svg { width: 36px; height: 36px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes float { 50% { transform: translateY(-5px); } }
@keyframes halo { from { opacity: 0.9; transform: scale(0.92); } to { opacity: 0; transform: scale(1.25); } }
.login-title { text-align: center; }
.login-title h1 { font-size: 26px; background: linear-gradient(90deg, var(--text), color-mix(in srgb, var(--text) 50%, var(--accent-2))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-title p { margin-top: 6px; }
.field { margin-top: 4px; }
.password { position: relative; }
.password > .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.password input { padding: 13px 48px 13px 42px; font-size: 15.5px; border-radius: 12px; letter-spacing: 0.04em; }
.eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; transition: background 0.15s, color 0.15s;
}
.eye:hover { background: var(--surface-3); color: var(--text); }
.eye .hide, .eye.on .show { display: none; }
.eye.on .hide { display: block; }
.caps { margin-top: -6px; color: var(--warning); font-size: 12.5px; font-weight: 600; }
.btn.big { margin-top: 6px; padding: 13px 18px; font-size: 15px; border-radius: 12px; }
.btn.big .icon { transition: transform 0.2s var(--ease); }
.btn.big:hover .icon { transform: translateX(3px); }
.login-error {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border-radius: 10px;
  color: var(--danger); background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  font-weight: 600; font-size: 13.5px; text-align: center;
}
.login-error:empty { display: none; }
.btn.discord { background: #5865f2; box-shadow: 0 6px 20px rgba(88, 101, 242, 0.35); text-decoration: none; margin-top: 2px; }
.btn.discord .icon { fill: currentColor; stroke: none; width: 20px; height: 20px; }
.pw-block { display: flex; flex-direction: column; gap: 14px; }
.login-card:has(.btn.discord) #login-btn { background: var(--surface-2); color: var(--text); box-shadow: none; border: 1px solid var(--border-strong); }
.divider { display: flex; align-items: center; gap: 10px; margin: 4px 0 -2px; color: var(--muted); font-size: 12px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border-strong); }
.login-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; color: var(--muted); font-size: 12.5px; }
.login-foot .icon { width: 14px; height: 14px; }

/* =================== Finitions v5 =================== */
/* Titres et chiffres en Poppins, la même police que les cartes de rang et de bienvenue (fichiers servis par le bot) */
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("/fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("/fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 800; font-display: swap; src: url("/fonts/poppins-800.woff2") format("woff2"); }
h1, h2, h3, .hero-title, .tile strong { font-family: "Poppins", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; letter-spacing: -0.01em; }

/* Menu : sections, élément actif en pastille lumineuse */
.nav { gap: 2px; }
.nav-label { margin: 14px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); opacity: 0.75; }
.nav-label:first-child, .nav-indicator + .nav-label { margin-top: 0; }
.nav button .icon { transition: color 0.18s var(--ease), filter 0.18s var(--ease); }
.nav button:hover .icon { color: var(--accent); }
.nav button.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 6%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}
.nav button.active .icon { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)); }
.brand { padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--surface-2) 70%, transparent); border: 1px solid var(--border); }

/* En-tête : icône de l'onglet + reste visible en haut pendant le défilement */
.page-head {
  position: sticky; top: 0; z-index: 20; margin: -26px -32px 20px; padding: 22px 32px 14px;
  border-bottom: 1px solid transparent; transition: background 0.2s var(--ease), border-color 0.2s var(--ease), padding 0.2s var(--ease);
}
body.scrolled .page-head {
  padding-top: 12px; padding-bottom: 12px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--border);
}
.page-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.page-icon {
  display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.page-icon .icon { width: 22px; height: 22px; }

/* Titres des cartes : petit trait coloré */
.card-head h2 { display: flex; align-items: center; gap: 10px; }
.card-head h2::before { content: ""; flex-shrink: 0; width: 4px; height: 16px; border-radius: 4px; background: linear-gradient(var(--accent), var(--accent-2)); }

/* Tuiles : un peu de couleur même au repos */
.tile::after { opacity: 0.35; }
.tile:hover::after { opacity: 1; }
.tile .tile-icon { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }

/* Boutons de couleur : teintés au repos, pleins au survol (moins agressif pour l'œil) */
.btn.danger, .btn.warn, .btn.success { --c: var(--danger); background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.btn.warn { --c: var(--warning); }
.btn.success { --c: var(--success); }
.btn.danger:hover, .btn.warn:hover, .btn.success:hover { background: var(--c); color: #fff; filter: none;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--c) 35%, transparent); }
.btn.danger.loading::after, .btn.warn.loading::after, .btn.success.loading::after { border-color: color-mix(in srgb, var(--c) 35%, transparent); border-top-color: var(--c); }

/* États vides : icône dans un halo */
.empty > .icon.big {
  width: 76px; height: 76px; padding: 20px; border-radius: 50%; color: var(--accent); stroke-width: 1.6;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 6%, transparent) 70%);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 5%, transparent);
}
.empty p { max-width: 260px; }

@media (max-width: 760px) {
  .nav-label { display: none; }
  .nav button.active { background: transparent; box-shadow: none; color: var(--text); }
  .page-head { margin: -18px -14px 14px; padding: 16px 14px 10px; }
  body.scrolled .page-head { padding-top: 10px; padding-bottom: 10px; }
  .page-head { flex-wrap: nowrap; gap: 10px; }
  .page-title { gap: 10px; }
  .page-title > div { min-width: 0; }
  #page-title, #page-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .head-actions { flex-shrink: 0; gap: 6px; }
  .head-actions .icon-btn { width: 36px; height: 36px; }
  .page-icon { width: 38px; height: 38px; border-radius: 12px; }
  /* Barre d'onglets du bas : fondu sur le bord où il reste des onglets (au lieu d'un onglet coupé net) */
  .nav.more-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .nav.more-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
  .nav.more-left.more-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
  .page-icon .icon { width: 19px; height: 19px; }
}

@media (max-width: 760px) {
  .hero-top { gap: 12px; }
  .guild-icon { width: 50px; height: 50px; border-radius: 16px; }
  .hero-title { font-size: 20px; }
  .ring-wrap { width: 82px; height: 82px; }
  .ring-label strong { font-size: 19px; }
  .aurora span { filter: blur(70px); }
  .login-card { padding: 30px 22px 22px; }
}
@media (max-width: 420px) {
  .hero-top { flex-direction: column; align-items: flex-start; }
  .ring-wrap { position: absolute; top: 16px; right: 16px; width: 70px; height: 70px; }
  .ring-label strong { font-size: 16px; }
  .ring-label span { display: none; }
  .hero-id { padding-right: 76px; }
}

/* =================== Retouches visuelles (téléphone d'abord) =================== */
/* Grilles à 2 colonnes : une dernière tuile seule prend toute la largeur (plus de trou à droite) */
.tiles.compact > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 520px) { .tiles.kpis > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* Nouveautés : l'emoji sert de puce (plus de double puce), les anciennes se replient */
.changelog ul { list-style: none; padding-left: 0; gap: 8px; line-height: 1.5; }
.changelog details > summary { list-style: none; cursor: pointer; }
.changelog details > summary::-webkit-details-marker { display: none; }
.changelog details > summary .cl-head { margin-bottom: 0; }
.changelog details[open] > summary .cl-head { margin-bottom: 8px; }
.changelog details > summary .cl-head .muted { white-space: nowrap; flex-shrink: 0; }
.changelog details > summary .cl-head .muted::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 2px 2px 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s var(--ease); }
.changelog details[open] > summary .cl-head .muted::after { transform: translateY(3px) rotate(-135deg); }
.changelog details > summary:hover .cl-head strong { color: var(--accent); }

@media (max-width: 760px) {
  /* Tuiles « À traiter » : icône à gauche, chiffre et texte à droite (deux fois moins hautes) */
  .tiles.compact .tile:not(.skeleton) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
    column-gap: 12px; row-gap: 0; min-height: 0; padding: 12px; }
  .tiles.compact .tile .tile-icon { grid-row: span 2; margin: 0; width: 36px; height: 36px; border-radius: 11px; }
  .tiles.compact .tile .tile-icon .icon { width: 18px; height: 18px; }
  .tiles.compact .tile strong { font-size: 21px; }
  .tiles.compact .tile span.label { line-height: 1.25; }
  /* Chiffres du serveur : tuiles plus compactes */
  .hero .tiles { gap: 8px; }
  .hero .tile { min-height: 0; padding: 11px 12px; }
  .hero .tile .tile-icon { width: 26px; height: 26px; margin-bottom: 4px; border-radius: 8px; }
  .hero .tile .tile-icon .icon { width: 14px; height: 14px; }
  .hero .tile strong { font-size: 20px; }
  /* Titre de carte + précision : la précision passe dessous au lieu d'écraser le titre */
  .card-head { flex-wrap: wrap; row-gap: 2px; }
  .card-head > span.muted { flex-basis: 100%; padding-left: 14px; font-size: 12.5px; }
  /* Sous-titre de la page sur deux lignes au lieu d'être coupé par « … » */
  #page-sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    font-size: 12.5px; line-height: 1.3; }
  /* Carte des heures : tient dans l'écran, sans défilement de côté */
  .heat { overflow: visible; }
  .heat-grid { min-width: 0; grid-template-columns: 26px repeat(24, minmax(0, 1fr)); gap: 2px; }
  .heat-cell { border-radius: 3px; }
  .heat-hour { font-size: 9.5px; white-space: nowrap; }
  .heat-day { font-size: 11px; }
}

/* Petit téléphone : l'icône de l'onglet (déjà visible en bas) laisse sa place au titre, qui n'est plus coupé */
@media (max-width: 440px) { .page-icon { display: none; } }

/* =================== Fluidité (motion design) =================== */
/* Changement d'onglet : la page glisse depuis la droite (onglet suivant) ou la gauche (onglet précédent) */
@keyframes slide-forward { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes slide-back { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
body[data-dir="forward"] .tab-panel.enter > .card { animation: slide-forward 0.34s var(--ease) both; }
body[data-dir="back"] .tab-panel.enter > .card { animation: slide-back 0.34s var(--ease) both; }

/* En-tête collant : quand il rétrécit au défilement, la marge compense exactement (le contenu ne saute plus) */
.page-head { transition: background 0.2s var(--ease), border-color 0.2s var(--ease), padding 0.2s var(--ease), margin 0.2s var(--ease); }
body.scrolled .page-head { margin-bottom: 32px; }  /* 22+14 → 12+12 : 12 px de moins en hauteur, 12 px de plus en marge */

/* Toucher sur téléphone : retour immédiat sous le doigt, sans le rectangle gris du navigateur */
html { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  .tile, .podium li, .feed li, .matches li, .checks > *, .member-row, .ticket-row {
    transition: transform 0.25s var(--spring), background 0.15s; }
  .tile:active, .member-row:active, .ticket-row:active { transform: scale(0.97); transition-duration: 0.08s; }
  .podium li:active, .feed li:active, .matches li:active { transform: scale(0.985); transition-duration: 0.08s; }
}

/* Nouveautés : ouverture et fermeture en douceur (navigateurs récents ; les autres s'ouvrent d'un coup comme avant) */
.changelog details { interpolate-size: allow-keywords; }
.changelog details::details-content { height: 0; overflow: clip; opacity: 0;
  transition: height 0.32s var(--ease), opacity 0.25s var(--ease), content-visibility 0.32s allow-discrete; }
.changelog details[open]::details-content { height: auto; opacity: 1; }

@media (max-width: 760px) {
  /* Halos du fond : plus de filtre « flou » (très coûteux sur téléphone) ; les dégradés sont déjà doux */
  .aurora span { filter: none; opacity: 0.45; }
  /* Flou derrière l'en-tête et la barre du bas : plus léger (moins de calcul à chaque image du défilement) */
  .sidebar { backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
    background: color-mix(in srgb, var(--surface) 90%, transparent); }
  body.scrolled .page-head { backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
    background: color-mix(in srgb, var(--bg) 88%, transparent); margin-bottom: 20px; }  /* 16+10 → 10+10 : +6 px de marge */
  /* Barre du bas : l'icône de l'onglet choisi rebondit, le trait du haut se déplie */
  .nav button .icon { transition: transform 0.3s var(--spring), color 0.18s var(--ease); }
  .nav button:active .icon { transform: scale(0.86); transition-duration: 0.08s; }
  .nav button.active .icon { animation: nav-pop 0.45s var(--spring); }
  .nav button.active::before { animation: nav-bar 0.4s var(--spring) both; }
}
@keyframes nav-pop { 0% { transform: scale(0.8); } 55% { transform: scale(1.14) translateY(-1px); } 100% { transform: none; } }
@keyframes nav-bar { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }
/* Petits téléphones : titre de la page en entier (« Communauté », « Statistiques »…) au lieu d'être coupé */
@media (max-width: 420px) {
  h1#page-title { font-size: 19px; letter-spacing: -0.01em; line-height: 1.15; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .head-actions { gap: 5px; }
  .head-actions .icon-btn { width: 34px; height: 34px; }
  .page-title { gap: 9px; }
  .page-icon { width: 36px; height: 36px; }
}

/* =================== Version 3 : grand motion design =================== */
/* Chaque onglet a sa propre couleur d'accent. Elle change d'un coup, au moment où les cartes du nouvel onglet arrivent :
   un fondu de couleur obligeait le navigateur à recalculer et repeindre toute la page à chaque image pendant 0,8 s,
   ce qui faisait saccader le changement d'onglet. */
@property --accent { syntax: "<color>"; inherits: true; initial-value: #6d5dfc; }
@property --accent-2 { syntax: "<color>"; inherits: true; initial-value: #22d3ee; }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
:root { --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent); }
:root[data-theme="light"] { --accent-soft: color-mix(in srgb, var(--accent) 11%, transparent); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --accent-soft: color-mix(in srgb, var(--accent) 11%, transparent); } }
:root[data-tab="community"]  { --accent: #db2777; --accent-2: #f59e0b; }
:root[data-tab="stats"]      { --accent: #0891b2; --accent-2: #6d5dfc; }
:root[data-tab="moderation"] { --accent: #2563eb; --accent-2: #22d3ee; }
:root[data-tab="tickets"]    { --accent: #0d9488; --accent-2: #84cc16; }
:root[data-tab="requests"]   { --accent: #ea580c; --accent-2: #f472b6; }
:root[data-tab="aialerts"]   { --accent: #d97706; --accent-2: #ef4444; }
:root[data-tab="events"]     { --accent: #0d9488; --accent-2: #3b82f6; }
:root[data-tab="ai"]         { --accent: #9333ea; --accent-2: #ec4899; }
:root[data-tab="messages"]   { --accent: #0284c7; --accent-2: #a78bfa; }
:root[data-tab="settings"]   { --accent: #059669; --accent-2: #22d3ee; }
:root[data-tab="logs"]       { --accent: #4f46e5; --accent-2: #94a3b8; }
#g-accent stop:first-child { stop-color: var(--accent); }
#g-accent stop:last-child { stop-color: var(--accent-2); }
.logs > div.new { animation-name: flash-accent; }
@keyframes flash-accent { from { background: color-mix(in srgb, var(--accent) 25%, transparent); } to { background: transparent; } }

/* Fond : les halos prennent la couleur de l'onglet */
.aurora span:nth-child(1) { background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 62%); }
.aurora span:nth-child(2) { background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 34%, transparent), transparent 62%); }

/* Ouverture : le menu, l'en-tête puis le contenu entrent en scène */
.sidebar { animation: dock-side 0.7s var(--spring) both; }
.page-head > * { animation: head-drop 0.6s var(--ease) both; }
.page-head > :nth-child(2) { animation-delay: 0.08s; }
@keyframes dock-side { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes head-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* Changement d'onglet : les cartes arrivent en profondeur (léger zoom + fondu).
   Pas de flou animé : flouter chaque carte à chaque image saccadait sur ordinateur (comme sur téléphone, déjà sans flou). */
@keyframes deep-forward { from { opacity: 0; transform: translate3d(34px, 10px, 0) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes deep-back { from { opacity: 0; transform: translate3d(-34px, 10px, 0) scale(0.94); } to { opacity: 1; transform: none; } }
body[data-dir="forward"] .tab-panel.enter > .card { animation: deep-forward 0.55s var(--ease) both; }
body[data-dir="back"] .tab-panel.enter > .card { animation: deep-back 0.55s var(--ease) both; }
.tab-panel.enter > .card:nth-child(2) { animation-delay: 0.05s; }
.tab-panel.enter > .card:nth-child(3) { animation-delay: 0.1s; }
.tab-panel.enter > .card:nth-child(n+4) { animation-delay: 0.14s; }
/* Titre de la page : dévoilé de gauche à droite, le sous-titre suit */
#page-title { animation: title-wipe 0.6s var(--ease) both; }
#page-sub { animation: sub-in 0.5s var(--ease) 0.12s both; }
@keyframes title-wipe { from { clip-path: inset(0 100% 0 0); transform: translateX(-10px); } to { clip-path: inset(0 -2% 0 0); transform: none; } }
@keyframes sub-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page-icon.pop { animation: icon-flip 0.7s var(--spring); }
@keyframes icon-flip { 0% { transform: perspective(300px) rotateY(-180deg) scale(0.6); } 60% { transform: perspective(300px) rotateY(15deg) scale(1.1); } 100% { transform: none; } }

/* Cartes plus bas dans la page : elles se révèlent quand on arrive dessus en défilant */
.card.await { animation: none !important; opacity: 0; transform: translateY(36px) scale(0.97); }
.card.await.seen { opacity: 1; transform: none; transition: opacity 0.6s var(--ease), transform 0.7s var(--spring); }

/* Bannière d'accueil vivante : contour lumineux qui tourne, icône du serveur qui flotte */
.card.hero::before {
  padding: 1.5px; animation: spin-border 7s linear infinite;
  background: conic-gradient(from var(--spin), transparent 0deg, color-mix(in srgb, var(--accent) 90%, transparent) 60deg,
    color-mix(in srgb, var(--accent-2) 80%, transparent) 120deg, transparent 180deg, transparent 360deg);
}
@keyframes spin-border { to { --spin: 360deg; } }
.guild-icon { animation: float 5s ease-in-out infinite; }

/* Chiffres qui changent pendant qu'on regarde : petit éclat */
.tile strong.bump { display: inline-block; animation: bump 0.7s var(--spring); }
@keyframes bump { 30% { transform: scale(1.18); color: var(--accent); text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 60%, transparent); } }

/* Onde au toucher / au clic */
.btn, .icon-btn, .side-btn, .seg button { position: relative; }
.ripple { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 0; }
.ripple i {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: color-mix(in srgb, currentColor 30%, transparent); animation: ripple 0.65s var(--ease) forwards;
}
.btn .ripple i { background: rgba(255, 255, 255, 0.35); }
@keyframes ripple { from { transform: scale(0); opacity: 1; } to { transform: scale(var(--s, 40)); opacity: 0; } }

/* Tuiles : inclinaison 3D qui suit la souris (ordinateur) */
@media (hover: hover) {
  .tile.tilt { transition: transform 0.12s linear, border-color 0.18s;
    transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-3px); }
}

/* Menu : la pastille s'étire comme une goutte en glissant d'un onglet à l'autre */
.nav-indicator { right: auto; width: 100%; }
.nav-indicator.ready { transition: opacity 0.2s; }
.nav .nav-indicator ~ button.active { background: transparent; box-shadow: none; }
.nav .nav-indicator ~ button.active::before { display: none; }
.nav-indicator { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent), 0 6px 22px color-mix(in srgb, var(--accent) 22%, transparent); }

/* Téléphone : barre du bas transformée en dock flottant en verre */
@keyframes dock-up { from { opacity: 0; transform: translateY(120%); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .app { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .sidebar {
    inset: auto 10px calc(10px + env(safe-area-inset-bottom)) 10px; padding: 6px; border-radius: 24px;
    border: 1px solid var(--border-strong); overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38), inset 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent);
    animation: dock-up 0.8s var(--spring) both;
  }
  .nav-indicator { display: block; border-radius: 18px; }
  .nav-indicator::before { display: none; }
  .nav button { border-radius: 18px; }
  .nav button.active { color: var(--text); }
  .nav button.active .icon { color: var(--accent); }
  .toast { bottom: calc(100px + env(safe-area-inset-bottom)); }
  /* Sur téléphone, pas de flou pendant l'entrée des cartes (plus fluide) */
  body[data-dir="forward"] .tab-panel.enter > .card { animation-name: deep-forward-m; }
  body[data-dir="back"] .tab-panel.enter > .card { animation-name: deep-back-m; }
}
@keyframes deep-forward-m { from { opacity: 0; transform: translate3d(30px, 8px, 0) scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes deep-back-m { from { opacity: 0; transform: translate3d(-30px, 8px, 0) scale(0.95); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  :root[data-theme="light"] .sidebar { box-shadow: 0 16px 40px rgba(15, 20, 40, 0.14); }
  @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .sidebar { box-shadow: 0 16px 40px rgba(15, 20, 40, 0.14); } }
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) { transition: none; }
  :root:not([data-motion="on"]) .card.await { opacity: 1; transform: none; }
  :root:not([data-motion="on"]) .ripple { display: none; }
}

/* Membres qui ont décroché et santé du bot (accueil) */
.dropped li { align-items: center; }
.dropped .grow { min-width: 0; }
.dropped strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropped .muted { font-size: 12.5px; }
.dropped-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
/* Dernière mise à jour et dernière erreur : petits encadrés (vert = installée, rouge = problème) */
.health-line { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 9px 12px; border-radius: 12px; font-size: 13px;
  line-height: 1.4; overflow-wrap: anywhere; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 80%, transparent); }
.health-line:empty { display: none; }
.health-line .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.health-line.ok .icon { color: var(--success); }
.health-line.bad, #health-error { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.health-line.bad .icon, #health-error .icon { color: var(--danger); }

/* Carte qui n'a pas pu se charger */
.load-failed { display: flex; align-items: center; gap: 10px; grid-column: 1 / -1; padding: 12px 14px; border-radius: 12px; font-size: 13.5px;
  color: var(--muted); border: 1px dashed var(--border-strong); }
.load-failed .icon { flex: none; width: 17px; height: 17px; color: var(--warning); }
.load-failed .link { flex: none; }

/* =================== Qui a des pouvoirs =================== */
.powers { max-height: 420px; overflow-y: auto; }
.powers li { align-items: center; }
.powers .grow { min-width: 0; }
.powers .link { font-weight: 650; text-align: left; }
.powers .muted { font-size: 12.5px; }
.powers li.is-new .link { color: var(--warning); }
.powers-roles summary { cursor: pointer; font-weight: 600; font-size: 14px; }

/* =================== Version 4 : motion design (avec motion.js) =================== */
/* Barre de chargement fine en haut de l'écran pendant que le bot répond */
.top-progress { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 80; height: 3px; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.top-progress i { display: block; height: 100%; border-radius: 0 3px 3px 0; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent); }
.top-progress.on { opacity: 1; transition: opacity 0.1s; }
.top-progress.on i { transform: scaleX(0.85); transition: transform 8s cubic-bezier(0.08, 0.7, 0.2, 1); }
.top-progress.on.done i { transform: scaleX(1); transition: transform 0.25s var(--ease); }
.top-progress.done { opacity: 0; transition: opacity 0.3s 0.2s; }

/* En défilant, un trait de couleur sous l'en-tête montre où on en est dans la page (navigateurs récents) */
@supports (animation-timeline: scroll()) {
  .page-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; opacity: 0;
    transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--accent), var(--accent-2));
    animation: scroll-grow linear both; animation-timeline: scroll(root); transition: opacity 0.25s; }
  body.scrolled .page-head::after { opacity: 1; }
}
@keyframes scroll-grow { to { transform: scaleX(1); } }

/* Cartes hors de l'écran : leurs animations attendent qu'on arrive dessus (et ne consomment rien en attendant) */
.card.off-screen, .card.off-screen::before, .card.off-screen *, .card.off-screen *::before, .card.off-screen *::after { animation-play-state: paused !important; }

/* Contenu qui remplace les blocs de chargement : il arrive en cascade */
.fresh > * { animation: rise 0.45s var(--ease) backwards; animation-delay: calc(var(--n, 0) * 0.045s); }
:is(.fresh, .bars-list, .member-body, .upcoming, .launch) > :nth-child(2) { --n: 1; }
:is(.fresh, .bars-list, .member-body, .upcoming, .launch) > :nth-child(3) { --n: 2; }
:is(.fresh, .bars-list, .member-body, .upcoming, .launch) > :nth-child(4) { --n: 3; }
:is(.fresh, .bars-list, .member-body, .upcoming, .launch) > :nth-child(5) { --n: 4; }
:is(.fresh, .bars-list, .member-body, .upcoming, .launch) > :nth-child(6) { --n: 5; }
:is(.fresh, .bars-list, .member-body, .upcoming, .launch) > :nth-child(n+7) { --n: 6; }
.tab-panel.enter :is(.upcoming, .launch, .bars-list, .powers, .feeds) > li { animation: rise 0.42s var(--ease) backwards; animation-delay: calc(0.05s + var(--n, 0) * 0.035s); }

/* Graphiques : moyenne sur 7 jours qui se dessine, curseur qui suit le doigt, bulle qui glisse */
.chart-svg { touch-action: pan-y; }
.chart-svg .trend { fill: none; stroke: color-mix(in srgb, var(--text) 82%, transparent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none; filter: drop-shadow(0 2px 5px color-mix(in srgb, var(--accent) 55%, transparent)); }
.chart-svg.intro .trend { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-line 1.5s var(--ease) 0.45s forwards; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
.chart-svg .cursor { stroke: color-mix(in srgb, var(--text) 40%, transparent); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; opacity: 0;
  transition: transform 0.18s var(--ease), opacity 0.2s; }
.chart-svg .trend-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; pointer-events: none; opacity: 0;
  transition: transform 0.18s var(--ease), opacity 0.2s; }
.chart-svg.focus .cursor, .chart-svg.focus .trend-dot { opacity: 1; }
.chart-tip { transition: left 0.18s var(--ease); animation: tip-in 0.22s var(--spring); }
@keyframes tip-in { from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.94); } }
.sw-line { display: inline-block; width: 14px; height: 3px; margin-right: 4px; border-radius: 2px; vertical-align: middle; background: color-mix(in srgb, var(--text) 82%, transparent); }
.trend-key { font-size: 12px; color: var(--muted); }
@media (max-width: 760px) { .chart-svg .trend { filter: none; } }

/* Carte des heures : les cases apparaissent en vague, en diagonale */
.heat-cell { animation: heat-pop 0.5s var(--spring) backwards; animation-delay: calc(var(--w, 0) * 22ms); }
@keyframes heat-pop { from { opacity: 0; transform: scale(0.3); } }

/* Barres des classements : elles se remplissent l'une après l'autre */
.bl-bar i { transition: width 1s var(--ease); transition-delay: calc(var(--n, 0) * 70ms); background: linear-gradient(90deg, var(--series-messages), color-mix(in srgb, var(--series-messages) 55%, var(--accent-2))); }

/* Anneau « en ligne » : un point lumineux suit le bout de l'anneau */
.ring .ring-tip { fill: #fff; transform-box: view-box; transform-origin: 60px 60px; transition: transform 1.2s var(--ease);
  filter: drop-shadow(0 0 5px var(--accent)); }

/* Objectif : la jauge se remplit avec un ressort, un reflet passe dessus de temps en temps */
.goal-bar i { position: relative; overflow: hidden; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.goal-bar.done i { background: linear-gradient(90deg, #16a34a, #22c55e); }
#goal:not(.still) .goal-bar i { transform-origin: left; animation: fill-in 1.3s var(--spring) 0.25s backwards; }
#goal.still .gw-col i, #goal.still .gw-col b { animation: none; }
@keyframes fill-in { from { transform: scaleX(0); } }
.goal-bar i::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); animation: sheen 3.6s ease-in-out 1.6s infinite; }
@keyframes sheen { 55%, 100% { transform: translateX(100%); } }
.confetti { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; width: 8px; height: 12px; margin: -6px 0 0 -4px; border-radius: 2px; will-change: transform, opacity; }

/* Fiche d'un membre : l'avatar arrive en tournant, le reste en cascade, un reflet traverse la bannière */
.member-card.loaded .avatar.big { animation: avatar-pop 0.65s var(--spring) 0.1s backwards; }
@keyframes avatar-pop { from { opacity: 0; transform: scale(0.4) rotate(-14deg); } }
.member-card.loaded .member-body > :not(.member-head) { animation: rise 0.45s var(--ease) backwards; animation-delay: calc(0.08s + var(--n, 0) * 0.04s); }
.member-banner { position: relative; overflow: hidden; }
.member-banner::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%); animation: sheen 4s ease-in-out 0.4s infinite; }

/* Bouton : l'action a réussi → petit éclat vert autour */
.btn.did { animation: did 0.65s var(--ease); }
@keyframes did { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 60%, transparent); } to { box-shadow: 0 0 0 12px transparent; } }

/* Interrupteurs : une onde part du bouton quand on le bascule */
.switch i::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none; opacity: 0;
  border: 2px solid var(--success); }
.switch i.ping::before { animation: switch-ping 0.6s var(--ease); }
.switch input:not(:checked) + i.ping::before { border-color: var(--muted); }
@keyframes switch-ping { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.45, 1.8); } }

/* Pastilles rouges du menu : un halo bat doucement tant que quelque chose attend */
@media (min-width: 761px) { .nav-badge { position: relative; } }
.nav-badge::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--danger); pointer-events: none;
  animation: halo 2.4s ease-out 0.6s infinite; }

/* Dernière nouveauté du bot : mise en avant */
.changelog > li:first-child:not(.line) { border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, var(--surface-2)), color-mix(in srgb, var(--surface-2) 80%, transparent) 65%); }

/* Nouveautés arrivées depuis la dernière visite : pastille « Nouveau » et compteur dans l'en-tête de la carte */
.cl-new { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; vertical-align: 2px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: #fff; background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
#changelog-note.cl-count { color: var(--accent); font-weight: 600; }

/* Recherche rapide : la fenêtre arrive avec un ressort */
.palette-box { animation: palette-in 0.38s var(--spring); }
@keyframes palette-in { from { opacity: 0; transform: translateY(-14px) scale(0.95); } }

/* Notifications : arrivée avec ressort, compte à rebours en bas, on peut les glisser pour les fermer */
.toast { overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; transition: transform 0.35s var(--spring), opacity 0.3s;
  animation: toast-spring 0.55s var(--spring); }
.toast.dragging { transition: none; cursor: grabbing; }
.toast-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; transform-origin: left; background: var(--success); animation: toast-count 3.8s linear forwards; }
.toast.bad .toast-bar { background: var(--danger); }
@keyframes toast-count { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes toast-spring { from { opacity: 0; transform: translateY(30px) scale(0.9); } to { opacity: 1; transform: none; } }

/* Thème : le nouveau thème se déploie en cercle (le navigateur fait un fondu à la place s'il ne sait pas) */
html.theme-vt::view-transition-old(root), html.theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
#theme-toggle .icon { transition: transform 0.6s var(--spring); }
#theme-toggle:active .icon { transform: rotate(-100deg) scale(0.8); }

/* Téléphone : bulle « onglet suivant » pendant qu'on balaie, rond « actualiser » quand on tire vers le bas */
.swipe-hint { position: fixed; top: 46%; right: 12px; z-index: 45; pointer-events: none; opacity: 0; transition: opacity 0.15s; }
.swipe-hint.left { right: auto; left: 12px; }
.swipe-hint span { display: block; padding: 9px 15px; border-radius: 999px; font-weight: 700; font-size: 13.5px; color: var(--text);
  background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--border-strong); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s var(--spring), background 0.2s, color 0.2s; }
.swipe-hint span:empty { display: none; }
.swipe-hint.ready span { transform: scale(1.08); color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 65%, var(--accent-2))); }
.ptr { position: fixed; top: env(safe-area-inset-top, 0px); left: 50%; z-index: 45; display: grid; place-items: center; width: 42px; height: 42px; margin-top: -46px;
  border-radius: 50%; color: var(--muted); background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  opacity: 0; transform: translate(-50%, 0); pointer-events: none; transition: transform 0.4s var(--spring), opacity 0.25s, color 0.2s, background 0.2s; }
.ptr.pulling { transition: color 0.2s, background 0.2s; }
.ptr.ready { color: var(--accent); }
.ptr.spin .icon { animation: spin 0.8s linear infinite; }
.ptr.ok { color: #fff; background: var(--success); border-color: transparent; }
.ptr.ok .icon { animation: pop-icon 0.45s var(--spring); }

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) :is(.page-head, .goal-bar i, .member-banner, .nav-badge)::after { display: none; }
}

/* Pastille « Nouvelle version » (le tableau de bord a été mis à jour pendant que la page était ouverte) */
.update-pill { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 50%; z-index: 75; display: inline-flex; align-items: center; gap: 8px;
  max-width: calc(100% - 32px); padding: 10px 16px; border: 0; border-radius: 999px; color: #fff; font: inherit; font-size: 13.5px; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--accent-2)));
  box-shadow: 0 12px 34px color-mix(in srgb, var(--accent) 45%, transparent); transform: translateX(-50%); animation: pill-drop 0.6s var(--spring); }
.update-pill .icon { width: 16px; height: 16px; }
@keyframes pill-drop { from { opacity: 0; transform: translate(-50%, -30px) scale(0.9); } }
@media (max-width: 420px) { .update-pill span { display: none; } .update-pill b::before { content: "✨ Nouvelle version · "; font-weight: 500; } }
@media (display-mode: standalone) { html { overscroll-behavior-y: contain; } }

/* Bouton ✨ « garder les animations » (visible seulement si l'appareil demande moins d'animations) */
#motion-toggle.on { color: var(--accent); }

/* Ordinateur : le menu de côté (toute la hauteur de l'écran) n'a plus de flou d'arrière-plan. Le fond animé passe
   derrière lui en continu : le flou devait être recalculé à chaque image et faisait saccader toute la page. */
@media (min-width: 761px) {
  .sidebar { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--surface) 94%, transparent); }
}

/* =================== Rythme vif =================== */
/* Toutes les animations raccourcies (environ 40 % plus rapides) pour un tableau de bord plus nerveux.
   Seules les durées et les délais changent ici : les effets restent les mêmes. */
body[data-dir] .tab-panel.enter > .card { animation-duration: 0.3s; }
.tab-panel.enter > .card:nth-child(2) { animation-delay: 0.025s; }
.tab-panel.enter > .card:nth-child(3) { animation-delay: 0.05s; }
.tab-panel.enter > .card:nth-child(n+4) { animation-delay: 0.07s; }
.tab-panel.enter .tile, .tab-panel.enter .feed > li, .tab-panel.enter .podium > li, .tab-panel.enter .history > li,
.tab-panel.enter .matches > li, .tab-panel.enter .changelog > li, .tab-panel.enter .checks > *, .tab-panel.enter .requests > li,
.tab-panel.enter .scheduled > li, .tab-panel.enter .ticket-list > li,
.tab-panel.enter :is(.upcoming, .launch, .bars-list, .powers, .feeds) > li {
  animation-duration: 0.28s; animation-delay: calc(0.03s + var(--n, 0) * 0.018s);
}
.fresh > * { animation-duration: 0.28s; animation-delay: calc(var(--n, 0) * 0.02s); }
.member-card.loaded .member-body > :not(.member-head) { animation-duration: 0.3s; animation-delay: calc(0.04s + var(--n, 0) * 0.02s); }
#page-title { animation-duration: 0.35s; }
#page-sub { animation-duration: 0.25s; }
.page-icon.pop { animation-duration: 0.42s; }
.page-head > * { animation-duration: 0.4s; }
.sidebar { animation-duration: 0.45s; }
@media (max-width: 760px) { .sidebar { animation-duration: 0.5s; } }
.card.await.seen { transition-duration: 0.35s, 0.45s; }
.chart-svg.intro .bar { animation-duration: 0.45s; animation-delay: calc(var(--i, 0) * 10ms); }
.chart-svg.intro .trend { animation-duration: 0.8s; animation-delay: 0.2s; }
.heat-cell { animation-duration: 0.35s; animation-delay: calc(var(--w, 0) * 12ms); }
.gw-col i { animation-duration: 0.4s; animation-delay: calc(var(--i) * 30ms); }
.gw-col b { animation-delay: calc(var(--i) * 30ms + 0.15s); }
.bl-bar i { transition-duration: 0.6s; transition-delay: calc(var(--n, 0) * 35ms); }
.goal-bar i, .trust-bar i { transition-duration: 0.6s; }
#goal:not(.still) .goal-bar i { animation-duration: 0.8s; animation-delay: 0.1s; }
.ring-fg, .ring .ring-tip { transition-duration: 0.8s; }
.tile strong.bump { animation-duration: 0.45s; }
.ripple { animation-duration: 0.45s; }
.btn.did { animation-duration: 0.45s; }
.nav-badge:not([hidden]) { animation-duration: 0.35s; }
.member-card.loaded { animation-duration: 0.25s; }
.toast { animation-duration: 0.25s; }
.toast.out { animation-duration: 0.18s; }

/* =================== Version 5 : encore plus de motion design =================== */
/* Règle de fluidité : seulement transform et opacity (gérés par la carte graphique), pas de flou ni de filtre animé,
   pas de couleur qui change sur toute la page. Durées courtes (« rythme vif »). */
@keyframes pop-in { from { opacity: 0; transform: scale(0.4) rotate(-18deg); } }
@keyframes bar-in { from { opacity: 0; transform: scaleY(0); } }
@keyframes nav-in { from { opacity: 0; transform: translateX(-12px); } }
@keyframes nav-up { from { opacity: 0; transform: translateY(16px) scale(0.8); } }
@keyframes num-roll { from { opacity: 0; transform: translateY(45%); } }
@keyframes num-bump { 30% { transform: scale(1.18) translateY(-1px); } }
@keyframes delta-in { from { opacity: 0; transform: translateY(6px) scale(0.85); } }
@keyframes delta-in-down { from { opacity: 0; transform: translateY(-6px) scale(0.85); } }
@keyframes date-flip { from { opacity: 0; transform: perspective(240px) rotateX(-80deg); } }
@keyframes wave { 15% { transform: rotate(16deg); } 30% { transform: rotate(-8deg); } 45% { transform: rotate(14deg); } 60% { transform: rotate(-4deg); } 75% { transform: rotate(9deg); } }
@keyframes did-ring { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.1, 1.45); } }
@keyframes did-press { 40% { transform: scale(1.05); } }
@keyframes flash-fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes tip-pop { from { opacity: 0; transform: translate3d(calc(var(--x, 0px) - 50%), 6px, 0) scale(0.94); } }

/* Ouverture : les onglets du menu (ou du dock sur téléphone) arrivent l'un après l'autre */
.nav > button { animation: nav-in 0.34s var(--ease) 0.08s backwards; }
.nav > button:nth-of-type(2) { animation-delay: 0.11s; }
.nav > button:nth-of-type(3) { animation-delay: 0.14s; }
.nav > button:nth-of-type(4) { animation-delay: 0.17s; }
.nav > button:nth-of-type(5) { animation-delay: 0.2s; }
.nav > button:nth-of-type(6) { animation-delay: 0.23s; }
.nav > button:nth-of-type(7) { animation-delay: 0.26s; }
.nav > button:nth-of-type(8) { animation-delay: 0.29s; }
.nav > button:nth-of-type(n+9) { animation-delay: 0.32s; }
@media (max-width: 760px) { .nav > button { animation-name: nav-up; animation-timing-function: var(--spring); } }

/* Bannière d'accueil : la main salue, l'icône du serveur arrive avec un ressort puis flotte */
.wave { display: inline-block; transform-origin: 70% 80%; animation: wave 1s ease-in-out 0.45s backwards; }
/* (le flottement reste en premier et sans délai : il continue sans à-coup quand le ressort se retire) */
.tab-panel.enter .hero .guild-icon { animation: float 5s ease-in-out infinite, pop-in 0.45s var(--spring) 0.08s backwards; }

/* Titres des cartes : le petit trait coloré se déplie quand la carte arrive */
.tab-panel.enter .card > .card-head h2::before, .card.await.seen > .card-head h2::before { animation: bar-in 0.38s var(--spring) 0.12s backwards; }

/* Icônes des tuiles et des listes : elles sautent en place, en cascade (les 8 premières lignes seulement) */
:is(.tab-panel.enter, .fresh) :is(.tile-icon, .rank, .launch-icon, .dot-icon, .h-icon) {
  animation: pop-in 0.4s var(--spring) backwards; animation-delay: calc(0.1s + var(--n, 0) * 0.03s);
}
:is(.tab-panel.enter, .fresh) :nth-child(n+9) > :is(.tile-icon, .rank, .launch-icon, .dot-icon, .h-icon) { animation: none; }
/* Dates des événements à venir : la page du calendrier se rabat */
:is(.tab-panel.enter, .fresh) .up-date { transform-origin: 50% 0; animation: date-flip 0.42s var(--spring) backwards; animation-delay: calc(0.12s + var(--n, 0) * 0.04s); }

/* Chiffres : ils montent en fondu à leur premier affichage, les tendances ▲ ▼ arrivent dans leur sens */
.roll { display: inline-block; animation: num-roll 0.4s var(--ease) backwards; }
:is(.tab-panel.enter, .fresh) .delta { animation: delta-in 0.38s var(--spring) backwards; animation-delay: calc(0.2s + var(--n, 0) * 0.03s); }
:is(.tab-panel.enter, .fresh) .delta.down { animation-name: delta-in-down; }
/* Chiffre qui change sous nos yeux : petit saut (sans halo de texte, qui repeignait à chaque image) */
.tile strong.bump { animation-name: num-bump; }

/* Boutons : l'icône réagit au survol (ordinateur) et s'enfonce sous le doigt */
.btn .icon, .icon-btn .icon, .side-btn .icon, .search-trigger .icon { transition: transform 0.3s var(--spring); }
.btn:active:not(:disabled) .icon, .icon-btn:active .icon, .side-btn:active .icon { transform: scale(0.82); transition-duration: 0.08s; }
@media (hover: hover) {
  .btn:not(.big):hover:not(:disabled):not(:active) .icon { transform: scale(1.12) rotate(-6deg); }
  .icon-btn:hover:not(:active) .icon, .search-trigger:hover .icon { transform: scale(1.12) rotate(-6deg); }
  #theme-toggle:hover:not(:active) .icon { transform: rotate(25deg) scale(1.1); }
  .side-btn:hover:not(:active) .icon { transform: translateX(2px); }
  #restart:hover:not(:active) .icon { transform: rotate(-60deg); }
  .nav button .icon { transition: transform 0.3s var(--spring), color 0.18s var(--ease), filter 0.18s var(--ease); }
  .nav button:hover:not(.active) .icon { transform: translateX(2px) scale(1.08); }
  /* Boutons de l'en-tête attirés par la souris (motion.js) */
  .head-actions > .icon-btn { transition: background 0.18s var(--ease), transform 0.12s var(--ease), border-color 0.18s, translate 0.3s var(--spring); }
  .head-actions > .search-trigger { transition: border-color 0.18s, background 0.18s, translate 0.3s var(--spring); }
  /* Lignes des listes : leur icône s'anime au survol */
  :is(.feed .dot-icon, .podium .rank, .h-icon, .launch-icon, .up-date, .sec-icon, .feeds .platform) { transition: transform 0.3s var(--spring); }
  :is(.feed li:hover .dot-icon, .history li:hover .h-icon, .launch li:hover .launch-icon, .sec-item:hover .sec-icon, .feeds li:hover .platform) { transform: scale(1.12) rotate(-6deg); }
  .podium li:hover .rank { transform: scale(1.15); }
  .upcoming li:hover .up-date { transform: translateY(-2px) rotate(-4deg); }
}

/* Action réussie : un anneau vert s'élargit autour du bouton (avant : ombre animée, repeinte à chaque image) */
.btn.did { animation: did-press 0.35s var(--spring); }
.btn.did::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px var(--success); animation: did-ring 0.45s var(--ease) forwards; }

/* Choix de la période : une pastille glisse d'un bouton à l'autre (motion.js) */
.seg { position: relative; }
.seg button { z-index: 1; }
.seg-pill { position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 7px; pointer-events: none; opacity: 0; transform-origin: left;
  background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.seg-pill.ready { opacity: 1; transition: transform 0.32s var(--spring); }
.seg.has-pill button.on { background: transparent; box-shadow: none; }

/* Graphiques : le jour montré reste vif, les autres s'estompent ; la bulle glisse sans recalcul de la page */
.chart-svg.intro .bar { animation-fill-mode: backwards; }
.chart-svg .bar { transform-box: fill-box; transform-origin: 50% 100%; transition: opacity 0.18s var(--ease), transform 0.28s var(--spring); }
.chart-svg .bar.down { transform-origin: 50% 0%; }
.chart-svg.focus .bar:not(.on) { opacity: 0.38; }
.chart-svg.focus .bar.on { transform: scale(1.12, 1.05); }
.chart-tip { left: 0; transform: translate3d(calc(var(--x, 0px) - 50%), 0, 0); transition: transform 0.2s var(--ease); animation: tip-pop 0.22s var(--spring); }

/* Barres des classements : elles poussent avec transform (avant : largeur animée, page recalculée à chaque image) */
.bl-bar i { transition: none; transform-origin: left; animation: fill-in 0.55s var(--ease) backwards; animation-delay: calc(0.05s + var(--n, 0) * 35ms); }

/* Notifications : l'icône ✓ ou ✗ arrive en tournant */
.toast .icon { animation: pop-in 0.4s var(--spring) 0.06s backwards; }

/* Pastille « Nouveau » des nouveautés : trois petites ondes pour attirer l'œil */
.cl-new { position: relative; }
.cl-new::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid var(--accent); pointer-events: none;
  opacity: 0; animation: halo 2.2s ease-out 0.8s 3; }

/* Journal : nouvelle ligne surlignée par un calque qui s'efface (avant : fond animé, repeint à chaque image) */
.logs > div { position: relative; z-index: 0; }
.logs > div.new { animation: none; }
.logs > div.new::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: color-mix(in srgb, var(--accent) 25%, transparent); animation: flash-fade 1.2s var(--ease) forwards; }

/* =================== Version 6 : reflets, ondes et profondeur =================== */
/* Même règle : seulement transform et opacity. Tout ce qui suit est coupé si l'appareil demande moins d'animations. */
@keyframes ping-ring { 0% { opacity: 0.55; transform: scale(0.85); } 80%, 100% { opacity: 0; transform: scale(1.75); } }
@keyframes halo-breathe { 50% { opacity: 0.95; transform: scale(1.12); } }
@keyframes dock-lift { 0% { transform: translateY(0) scale(1); } 45% { transform: translateY(-5px) scale(1.16); } 100% { transform: translateY(-2px) scale(1.06); } }
@keyframes focus-in { from { opacity: 0; transform: scale(0.96); } }
@keyframes card-sheen { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }

/* Pastille « en ligne » et icône vive : une onde part de l'icône (verte = tout va bien) */
.tile.green .tile-icon, .tile.cyan .tile-icon { position: relative; }
.tile.green .tile-icon::before, .tile.cyan .tile-icon::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 2px solid currentColor; opacity: 0; animation: ping-ring 2.6s ease-out 1.2s infinite;
}
.tile.cyan .tile-icon::before { animation-delay: 1.9s; }

/* Icône du serveur sur l'accueil : un halo respire derrière */
.hero .guild-icon { position: relative; }
.hero .guild-icon::after {
  content: ""; position: absolute; inset: -7px; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%);
  opacity: 0.45; animation: halo-breathe 4.2s ease-in-out infinite;
}

/* Téléphone : l'icône de l'onglet ouvert saute vers le haut avec un ressort */
@media (max-width: 760px) {
  .nav button .icon { transition: transform 0.35s var(--spring); }
  .nav button.active .icon { animation: dock-lift 0.5s var(--spring) both; }
  .nav button.active { font-weight: 650; }
}

/* Ordinateur : un reflet suit la souris sur les cartes ; les lignes de liste glissent au survol */
.card > .spot {
  position: absolute; left: 0; top: 0; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%);
  opacity: 0; transition: opacity 0.35s var(--ease); will-change: transform;
}
.card:hover > .spot { opacity: 1; }
.card { isolation: isolate; }
@media (hover: hover) {
  .feed li, .podium li, .history li, .matches li, .ticket-list > li, .requests > li { transition: transform 0.28s var(--spring), background 0.18s var(--ease); }
  .feed li:hover, .podium li:hover, .history li:hover, .matches li:hover { transform: translateX(4px); }
  .card:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--border-strong)); }
  .card { transition: border-color 0.3s var(--ease); }
}

/* Clavier : l'anneau de focus apparaît avec un petit ressort */
:is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; animation: focus-in 0.22s var(--spring); }

/* Tuiles : un reflet blanc les traverse au toucher ou au clic */
.tile:active::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent); animation: card-sheen 0.55s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) :is(.tile-icon::before, .guild-icon::after, .spot) { display: none; }
}

/* Fiche membre : le pseudo et la photo passent devant la bannière colorée (la bannière en position relative les recouvrait) */
.member-head { position: relative; z-index: 1; }
/* Le pseudo et l'identifiant commencent juste sous la bannière (la photo seule la chevauche) */
.member-head { align-items: flex-start; }
.member-head .who { margin-top: 44px; padding-bottom: 0; }