/* ============================================
   FANTAX SURVIE — style pixel/blocky partagé
   ============================================ */
:root{
  --grass:#5fa743;
  --grass-light:#7ec850;
  --dirt:#7a5a3a;
  --dirt-dark:#4a3624;
  --stone:#2b2f36;
  --stone-light:#3a4049;
  --sky:#1b2733;
  --night:#11161d;
  --gold:#ffcb3d;
  --diamond:#5ad4e6;
  --redstone:#e8473f;
  --paper:#e9e4d6;
  --shadow:rgba(0,0,0,.4);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'VT323',monospace;font-size:20px;
  background:var(--night);color:var(--paper);line-height:1.4;
  overflow-x:hidden;image-rendering:pixelated;
}
h1,h2,h3,.pixel{font-family:'Press Start 2P',monospace;line-height:1.6}

/* Fond */
.sky{position:fixed;inset:0;z-index:-3;
  background:linear-gradient(180deg,#0d1320 0%,#1b2733 45%,#243447 100%)}
.stars{position:fixed;inset:0;z-index:-2;overflow:hidden}
.star{position:absolute;width:3px;height:3px;background:#fff;opacity:.7;
  animation:twinkle 4s infinite ease-in-out}
@keyframes twinkle{0%,100%{opacity:.2}50%{opacity:.9}}
.ground{position:fixed;left:0;right:0;bottom:0;height:90px;z-index:-1;
  background:repeating-linear-gradient(90deg,var(--grass) 0 32px,var(--grass-light) 32px 64px);
  border-top:6px solid #3f7a2c;
  box-shadow:inset 0 -70px 0 var(--dirt), inset 0 -76px 0 var(--dirt-dark);opacity:.55}

/* Bloc 3D */
.block-card{position:relative;background:var(--stone);border:4px solid #000;
  box-shadow:inset -4px -4px 0 rgba(0,0,0,.45),inset 4px 4px 0 rgba(255,255,255,.07),6px 6px 0 var(--shadow)}

.wrap{max-width:1000px;margin:0 auto;padding:0 20px}

/* Nav */
nav{position:sticky;top:0;z-index:50;background:rgba(17,22,29,.92);
  border-bottom:4px solid #000;backdrop-filter:blur(4px)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;
  max-width:1000px;margin:0 auto;padding:14px 20px;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:40px;height:40px;image-rendering:pixelated;border:2px solid #000}
.brand span{font-family:'Press Start 2P';font-size:13px;color:var(--grass-light)}
.nav-links{display:flex;gap:10px;flex-wrap:wrap}
.nav-links a{font-family:'Press Start 2P';font-size:9px;color:var(--paper);
  text-decoration:none;padding:8px 10px;border:2px solid transparent;transition:.15s}
.nav-links a:hover{color:var(--gold);border-color:var(--gold);transform:translateY(-2px)}
.nav-links a.active{color:var(--grass-light);border-color:var(--grass-light)}

/* Page header */
.page-head{text-align:center;padding:60px 20px 30px}
.page-head h1{font-size:clamp(18px,4.5vw,32px);color:#fff;
  text-shadow:4px 4px 0 var(--dirt-dark);margin-bottom:16px}
.page-head h1 .accent{color:var(--grass-light)}
.page-head p{font-size:23px;color:#b9c4cf;max-width:600px;margin:0 auto}
.back-link{display:inline-flex;align-items:center;gap:8px;font-family:'Press Start 2P';
  font-size:9px;color:var(--diamond);text-decoration:none;margin-top:20px;
  border:2px solid var(--diamond);padding:8px 12px;transition:.15s}
.back-link:hover{background:var(--diamond);color:var(--night)}

section{padding:30px 0}
.section-title{font-size:clamp(13px,3vw,18px);color:#fff;margin-bottom:8px;
  text-shadow:3px 3px 0 var(--dirt-dark)}
.section-sub{color:#8a97a3;font-size:21px;margin-bottom:28px}

/* Badges */
.badge{display:inline-block;font-family:'Press Start 2P';font-size:8px;padding:5px 8px;
  border:2px solid #000;vertical-align:middle}
.badge.req{background:#3a1a1a;color:var(--redstone)}
.badge.opt{background:#2a2f1a;color:var(--gold)}
.badge.ver{background:var(--stone-light);color:var(--diamond)}

/* Étapes guide */
.step-list{display:flex;flex-direction:column;gap:18px}
.guide-step{padding:24px;display:flex;gap:20px;align-items:flex-start}
.guide-step .n{font-family:'Press Start 2P';font-size:18px;color:var(--gold);
  flex-shrink:0;min-width:40px}
.guide-step .body h3{font-size:12px;color:#fff;margin-bottom:10px}
.guide-step .body p{font-size:20px;color:#9aa6b1;margin-bottom:8px}
.guide-step .body a{color:var(--diamond);word-break:break-word}
.guide-step .body strong{color:var(--paper)}
.guide-step .body code{background:var(--night);padding:2px 8px;border:1px solid #000;
  font-family:'VT323';font-size:18px;color:var(--grass-light)}

/* Cartes mod/pack */
.dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.dl-card{padding:24px;display:flex;flex-direction:column;gap:12px}
.dl-card .top{display:flex;align-items:center;gap:14px}
.dl-card .ico{font-size:36px;line-height:1}
.dl-card h3{font-size:13px;color:#fff}
.dl-card .meta{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0}
.dl-card p{font-size:19px;color:#9aa6b1;flex:1}
.dl-btn{display:inline-block;text-align:center;font-family:'Press Start 2P';font-size:10px;
  text-decoration:none;padding:12px;border:3px solid #000;background:var(--grass);
  color:#06210a;transition:.15s;box-shadow:3px 3px 0 var(--shadow)}
.dl-btn:hover{transform:translateY(-2px);box-shadow:5px 5px 0 var(--shadow)}
.dl-btn.gold{background:var(--gold)}
.dl-btn.diamond{background:var(--diamond)}
.dl-btn.ghost{background:transparent;color:var(--paper);border-color:var(--stone-light)}
.dl-btn.ghost:hover{border-color:var(--gold);color:var(--gold)}

/* Encadré info */
.note{padding:18px 22px;border-left:6px solid var(--gold);background:var(--stone);
  margin:20px 0;font-size:20px;color:#c4cdd6}
.note.warn{border-left-color:var(--redstone)}
.note strong{color:var(--gold)}
.note.warn strong{color:var(--redstone)}

footer{text-align:center;padding:40px 20px 120px;color:#6b7681;font-size:18px}
footer .pixel{font-size:8px;color:#4f5963;margin-top:10px}

*:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}
@media(max-width:600px){.guide-step{flex-direction:column;gap:10px}}