/* ============================================================
   HEGEMON — landing page layout & components
   Direction « carte d'état-major » : flat, encre sur papier.
   Dépend de tokens.css (variables --hg-*). © Atlas Worlds 2026
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--hg-paper);
  color: var(--hg-ink);
  font-family: var(--hg-font-mono);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--hg-red); color: var(--hg-paper); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* ---------- Header ---------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(241,233,212,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1.5px solid var(--hg-ink);
}
header.site .bar { display: flex; align-items: center; gap: 22px; height: 64px; }
header.site .btn { padding: 9px 16px; font-size: 12.5px; box-shadow: 2px 2px 0 rgba(38,32,26,0.26); }
.brand { display: flex; align-items: center; gap: 11px; }
.brand .mark { height: 30px; width: auto; display: block; }
.brand b { font-family: var(--hg-font-display); font-size: 21px; letter-spacing: 0.02em; }
header.site nav { display: flex; gap: 26px; margin-left: 8px; }
header.site nav a {
  font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--hg-ink-soft); white-space: nowrap; padding: 4px 0; border-bottom: 2px solid transparent;
}
header.site nav a:hover { color: var(--hg-ink); border-bottom-color: var(--hg-red); }
.spacer { flex: 1; }
.live-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--hg-ink); border-radius: 2px; padding: 6px 12px;
  font-size: 12px; font-weight: 600; background: var(--hg-paper); white-space: nowrap;
}
.lang { display: inline-flex; border: 1.5px solid var(--hg-ink); border-radius: 2px; overflow: hidden; }
.lang button {
  font-family: var(--hg-font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  border: none; background: var(--hg-paper); color: var(--hg-ink-soft); padding: 6px 11px; cursor: pointer;
}
.lang button + button { border-left: 1.5px solid var(--hg-ink); }
.lang button.on { background: var(--hg-ink); color: var(--hg-paper); }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hg-green); position: relative; }
.live-dot::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--hg-green); animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0%{ transform: scale(0.6); opacity: 1; } 100%{ transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .live-dot::after { animation: none; opacity: 0; } }

.btn {
  font-family: var(--hg-font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  border: 1.5px solid var(--hg-ink); border-radius: 2px; background: var(--hg-paper); color: var(--hg-ink);
  box-shadow: 3px 3px 0 rgba(38,32,26,0.26); padding: 11px 22px; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; transition: transform .08s, box-shadow .08s;
}
.btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 rgba(38,32,26,0.3); }
.btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(38,32,26,0.26); }
.btn--primary { background: var(--hg-ink); color: var(--hg-paper); }
.btn--danger { background: var(--hg-red); color: var(--hg-paper); border-color: var(--hg-red-dark); }
.btn--lg { padding: 16px 30px; font-size: 16px; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1.5px solid var(--hg-ink); }
.hero .map { position: absolute; inset: 0; background: url("../img/map-clean.jpg") center/cover; }
.hero .veil { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(241,233,212,0.96) 0%, rgba(241,233,212,0.86) 40%, rgba(241,233,212,0.30) 72%, rgba(241,233,212,0.10) 100%); }
.hero .grain { position: absolute; inset: 0; opacity: 0.05; background-image: radial-gradient(rgba(38,32,26,0.9) 0.7px, transparent 0.7px); background-size: 5px 5px; }
.hero .inner { position: relative; padding-top: 96px; padding-bottom: 86px; }
.kicker { display:inline-flex; align-items:center; gap:14px; font-size:14px; font-weight:600; letter-spacing:0.3em; text-transform:uppercase; color: var(--hg-ink-soft); }
.kicker::before { content:""; width:46px; height:1.5px; background: var(--hg-ink); }
h1.title { font-family: var(--hg-font-display); font-size: clamp(64px, 11vw, 138px); line-height: 0.92; margin: 20px 0 0; letter-spacing: 0.01em; }
h1.title .o { display:inline-block; vertical-align: -0.07em; }
.tagline { font-size: clamp(18px,2.2vw,26px); font-weight: 700; margin: 22px 0 0; max-width: 620px; line-height: 1.25; text-wrap: balance; }
.sub { font-size: 15px; line-height: 1.6; color: var(--hg-ink-soft); margin: 18px 0 0; max-width: 560px; text-wrap: pretty; }
.cta-row { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.cta-note { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hg-ink-soft); margin: 16px 0 0; }

.hero-stats { position: relative; display: flex; gap: 0; margin-top: 56px; border: 1.5px solid var(--hg-ink); border-radius: 2px; background: rgba(241,233,212,0.7); width: fit-content; box-shadow: var(--hg-shadow); }
.hero-stats .cell { padding: 16px 30px; border-right: 1.5px solid var(--hg-ink-faint); display: flex; flex-direction: column; gap: 3px; }
.hero-stats .cell:last-child { border-right: none; }
.hero-stats .num { font-family: var(--hg-font-mono); font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.hero-stats .lbl { font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hg-ink-soft); }

/* ---------- Section frame ---------- */
section.block { padding: 84px 0; border-bottom: 1.5px solid var(--hg-ink); }
section.block.alt { background: var(--hg-paper-2); }
section.block.dark { background: var(--hg-ink); color: var(--hg-paper); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; }
.sec-head .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--hg-red); }
.sec-head h2 { font-family: var(--hg-font-display); font-size: clamp(34px,5vw,56px); margin: 10px 0 0; line-height: 1; }
.sec-head p { font-size: 14px; color: var(--hg-ink-soft); max-width: 380px; line-height: 1.5; margin: 0; text-wrap: pretty; }
.dark .sec-head h2 { color: var(--hg-paper); }
.dark .sec-head p { color: var(--hg-paper-2); }

