/* Bâtisseurs numériques — style « blocs » */
:root{
  --sky:#8fc8ff; --sky2:#cfe8ff;
  --grass:#5fa53a; --grass-d:#3f7a24; --dirt:#8a5a36; --dirt-d:#6b4327;
  --stone:#8b8b8b; --stone-d:#5e5e5e;
  --panel:#c6c6c6; --panel-l:#ffffff; --panel-d:#555555; --panel-in:#8b8b8b;
  --ink:#1e1e1e; --ink-soft:#3b3b3b;
  --gold:#f2c230; --diamond:#4fd6d0; --redstone:#c7342b; --wood:#b3894f; --obsidian:#3a2a55; --iron:#d8d8d8;
  --xp:#7cd83a; --xp-d:#3f8a14;
  --btn:#a0a0a0; --btn-hover:#7e98ff;
  --radius:0px;
  --pixel:'Pixelify Sans', 'Courier New', monospace;
  --text:'Nunito', system-ui, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--text); color:var(--ink); line-height:1.5;
  background:linear-gradient(var(--sky) 0, var(--sky2) 420px, #e9e2d3 420px);
  min-height:100vh;
}
a{color:#1d4fb8}
img,svg{display:block}

/* ---------- En-tête : bande d'herbe + terre ---------- */
.top{
  position:relative; padding:18px 16px 38px;
}
.top::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:30px;
  background:
    linear-gradient(var(--grass) 0 10px, transparent 10px),
    repeating-linear-gradient(90deg, var(--dirt) 0 16px, var(--dirt-d) 16px 20px, var(--dirt) 20px 34px, #9b6a43 34px 40px);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.15);
}
.top::before{ /* touffes d'herbe */
  content:""; position:absolute; left:0; right:0; bottom:18px; height:6px;
  background:repeating-linear-gradient(90deg, var(--grass-d) 0 6px, transparent 6px 14px, var(--grass-d) 14px 18px, transparent 18px 30px);
  z-index:1;
}
.top-inner{max-width:1100px; margin:0 auto; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink)}
.logo-title{font-family:var(--pixel); font-size:26px; line-height:1; text-shadow:2px 2px 0 rgba(255,255,255,.6)}
.logo-sub{font-size:13px; color:var(--ink-soft)}
nav.menu{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}

