/* ============================================================
   InfernoDofus — v2.css (chargé sur toutes les pages, après style.css)
   Statut serveur coloré, états vides, bandeau, éléments communs.
   ============================================================ */

:root {
  --status-green:  #44ff88;
  --status-orange: #ffaa22;
  --status-red:    #ff3b3b;
}

/* ---------- Pastille de statut (nav, carte, HQ…) ---------- */
.status-green  { --st: var(--status-green); }
.status-orange { --st: var(--status-orange); }
.status-red    { --st: var(--status-red); }

.nav-online.status-green  .online-dot,
.nav-online.status-orange .online-dot,
.nav-online.status-red    .online-dot,
.server-badge .online-dot { background: var(--st); box-shadow: 0 0 8px var(--st); }
.nav-online.status-red, .nav-online.status-orange { color: var(--st); }
.nav-online.status-red .online-dot { animation: pulse-red 1.4s ease-in-out infinite; }
@keyframes pulse-red {
  0%, 100% { opacity: 1; box-shadow: 0 0 10px var(--status-red); }
  50%      { opacity: 0.45; box-shadow: 0 0 2px var(--status-red); }
}

.server-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 100px;
  font-family: var(--font-heading); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--st); border: 1px solid var(--st); background: rgba(0,0,0,0.35);
}
.server-badge .online-dot { width: 8px; height: 8px; border-radius: 50%; }

/* Badge du hero + statistique « En ligne » */
.hero-badge.status-red, .hero-badge.status-orange { color: var(--st); border-color: var(--st); background: rgba(0,0,0,0.3); }
.hero-badge.status-red .badge-dot, .hero-badge.status-orange .badge-dot { background: var(--st); box-shadow: 0 0 6px var(--st); }
.stat-status.status-red .stat-value, .stat-status.status-orange .stat-value {
  background: none; -webkit-text-fill-color: var(--st); color: var(--st);
}
.stat-status.status-red .stat-label { color: var(--status-red); }

/* Bandeau d'information (réglé dans le HQ) */
.server-banner {
  position: relative; top: 68px; z-index: 900; text-align: center; padding: 10px 20px;
  font-family: var(--font-heading); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--text-white);
  background: linear-gradient(90deg, rgba(155,45,202,0.25), rgba(255,106,0,0.25));
  border-bottom: 1px solid var(--border-arcane);
}
.server-banner.status-red { background: linear-gradient(90deg, rgba(255,59,59,0.22), rgba(155,45,202,0.2)); }

/* Lien HQ dans la nav */
#nav-hq { color: var(--text-gold); }

/* ---------- États vides ---------- */
.empty-panel {
  text-align: center; padding: 48px 24px; background: var(--bg-panel); border: 1px dashed var(--border-arcane);
  border-radius: 8px; margin-bottom: 32px;
}
.empty-panel h3 { font-family: var(--font-heading); color: var(--text-gold); margin-bottom: 8px; }
.empty-panel p  { color: var(--text-muted); }
.empty-icon { font-size: 2.6rem; display: block; margin-bottom: 12px; opacity: 0.8; }
.empty-state small { display: block; margin-top: 6px; font-size: 0.78rem; opacity: 0.8; }
.empty-mini { padding: 16px; border: 1px dashed var(--border-subtle); border-radius: 6px; text-align: center; color: var(--text-muted); margin-bottom: 12px; }
.empty-mini small { display: block; margin-top: 4px; font-size: 0.8rem; }

.notice-panel {
  max-width: 900px; margin: 0 auto 32px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 16px 20px; background: var(--bg-panel); border: 1px solid var(--border-arcane); border-left: 3px solid var(--st, var(--arcane));
  border-radius: 8px; color: var(--text-muted);
}
.notice-panel p { flex: 1; min-width: 240px; }

.staff-hint {
  background: rgba(232,200,122,0.07); border: 1px solid rgba(232,200,122,0.3); border-left: 3px solid var(--text-gold);
  border-radius: 6px; padding: 10px 14px; color: var(--text-gold); font-size: 0.9rem; margin-bottom: 20px;
}
.staff-hint a { color: var(--lava-bright); text-decoration: underline; }

