/* ============================================================
   DEAD HARBOUR - charte "Quai de nuit" - couche globale
   16-17/09/2026. Chargee EN DERNIER sur chaque page pour ecraser
   les palettes locales heritees (rouge #ff4f4f, orange #ffb84f...).
   Regle de la charte : acide + blanc os sur marine. Le ROUGE est
   reserve aux alertes, jamais a un bouton ou un titre.
   ============================================================ */
:root {
  --dh-acid: #9dff3a;
  --dh-acid-dim: #7fd42c;
  --dh-bone: #efeadb;
  --dh-navy: #05090d;
  --dh-panel: #0b1219;
  --dh-panel-2: #0e1720;
  --dh-line: rgba(157, 255, 58, .20);
  --dh-line-soft: rgba(239, 234, 219, .10);
  --dh-muted: rgba(239, 234, 219, .58);
  --dh-alert: #ff4d4d; /* alertes uniquement */
  --dh-nav-h: 62px;
  --dh-wrap: 1100px;
  --dh-radius: 10px;
}

/* ---------- fond / texte ---------- */
body {
  background: var(--dh-navy) !important;
  color: var(--dh-bone) !important;
  font-family: Inter, system-ui, "Segoe UI", Roboto, Arial, sans-serif !important;
}
::selection { background: rgba(157, 255, 58, .28); }

/* ---------- barre de navigation : geometrie identique partout ---------- */
nav.nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  height: var(--dh-nav-h) !important;
  min-height: var(--dh-nav-h) !important;
  padding: 0 20px !important;
  background: rgba(5, 9, 13, .88) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid var(--dh-line) !important;
  display: flex !important;
  align-items: center !important;
}
nav.nav > .nav-in,
nav.nav > .nav-inner,
nav.nav > .wrap {
  width: 100% !important;
  max-width: var(--dh-wrap) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
}

/* marque : meme rendu quel que soit le nom de classe de la page */
nav.nav .brand,
nav.nav .logo,
nav.nav .brand-name {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  letter-spacing: .10em !important;
  color: var(--dh-bone) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer;
}
nav.nav .brand span,
nav.nav .logo span,
nav.nav .brand-name span { color: var(--dh-acid) !important; }
nav.nav .brand-skull { color: var(--dh-acid) !important; font-size: 15px !important; }

/* liens : meme taille, meme espacement, meme etat actif */
nav.nav .nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
}
nav.nav .nav-links a {
  display: inline-flex !important;
  align-items: center !important;
  height: 34px !important;
  padding: 0 11px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  color: var(--dh-muted) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color .15s, background .15s;
}
nav.nav .nav-links a:hover { color: var(--dh-bone) !important; background: rgba(239, 234, 219, .06) !important; }
nav.nav .nav-links a.active,
nav.nav .nav-links a[aria-current="page"] {
  color: var(--dh-acid) !important;
  background: rgba(157, 255, 58, .10) !important;
}