/* ---------- Features ---------- */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feat {
  border: 1.5px solid var(--hg-ink); border-radius: 2px; background: var(--hg-paper);
  box-shadow: var(--hg-shadow); padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 14px;
}
.feat .ic { width: 52px; height: 52px; }
.feat h3 { font-family: var(--hg-font-mono); font-size: 19px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin: 0; }
.feat p { font-size: 14px; line-height: 1.55; color: var(--hg-ink-soft); margin: 0; text-wrap: pretty; }

/* ---------- Leaderboard ---------- */
.lb-layout { display: grid; grid-template-columns: 1.55fr 1fr; gap: 30px; align-items: start; }
.panel { border: 1.5px solid var(--hg-ink); border-radius: 2px; background: var(--hg-paper); box-shadow: var(--hg-shadow); }
.panel .phead { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1.5px solid var(--hg-ink); }
.panel .phead .t { font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.panel .phead .s { font-size: 11px; color: var(--hg-ink-soft); }

.lb-row { display: grid; grid-template-columns: 34px 40px 1fr auto auto; align-items: center; gap: 14px; padding: 11px 20px; border-bottom: 1.5px solid var(--hg-paper-3); }
.lb-row:last-child { border-bottom: none; }
.lb-row.me { background: var(--hg-ink); color: var(--hg-paper); }
.lb-rank { font-size: 16px; font-weight: 700; color: var(--hg-ink-soft); text-align: center; font-variant-numeric: tabular-nums; }
.lb-row.me .lb-rank { color: var(--hg-paper); }
.lb-row.top1 .lb-rank { color: var(--hg-gold); }
.lb-badge { width: 38px; height: 38px; }
.lb-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lb-name .sw { width: 12px; height: 12px; border: 1.5px solid var(--hg-ink); border-radius: 2px; flex: 0 0 auto; }
.lb-row.me .lb-name .sw { border-color: var(--hg-paper); }
.lb-name .nm { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-name .on { width: 7px; height: 7px; border-radius: 50%; background: var(--hg-green); flex: 0 0 auto; }
.lb-name .off { width: 7px; height: 7px; border-radius: 50%; background: var(--hg-ink-faint); flex: 0 0 auto; }
.lb-tier { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hg-ink-soft); }
.lb-row.me .lb-tier { color: var(--hg-paper-2); }
.lb-elo { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.lb-empty { padding: 28px 20px; font-size: 13px; color: var(--hg-ink-soft); text-align: center; }

/* online players card */
.online-list { display: flex; flex-direction: column; }
.online-row { display: flex; align-items: center; gap: 11px; padding: 10px 20px; border-bottom: 1.5px solid var(--hg-paper-3); }
.online-row:last-child { border-bottom: none; }
.online-row .av { width: 30px; height: 30px; border: 1.5px solid var(--hg-ink); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--hg-paper); flex: 0 0 auto; }
.online-row .meta { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.online-row .meta .n { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.online-row .meta .a { font-size: 11px; color: var(--hg-ink-soft); }
.online-row .st { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hg-green); }
.online-row .st.st--menu { color: var(--hg-ink-faint); }

/* ---------- Ranks ladder ---------- */
.ladder { display: grid; grid-template-columns: repeat(8, 1fr); gap: 16px; }
.rank-card { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.rank-card img { width: 96px; height: 96px; }
.rank-card .rn { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }
.rank-card .rd { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hg-paper-2); }
.dark .rank-card .rn { color: var(--hg-paper); }

/* ---------- Roadmap ---------- */
.road { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.road .item { border: 1.5px solid var(--hg-ink); border-radius: 2px; background: var(--hg-paper); box-shadow: var(--hg-shadow); padding: 24px 24px 26px; }
.road .item .tag { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; border: 1.5px solid var(--hg-ink); border-radius: 2px; padding: 3px 9px; margin-bottom: 14px; }
.road .item.now .tag { background: var(--hg-green); color: var(--hg-paper); border-color: var(--hg-green); }
.road .item.soon .tag { background: var(--hg-gold); color: var(--hg-paper); border-color: var(--hg-gold); }
.road .item h3 { font-family: var(--hg-font-mono); font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.road .item p { font-size: 13.5px; line-height: 1.55; color: var(--hg-ink-soft); margin: 0; text-wrap: pretty; }

/* ---------- CTA band ---------- */
.cta-band { padding: 92px 0; text-align: center; position: relative; overflow: hidden; }
.cta-band .map { position: absolute; inset: 0; background: url("../img/map-clean.jpg") center/cover; opacity: 0.5; }
.cta-band .veil { position: absolute; inset: 0; background: rgba(38,32,26,0.78); }
.cta-band .inner { position: relative; }
.cta-band h2 { font-family: var(--hg-font-display); font-size: clamp(40px,6vw,72px); color: var(--hg-paper); margin: 0 0 10px; }
.cta-band p { color: var(--hg-paper-2); font-size: 16px; margin: 0 0 30px; }

/* ---------- Footer ---------- */
footer.site { background: var(--hg-ink); color: var(--hg-paper); padding: 46px 0 36px; }
footer.site .row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
footer.site nav { display: flex; gap: 22px; }
footer.site nav a { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hg-paper-2); }
footer.site nav a:hover { color: var(--hg-paper); }
footer.site .copy { font-size: 12px; color: var(--hg-ink-faint); margin-top: 22px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  header.site nav { display: none; }            /* la nav (ancres) disparaît : on scrolle */
}
@media (max-width: 900px) {
  .feat-grid, .road { grid-template-columns: 1fr; }
  .lb-layout { grid-template-columns: 1fr; }
  .ladder { grid-template-columns: repeat(4, 1fr); }
  .sec-head p { max-width: none; }
}
@media (max-width: 680px) {
  .wrap { padding: 0 18px; }
  section.block { padding: 58px 0; }

  header.site .bar { gap: 12px; height: 58px; }
  header.site .btn { padding: 8px 13px; font-size: 12px; }
  .live-pill { display: none; }                 /* redondant avec les stats du hero */

  .hero .inner { padding-top: 60px; padding-bottom: 56px; }
  .kicker { letter-spacing: 0.22em; font-size: 12px; }
  h1.title { font-size: clamp(44px, 14vw, 90px); }
  .tagline { font-size: 20px; }
  .cta-row { gap: 10px; }
  .cta-row .btn { flex: 1 1 100%; justify-content: center; }   /* boutons empilés pleine largeur */

  .hero-stats { width: 100%; flex-wrap: wrap; margin-top: 38px; }
  .hero-stats .cell { flex: 1 1 50%; padding: 14px 18px; border-right: none; border-bottom: 1.5px solid var(--hg-ink-faint); }

  .ladder { grid-template-columns: repeat(3, 1fr); }
  .rank-card img { width: 76px; height: 76px; }

  footer.site .row { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (max-width: 440px) {
  .brand b { display: none; }                   /* garde juste le logo */
  .sec-head h2 { font-size: 30px; }
  .ladder { grid-template-columns: repeat(2, 1fr); }

  .lb-row { grid-template-columns: 24px 30px 1fr auto; gap: 8px; padding: 10px 12px; }
  .lb-badge { width: 30px; height: 30px; }
  .lb-tier { display: none; }                   /* on garde rang + badge + nom + elo */
  .online-row { padding: 10px 12px; }
}