/* ---------- Boutons façon « pierre » ---------- */
.btn{
  font-family:var(--pixel); font-size:16px; color:#fff; text-decoration:none; cursor:pointer;
  background:var(--btn); padding:8px 14px; border:2px solid #000;
  box-shadow: inset 2px 2px 0 #d8d8d8, inset -2px -3px 0 #585858;
  text-shadow:2px 2px 0 #3f3f3f; display:inline-flex; align-items:center; gap:8px;
}
.btn:hover,.btn:focus-visible{background:var(--btn-hover); box-shadow: inset 2px 2px 0 #b8c6ff, inset -2px -3px 0 #4b5ea8; outline:none}
.btn.small{font-size:13px; padding:4px 10px}
.btn.green{background:#4f9a2e; box-shadow: inset 2px 2px 0 #8ed26a, inset -2px -3px 0 #2f5f1a}
.btn.red{background:#b3332b; box-shadow: inset 2px 2px 0 #e4776f, inset -2px -3px 0 #6e1d18}
.btn[aria-current="page"]{background:#6c6c6c}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* ---------- Panneaux « inventaire » ---------- */
main{max-width:1100px; margin:0 auto; padding:24px 16px 60px}
.panel{
  background:var(--panel); border:2px solid #000; padding:18px;
  box-shadow: inset 3px 3px 0 var(--panel-l), inset -3px -3px 0 var(--panel-d);
  margin-bottom:22px;
}
.panel h2, .panel h3{font-family:var(--pixel); font-weight:600; margin:0 0 10px}
.panel h2{font-size:24px}
.panel h3{font-size:19px}
.slot{
  background:var(--panel-in); border:0;
  box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #fff;
}
.muted{color:var(--ink-soft)}
.pixel{font-family:var(--pixel)}
.hero{display:grid; grid-template-columns: 1.3fr 1fr; gap:22px; align-items:center}
.hero h1{font-family:var(--pixel); font-size:34px; line-height:1.1; margin:0 0 10px}
@media (max-width:780px){ .hero{grid-template-columns:1fr} .hero h1{font-size:27px} }

/* ---------- Carte des modules ---------- */
.module{margin-bottom:26px}
.module-head{display:flex; align-items:center; gap:12px; margin:0 0 10px; flex-wrap:wrap}
.module-num{font-family:var(--pixel); color:#fff; padding:4px 10px; border:2px solid #000; text-shadow:2px 2px 0 rgba(0,0,0,.4)}
.m-grass{background:var(--grass)} .m-stone{background:var(--stone)} .m-wood{background:var(--wood)}
.m-redstone{background:var(--redstone)} .m-diamond{background:#2aa7a1}
.module-head h2{font-family:var(--pixel); margin:0; font-size:22px}
.module-head .sub{color:var(--ink-soft)}
.lessons{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:12px}
.lesson{
  display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--ink);
  background:var(--panel); border:2px solid #000; padding:10px;
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #555;
}
.lesson:hover,.lesson:focus-visible{background:#d9e2ff; outline:none}
.lesson .n{font-family:var(--pixel); font-size:13px; color:var(--ink-soft)}
.lesson .t{font-weight:700; font-size:14px; line-height:1.25}
.lesson .ico{flex:none; width:44px; height:44px; padding:4px}
.tag{display:inline-block; font-family:var(--pixel); font-size:12px; padding:1px 6px; border:2px solid #000; background:#fff}
.tag.done{background:var(--xp); }
.tag.xp{background:var(--gold)}

/* ---------- Page cours ---------- */
.lesson-hero{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.lesson-hero .big-ico{width:88px; height:88px; padding:8px}
.lesson-hero h1{font-family:var(--pixel); font-size:30px; margin:4px 0}
.cols{display:grid; grid-template-columns:1fr 1fr; gap:22px}
@media (max-width:780px){ .cols{grid-template-columns:1fr} }
ul.check{list-style:none; padding:0; margin:0}
ul.check li{padding-left:24px; position:relative; margin:6px 0}
ul.check li::before{content:""; position:absolute; left:0; top:6px; width:12px; height:12px; background:var(--xp); border:2px solid #000}
.steps{display:grid; gap:8px}
.step{display:grid; grid-template-columns:80px 1fr; gap:10px; align-items:start}
.step .time{font-family:var(--pixel); background:#fff; border:2px solid #000; text-align:center; padding:2px}
.ref{border-left:6px solid var(--grass); background:#e8e8e8; padding:8px 10px; margin:8px 0}
.ref.p5{border-color:var(--wood)} .ref.x{border-color:var(--diamond)} .ref.p4{border-color:var(--stone)}
.ref .champ{font-family:var(--pixel); font-size:13px}
.ref .v{font-size:11px; color:var(--ink-soft)}
.defi{background:#2b2b2b; color:#fff; border:2px solid #000; padding:14px; box-shadow: inset 3px 3px 0 #555, inset -3px -3px 0 #111}
.defi .pixel{color:var(--gold)}
.pager{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}

/* ---------- Code ---------- */
.cmd{margin:10px 0}
.cmd-head{display:flex; align-items:center; gap:8px; justify-content:space-between; flex-wrap:wrap}
.cmd-title{font-weight:800}
pre.code{
  margin:6px 0 4px; background:#111; color:#e6e6e6; padding:12px 14px; overflow-x:auto;
  font-family:'JetBrains Mono', Consolas, monospace; font-size:14px; border:2px solid #000;
  box-shadow: inset 2px 2px 0 #333;
}
pre.code .slash{color:var(--gold)}
pre.code .kw{color:#ff9d5c} pre.code .str{color:#9be27b} pre.code .num{color:#79d7ff} pre.code .fn{color:#d6a8ff}
.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
input.search, input.field, select.field{
  font-family:var(--text); font-size:16px; padding:8px 10px; border:2px solid #000; background:#fff;
  box-shadow: inset 2px 2px 0 #aaa; width:100%;
}
label.lbl{font-family:var(--pixel); font-size:14px; display:block; margin:8px 0 4px}

/* ---------- Élève : barre d'XP, inventaire ---------- */
.xpbar{height:18px; background:#1b1b1b; border:2px solid #000; position:relative}
.xpbar > span{position:absolute; left:0; top:0; bottom:0; background:repeating-linear-gradient(90deg, var(--xp) 0 18px, var(--xp-d) 18px 20px)}
.xpnum{font-family:var(--pixel); color:var(--xp-d); font-size:22px; text-shadow:1px 1px 0 #fff}
.inventory{display:grid; grid-template-columns:repeat(auto-fill, minmax(76px,1fr)); gap:6px}
.inv-slot{aspect-ratio:1; padding:8px; position:relative}
.inv-slot.locked svg{opacity:.18; filter:grayscale(1)}
.inv-slot .qty{position:absolute; right:4px; bottom:2px; font-family:var(--pixel); color:#fff; text-shadow:2px 2px 0 #3f3f3f; font-size:13px}
.inv-slot[title]{cursor:help}
.rank{display:flex; align-items:center; gap:14px}
.rank-block{width:56px; height:56px; border:2px solid #000; box-shadow: inset 4px 4px 0 rgba(255,255,255,.35), inset -4px -4px 0 rgba(0,0,0,.35)}
.mat-wood{background:var(--wood)} .mat-stone{background:var(--stone)} .mat-iron{background:var(--iron)}
.mat-gold{background:var(--gold)} .mat-diamond{background:var(--diamond)} .mat-obsidian{background:var(--obsidian)}

/* ---------- Tableaux prof ---------- */
.table-wrap{overflow-x:auto}
table.grid{border-collapse:collapse; width:100%; background:#fff; font-size:14px}
table.grid th, table.grid td{border:2px solid #000; padding:6px 8px; text-align:left; vertical-align:middle}
table.grid th{font-family:var(--pixel); font-weight:500; background:#dcdcdc; position:sticky; top:0}
table.grid td.c{text-align:center}
.cell-badge{width:28px; height:28px; margin:auto; cursor:pointer; border:2px solid transparent; padding:1px}
.cell-badge.off svg{opacity:.15; filter:grayscale(1)}
.cell-badge:hover{border-color:#1d4fb8}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:end}
.row > *{flex:1 1 160px}
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:#2b2b2b; color:#fff; border:2px solid #000; padding:10px 16px; font-family:var(--pixel); z-index:50; display:none}
.toast.show{display:block}
.code-card{font-family:var(--pixel); font-size:20px; letter-spacing:1px; background:#fff; border:2px dashed #000; padding:8px; text-align:center}
.hidden{display:none !important}
footer.foot{text-align:center; font-size:13px; color:var(--ink-soft); padding:18px}

/* ---------- Impression des codes élèves ---------- */
@media print{
  body{background:#fff}
  .top, nav, .no-print, footer.foot{display:none !important}
  .print-cards{display:grid !important; grid-template-columns:repeat(3,1fr); gap:10px}
  .print-card{border:2px dashed #000; padding:10px; break-inside:avoid; font-family:var(--text)}
}
.print-cards{display:none}