/* ---------- boutons : une seule geometrie ---------- */
.btn, .dh-btn, .nav-cta, .join-btn, .cta-box .btn, button.tab, .tab {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 44px !important;
  padding: 0 20px !important;
  border-radius: var(--dh-radius) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.btn, .dh-btn, .cta-box .btn, .join-btn, .nav-cta {
  background: var(--dh-acid) !important;
  border: 1px solid var(--dh-acid) !important;
  color: #0b1405 !important;
}
.btn:hover, .dh-btn:hover, .cta-box .btn:hover, .join-btn:hover, .nav-cta:hover {
  background: var(--dh-acid-dim) !important;
  border-color: var(--dh-acid-dim) !important;
  transform: translateY(-1px);
}
.dh-btn--ghost, .btn.ghost, .btn-secondary {
  background: transparent !important;
  border: 1px solid var(--dh-line) !important;
  color: var(--dh-bone) !important;
}
.dh-btn--ghost:hover, .btn.ghost:hover, .btn-secondary:hover {
  border-color: var(--dh-acid) !important;
  background: rgba(157, 255, 58, .08) !important;
}

/* une rangee de boutons = des boutons de largeur EGALE */
.dh-row { display: flex !important; gap: 12px !important; flex-wrap: wrap !important; align-items: stretch !important; }
.dh-row > * { flex: 1 1 0 !important; min-width: 150px !important; }

/* onglets (classement) : plus de rouge */
.tab {
  height: 40px !important;
  background: var(--dh-panel) !important;
  border: 1px solid var(--dh-line-soft) !important;
  color: var(--dh-muted) !important;
}
.tab:hover { border-color: var(--dh-line) !important; color: var(--dh-bone) !important; }
.tab.active {
  background: var(--dh-acid) !important;
  border-color: var(--dh-acid) !important;
  color: #0b1405 !important;
}

/* ---------- surfaces ---------- */
.board, .legend, .card, .panel, .cta-box {
  background: var(--dh-panel) !important;
  border: 1px solid var(--dh-line-soft) !important;
  border-radius: 12px !important;
}
.cta-box { border-color: var(--dh-line) !important; background: linear-gradient(135deg, var(--dh-panel-2), var(--dh-panel)) !important; }
.row { border-bottom: 1px solid var(--dh-line-soft) !important; }
.row.head { background: var(--dh-navy) !important; color: var(--dh-muted) !important; }
.row .name { color: var(--dh-bone) !important; }
.row .val { color: var(--dh-bone) !important; }
.row .wins, .row.top1 .rank { color: var(--dh-acid) !important; }
.row.top2 .rank { color: var(--dh-bone) !important; }
.row.top3 .rank { color: var(--dh-muted) !important; }
.row .name .tier { background: rgba(157, 255, 58, .12) !important; color: var(--dh-acid) !important; }
.row .name .tier.vip { background: rgba(157, 255, 58, .20) !important; color: var(--dh-acid) !important; }

/* ---------- titres : l'accent est acide, jamais orange ni rouge ---------- */
h1, h2, h3 { color: var(--dh-bone) !important; }
h1 em, h1 span, h2 em, h2 span, .hero-title .red, .accent { color: var(--dh-acid) !important; font-style: normal !important; }
.sub, .meta, .foot, .empty, .legend { color: var(--dh-muted) !important; }
.legend strong { color: var(--dh-bone) !important; }
a { color: var(--dh-acid); }

/* bande hazard reutilisable */
.dh-hazard {
  height: 5px; border-radius: 3px; opacity: .7;
  background: repeating-linear-gradient(135deg, var(--dh-acid) 0 9px, var(--dh-navy) 9px 18px);
}

/* ---------- pied de page commun ---------- */
.dh-foot {
  max-width: var(--dh-wrap);
  margin: 48px auto 0;
  padding: 22px 20px 40px;
  border-top: 1px solid var(--dh-line-soft);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 12.5px; color: var(--dh-muted);
}
.dh-foot nav { display: flex; flex-wrap: wrap; gap: 14px; }
.dh-foot a { color: var(--dh-muted); text-decoration: none; }
.dh-foot a:hover { color: var(--dh-acid); }

@media (max-width: 860px) {
  nav.nav { height: auto !important; min-height: var(--dh-nav-h) !important; padding: 10px 16px !important; }
  nav.nav > .nav-in, nav.nav > .nav-inner, nav.nav > .wrap { flex-wrap: wrap !important; gap: 10px !important; }
  nav.nav .nav-links { flex-wrap: wrap !important; gap: 2px !important; }
  nav.nav .nav-links a { height: 30px !important; padding: 0 9px !important; font-size: 12.5px !important; }
}

/* ---------- bandeau d'accueil : les 3 boutons a la MEME largeur ---------- */
.hero-actions { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; align-items: stretch !important; }
.hero-actions > .btn, .hero-actions > a { flex: 0 1 190px !important; min-width: 190px !important; }
.btn-ghost { background: transparent !important; border: 1px solid var(--dh-line) !important; color: var(--dh-bone) !important; }
.btn-ghost:hover { border-color: var(--dh-acid) !important; background: rgba(157, 255, 58, .08) !important; }
.btn-discord { background: transparent !important; border: 1px solid var(--dh-line) !important; color: var(--dh-bone) !important; }

/* le bouton de connexion Steam ne doit jamais passer sur deux lignes */
#dh-acct .dh-btn { white-space: nowrap !important; }
@media (max-width: 1180px) { nav.nav .nav-links a { padding: 0 8px !important; font-size: 13px !important; } }