/* SNT 2nde — charte rétro pixel (maths.kergot.com/snt) */
:root{
  --bg:#e8f8f0; --dots:#b5e4c8; --card:#ffffff; --card-soft:#f9fffb;
  --green:#2e8b57; --green-2:#3cb371; --pink:#ff69b4; --pink-deep:#d6388a;
  --yellow:#ffd700; --ink:#222222; --ink-soft:#4d4d4d; --blue:#1f5fa8;
  --border:3px solid #222; --shadow:4px 4px 0 #222;
  --code-bg:#211b12; --code-head:#2b2318; --code-line:#3a3121; --code-ink:#eadfc2;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;display:flex;min-height:100vh;color:var(--ink);font-family:'Inter',system-ui,sans-serif;line-height:1.65;
  background-color:var(--bg);
  background-image:radial-gradient(var(--dots) 15%,transparent 16%),radial-gradient(var(--dots) 15%,transparent 16%);
  background-size:30px 30px;background-position:0 0,15px 15px}
a{color:var(--pink-deep)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.pixel{font-family:'Press Start 2P',monospace}

/* ---------- barre latérale ---------- */
.sidebar{width:290px;flex-shrink:0;background:var(--ink);color:#e8f8f0;padding:26px 18px;position:sticky;top:0;height:100vh;overflow-y:auto;border-right:var(--border)}
.side-home{display:block;text-decoration:none;color:#e8f8f0;margin-bottom:22px}
.side-title{font-family:'Press Start 2P',monospace;font-size:.82rem;color:var(--yellow);line-height:1.6;margin:0 0 6px;text-shadow:2px 2px 0 #000}
.side-sub{font-family:'VT323',monospace;font-size:1.25rem;color:#9fdcb8;margin:0}
.nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.nav-item{display:flex;align-items:center;gap:12px;padding:8px 8px;text-decoration:none;color:#d9efe2;font-size:.9rem;border:2px solid transparent}
a.nav-item:hover{border-color:#555;background:#2d2d2d}
.nav-item.active{background:#333;border-color:var(--pink);color:#fff}
.cart{flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-family:'Press Start 2P',monospace;font-size:.62rem;background:#3a3a3a;color:#e8f8f0;border:2px solid #111;box-shadow:2px 2px 0 #000}
.nav-item.active .cart{background:var(--pink);color:#fff}
.nav-item.upcoming{opacity:.42;cursor:default}
.nav-item.upcoming small{margin-left:auto;font-family:'VT323',monospace;font-size:1rem;color:#aaa}
.side-sep{border:0;border-top:2px dashed #444;margin:14px 0}
.side-foot{margin-top:20px;font-family:'VT323',monospace;font-size:1.15rem;line-height:1.3;color:#b7d9c5}
.side-foot a{color:var(--yellow)}
.meter{height:12px;border:2px solid #111;background:#3a3a3a;margin:8px 0 4px;box-shadow:2px 2px 0 #000}
.meter span{display:block;height:100%;width:0;background:var(--yellow)}

/* ---------- contenu ---------- */
main{flex:1;min-width:0;max-width:920px;margin:0 auto;padding:36px 36px 100px}
.hero{background:linear-gradient(135deg,var(--green),var(--green-2));border:var(--border);box-shadow:var(--shadow);padding:26px 26px 22px;margin-bottom:28px;position:relative;overflow:hidden}
.hero .eyebrow{font-family:'VT323',monospace;font-size:1.35rem;color:#e8fff0;margin:0 0 8px}
.hero h1{font-family:'Press Start 2P',monospace;font-size:1.3rem;line-height:1.6;color:#fff;text-shadow:3px 3px 0 #000;margin:0 0 10px}
.hero .subtitle{color:var(--yellow);font-weight:700;margin:0;text-shadow:1px 1px 0 #000}
.pixel-flower{width:22px;height:22px;background:var(--pink);position:absolute;top:18px;right:20px;box-shadow:2px 2px 0 #000;animation:spin 5s steps(8) infinite}
.pixel-flower::before,.pixel-flower::after{content:"";position:absolute;width:22px;height:22px;background:var(--pink)}
.pixel-flower::before{top:-7px;left:0}.pixel-flower::after{top:0;left:-7px}
@keyframes spin{to{transform:rotate(360deg)}}

.content{background:var(--card);border:var(--border);box-shadow:var(--shadow);padding:10px 30px 30px}
h2{font-size:1.35rem;margin:38px 0 14px;padding-top:18px;border-top:3px dashed #cfe9da;display:flex;flex-wrap:wrap;align-items:center;gap:12px;scroll-margin-top:20px}
.content > h2:first-child,.content > p:first-child + h2{border-top:0}
.content > h2:first-child{margin-top:14px}
.phase{font-family:'Press Start 2P',monospace;font-size:.58rem;background:var(--yellow);border:2px solid #222;box-shadow:2px 2px 0 #222;padding:6px 8px;color:#222;letter-spacing:.02em}
h3{font-size:1.1rem;color:var(--green);margin:22px 0 8px}
p{margin:10px 0}
ul,ol{padding-left:24px}
li{margin:4px 0}
ol.q{list-style:none;counter-reset:q;padding-left:0}
ol.q>li{counter-increment:q;position:relative;padding-left:34px;margin:8px 0}
ol.q>li::before{content:counter(q);position:absolute;left:0;top:1px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-family:'Press Start 2P',monospace;font-size:.55rem;background:#fff;border:2px solid #222}
code{font-family:'JetBrains Mono',monospace;font-size:.87em}
:not(pre)>code{overflow-wrap:anywhere;background:#e2f3e9;border:1px solid #b9dcc7;padding:1px 5px;border-radius:3px}

/* tableaux */
.table-wrap{overflow-x:auto;margin:14px 0}
table{border-collapse:collapse;width:100%;border:2px solid #222;font-size:.93rem;background:#fff}
th,td{text-align:left;padding:9px 12px;border:1px solid #9fcfb3;vertical-align:top}
th{background:var(--green);color:#fff;border-color:#222;font-weight:700}

/* encadrés */
.box{border:2px solid #222;box-shadow:3px 3px 0 #222;padding:12px 18px;margin:18px 0}
.box-title{font-family:'VT323',monospace;font-size:1.45rem;line-height:1.1;margin:2px 0 4px}
.box.retenir{background:#fffacd;border-left:8px solid var(--yellow)}
.box.vigilance{background:#ffe9f4;border-left:8px solid var(--pink)}
.box.vigilance .box-title{color:var(--pink-deep)}
.box.info{background:#e7f1fc;border-left:8px solid var(--blue)}
.mathblock{overflow-x:auto;margin:10px 0}

/* figures */
figure{margin:16px 0;text-align:center}
figure img,figure svg{max-width:min(100%,var(--w,560px));height:auto;border:2px solid #222;box-shadow:3px 3px 0 #222;background:#fff}
figcaption{font-family:'VT323',monospace;font-size:1.2rem;color:var(--ink-soft);margin-top:6px}

/* code (style repris des pages NSI) */
.code-block{position:relative;background:var(--code-bg);margin:14px 0;overflow:hidden;border:2px solid #222;box-shadow:3px 3px 0 #222}
.code-block-head{display:flex;justify-content:space-between;align-items:center;padding:7px 12px;background:var(--code-head);border-bottom:1px solid var(--code-line)}
.code-block-label{font-size:.74rem;color:#9a8e6f;font-family:'JetBrains Mono',monospace}
.copy-btn{display:flex;align-items:center;gap:6px;background:transparent;border:1px solid #4a4030;color:#cfc3a3;font:600 .72rem 'Inter',sans-serif;padding:5px 10px;cursor:pointer}
.copy-btn:hover{background:#f3ecdd14;border-color:#6b6248}
.copy-btn.copied{border-color:#2f6e62;color:#7fc9b8}
pre{margin:0;padding:15px 16px;overflow-x:auto}
pre code{color:var(--code-ink);font-size:.88rem;line-height:1.65;background:none;border:0;padding:0}
.tok-kw{color:#e3947a}.tok-str{color:#b7cf8f}.tok-com{color:#8f8670;font-style:italic}.tok-fn{color:#8fbfd9}
.prompt{color:#7a715a}.out{color:#cfc3a3}

/* exercices */
.exercise{background:var(--card-soft);border:var(--border);box-shadow:var(--shadow);padding:18px 22px 16px;margin:22px 0;scroll-margin-top:16px}
.ex-top{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:4px}
.badge{font-family:'Press Start 2P',monospace;font-size:.62rem;background:var(--pink);color:#fff;border:2px solid #222;padding:6px 8px;box-shadow:2px 2px 0 #222}
.stage{font-family:'VT323',monospace;font-size:1.2rem;color:var(--green)}
.difficulty{margin-left:auto;white-space:nowrap}
.difficulty small{font-family:'VT323',monospace;font-size:1.1rem;color:var(--ink-soft);margin-left:4px}
.lights{display:flex;gap:2px}
.lights button{border:0;background:transparent;font-size:1.15rem;line-height:1;cursor:pointer;padding:3px;opacity:.3}
.lights button:hover,.lights button.selected{opacity:1}
.exercise h3{margin:6px 0 6px;color:var(--ink);font-size:1.12rem}
.file-hint{font-family:'VT323',monospace;font-size:1.15rem;color:var(--ink-soft);margin:10px 0 0}
details{border:2px solid #222;background:#fff;margin:10px 0}
summary{cursor:pointer;padding:8px 12px;font-weight:700;font-size:.88rem;color:var(--green);list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"▸ ";color:var(--pink-deep)}
details[open] summary::before{content:"▾ "}
details>div{padding:0 14px 10px}

/* navigation bas de page */
.page-nav{display:flex;justify-content:space-between;gap:14px;margin-top:34px;flex-wrap:wrap}
.page-nav a{text-decoration:none;background:var(--pink);color:#fff;border:2px solid #222;box-shadow:3px 3px 0 #222;padding:10px 14px;font-weight:700;font-size:.9rem;transition:transform .1s,box-shadow .1s}
.page-nav a:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #222}
.page-nav small{display:block;font-family:'VT323',monospace;font-size:1.05rem;font-weight:400}

/* pages d'accueil */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin:18px 0}
.tile{display:block;text-decoration:none;color:var(--ink);background:var(--card-soft);border:var(--border);box-shadow:var(--shadow);padding:16px 18px;transition:transform .1s,box-shadow .1s}
a.tile:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #222}
.tile h3{font-family:'Press Start 2P',monospace;font-size:.72rem;line-height:1.7;color:var(--green);margin:4px 0 8px}
.tile p{margin:0;font-size:.92rem}
.tile .tag{font-family:'VT323',monospace;font-size:1.1rem;color:var(--pink-deep)}
.tile.off{opacity:.55}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.legend span{background:#fff;border:2px solid #222;padding:4px 10px;font-size:.85rem}

footer.site{text-align:center;font-family:'VT323',monospace;font-size:1.3rem;color:#444;margin-top:30px}

@media (max-width:900px){
  body{flex-direction:column}
  .sidebar{width:100%;height:auto;position:relative;border-right:0;border-bottom:var(--border)}
  .nav-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav-item.upcoming{display:none}
  .sidebar{padding:16px 14px}
  .side-home{margin-bottom:12px}
  .nav-item{padding:5px 6px;font-size:.84rem}
  main{width:100%;max-width:100%;margin:0;padding:20px 16px 70px}
  .content{padding:6px 16px 22px}
}
@media (max-width:520px){
  .hero h1{font-size:1rem}
  .difficulty{margin-left:0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
@media print{.sidebar,.copy-btn,.lights,details,.page-nav{display:none!important}body{background:#fff}}

/* liens / téléchargements */
.links{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.retro-link{background:var(--pink);color:#fff;text-decoration:none;padding:8px 13px;border:2px solid #222;box-shadow:2px 2px 0 #222;font-weight:700;font-size:.88rem;transition:transform .1s,box-shadow .1s}
.retro-link:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 #222;background:#ff479b}
.nav-list.tools .cart{background:var(--yellow);color:#222}