/* ---------- Wiki ---------- */
.wiki-card-empty { opacity: 0.6; }
.wiki-card-empty:hover { opacity: 1; }
.wiki-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.wiki-toc a {
  font-family: var(--font-heading); font-size: 0.7rem; letter-spacing: 0.08em; padding: 6px 12px; border-radius: 100px;
  border: 1px solid var(--border-arcane); color: var(--arcane-bright) !important; background: rgba(155,45,202,0.08);
}
.wiki-toc a:hover { background: rgba(155,45,202,0.2); }
.wiki-article.is-draft { border-left-color: var(--text-gold); opacity: 0.85; }
.draft-tag { font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bg-void); background: var(--text-gold); padding: 2px 8px; border-radius: 100px; vertical-align: middle; }
.wiki-updated { font-size: 0.75rem; color: var(--text-muted) !important; text-align: right; margin-top: 12px; }

/* ---------- Carte : serveur hors ligne ---------- */
.map-area.map-offline .map-zone { filter: grayscale(0.7) brightness(0.6); }
.map-offline-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 20;
  background: rgba(6,4,8,0.45); pointer-events: none;
}
.map-online-count.status-red, .map-online-count.status-orange { color: var(--st); }
.map-panel-badge.status-red, .map-panel-badge.status-orange { color: var(--st); border-color: var(--st); background: rgba(0,0,0,0.3); }

/* ---------- Composants communs profil / HQ ---------- */
.profile-card {
  background: var(--bg-panel); border: 1px solid var(--border-arcane); border-radius: 8px; padding: 24px;
  margin-bottom: 20px; position: relative; scroll-margin-top: 90px;
}
.profile-card h3 { font-family: var(--font-heading); color: var(--text-gold); font-size: 1rem; margin-bottom: 14px; letter-spacing: 0.04em; }
.pstat { background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 18px 12px; text-align: center; }
.pstat-val {
  display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; line-height: 1.1;
  background: linear-gradient(135deg, var(--lava-bright), var(--arcane-bright));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.pstat-lbl { font-family: var(--font-heading); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.pstat-alert { border-color: var(--status-red); }
.pstat-alert .pstat-val { background: none; -webkit-text-fill-color: var(--status-red); }

.kv-list { list-style: none; margin-bottom: 14px; }
.kv-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--border-subtle); font-size: 0.92rem; }
.kv-list li:last-child { border-bottom: none; }
.kv-list span { color: var(--text-light); }
.kv-list small { color: var(--text-muted); margin-left: 6px; font-size: 0.78rem; }
.kv-list strong { color: var(--text-white); font-weight: 600; text-align: right; }

.ticket-status { font-family: var(--font-heading); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 10px; border-radius: 100px; border: 1px solid; }
.ticket-nouveau  { color: var(--crystal-glow); border-color: rgba(51,170,255,0.4); }
.ticket-en_cours { color: var(--lava-bright);  border-color: rgba(255,170,34,0.4); }
.ticket-traite   { color: var(--status-green); border-color: rgba(68,255,136,0.4); }
.ticket-archive  { color: var(--text-muted);   border-color: var(--border-subtle); }

.btn-small { padding: 9px 18px; font-size: 0.7rem; }
.btn-danger {
  font-family: var(--font-heading); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 18px;
  background: transparent; color: var(--status-red); border: 1px solid rgba(255,59,59,0.5); border-radius: 4px; cursor: pointer; transition: var(--transition);
}
.btn-danger:hover { background: rgba(255,59,59,0.1); box-shadow: 0 0 14px rgba(255,59,59,0.3); }
.btn-mini {
  display: inline-block; font-family: var(--font-heading); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 3px; border: 1px solid var(--border-arcane); background: transparent; color: var(--text-light);
  cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.btn-mini:hover { border-color: var(--arcane-bright); color: var(--arcane-bright); }
.btn-mini-ok { border-color: rgba(68,255,136,0.4); color: var(--status-green); }
.btn-mini-danger { border-color: rgba(255,59,59,0.4); color: var(--status-red); }
.btn-mini-danger:hover { border-color: var(--status-red); color: var(--status-red); background: rgba(255,59,59,0.08); }

.settings-block { border: 1px solid var(--border-subtle); border-radius: 6px; margin-bottom: 12px; overflow: hidden; }
.settings-block summary {
  cursor: pointer; padding: 12px 16px; font-family: var(--font-heading); font-size: 0.78rem; letter-spacing: 0.08em;
  color: var(--text-white); background: rgba(155,45,202,0.06); list-style: none;
}
.settings-block summary::-webkit-details-marker { display: none; }
.settings-block summary::after { content: '▾'; float: right; color: var(--arcane-bright); }
.settings-block[open] summary::after { content: '▴'; }
.settings-block > form, .settings-block > ul, .settings-block > pre { margin: 16px; }

@media (max-width: 900px) {
  .server-banner { top: 68px; font-size: 0.72rem; }
}