:root{
  --bg: #141a22;
  --bg-panel: #1a2230;
  --bg-card: #1c2534;
  --primary: #2f6fb3;
  --primary-dark: #1F4E79;
  --accent: #2E7D32;
  --accent-light: #43a047;
  --text: #e8eaee;
  --text-dim: #a9b3c2;
  --code-bg: #1E2530;
  --code-fg: #e8eaed;
  --border: #2a3547;
  --sidebar-w: 270px;
}
*{box-sizing:border-box;}
body{
  margin:0; font-family: "Segoe UI", Calibri, Roboto, Arial, sans-serif;
  background: var(--bg); color: var(--text); line-height:1.6;
}
a{color: var(--accent-light);}
.layout{display:flex; min-height:100vh;}
.sidebar{
  width: var(--sidebar-w); flex-shrink:0; background: var(--bg-panel);
  border-right: 1px solid var(--border); position: sticky; top:0; height:100vh;
  overflow-y:auto; padding: 22px 18px;
}
.sidebar h2{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color: var(--text-dim); margin: 22px 0 8px; }
.sidebar h2:first-child{margin-top:0;}
.sidebar .chapter-title{ font-size:1.05rem; font-weight:700; color:#fff; margin-bottom:4px;}
.sidebar .chapter-sub{ font-size:0.8rem; color: var(--text-dim); margin-bottom: 18px;}
.sidebar ul{list-style:none; margin:0; padding:0;}
.sidebar li{margin-bottom:4px;}
.sidebar a.nav-link{
  display:block; padding:7px 10px; border-radius:6px; color: var(--text-dim);
  text-decoration:none; font-size:0.88rem; border-left:3px solid transparent;
}
.sidebar a.nav-link:hover{ background: rgba(255,255,255,0.04); color: var(--text); }
.sidebar a.nav-link.active{ background: rgba(47,111,179,0.18); color:#fff; border-left-color: var(--primary); font-weight:600; }
.sidebar a.nav-link.bonus{ border-left-color: var(--accent); }
.sidebar .menu-link{
  display:flex; align-items:center; gap:8px; margin-bottom:14px; padding:9px 12px;
  background: var(--primary-dark); border-radius:7px; color:#fff; text-decoration:none;
  font-size:0.85rem; font-weight:600;
}
.sidebar .menu-link:hover{ background: var(--primary); }
.sidebar .hub-link{ display:inline-block; margin-bottom:14px; font-size:0.82rem; color: var(--accent-light); text-decoration:none; }
main{ flex:1; min-width:0; padding: 36px 48px 80px; max-width: 980px; }
.page-header{ margin-bottom: 28px; border-bottom: 2px solid var(--primary-dark); padding-bottom:16px;}
.page-header .eyebrow{ color: var(--accent-light); font-size:0.85rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px;}
.page-header h1{ margin: 4px 0 8px; font-size: 1.9rem; color:#fff;}
.page-header .meta{ color: var(--text-dim); font-size:0.9rem;}
h2.section{ color:#fff; font-size:1.3rem; margin-top:38px; padding: 10px 14px; background: linear-gradient(90deg, var(--primary-dark), transparent); border-left:4px solid var(--primary); border-radius:4px;}
h3.subsection{ color: var(--accent-light); font-size:1.05rem; margin-top:22px;}
.card{
  background: var(--bg-card); border:1px solid var(--border); border-radius:10px;
  padding: 18px 22px; margin: 16px 0;
}
.card.exercise{ border-left:4px solid var(--primary); }
.card.bonus{ border-left:4px solid var(--accent); }
.card .card-title{ font-weight:700; color:#fff; margin-bottom:8px; font-size:1.02rem;}
.badge{ display:inline-block; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; padding:2px 9px; border-radius:20px; margin-left:8px; vertical-align:middle;}
.badge.defi{ background: rgba(46,125,50,0.2); color: var(--accent-light); border:1px solid var(--accent);}
.callout{
  background: rgba(47,111,179,0.1); border:1px solid var(--primary); border-left:4px solid var(--primary);
  border-radius:8px; padding:14px 18px; margin:16px 0; font-size:0.94rem;
}
.callout.warn{ background: rgba(198,40,40,0.08); border-color:#c62828; border-left-color:#c62828; }
.callout .callout-title{ font-weight:700; color:#fff; margin-bottom:6px;}
pre{
  background: var(--code-bg); color: var(--code-fg); padding:14px 18px; border-radius:8px;
  overflow-x:auto; font-family: Consolas, "Courier New", monospace; font-size:0.87rem; line-height:1.5;
  border: 1px solid #2a3546;
}
code{ font-family: Consolas, "Courier New", monospace; background: rgba(255,255,255,0.06); padding:1px 5px; border-radius:4px; font-size:0.9em;}
pre code{ background:none; padding:0; }
details{
  background: rgba(46,125,50,0.06); border:1px solid var(--accent); border-radius:8px;
  padding:10px 16px; margin: 12px 0;
}
details summary{ cursor:pointer; color: var(--accent-light); font-weight:700; font-size:0.92rem; list-style:none; }
details summary::-webkit-details-marker{ display:none; }
details summary::before{ content:"▸ "; }
details[open] summary::before{ content:"▾ "; }
details .answer-body{ margin-top:10px; padding-top:10px; border-top:1px dashed rgba(46,125,50,0.4); }
table.timing{ width:100%; border-collapse:collapse; margin:14px 0; font-size:0.88rem;}
table.timing th{ background: var(--primary-dark); color:#fff; text-align:left; padding:8px 12px;}
table.timing td{ padding:8px 12px; border-bottom:1px solid var(--border); vertical-align:top;}
table.timing tr:nth-child(even) td{ background: rgba(255,255,255,0.02); }
ul.clean{ padding-left: 22px; }
ul.clean li{ margin-bottom:6px; }
.pagenav{
  display:flex; justify-content:space-between; margin-top:48px; padding-top:20px;
  border-top:1px solid var(--border); gap:16px;
}
.pagenav a{
  flex:1; text-decoration:none; padding:14px 18px; background: var(--bg-card); border:1px solid var(--border);
  border-radius:8px; color: var(--text); transition: border-color .15s;
}
.pagenav a:hover{ border-color: var(--primary); }
.pagenav a.next{ text-align:right; }
.pagenav .dir{ display:block; font-size:0.72rem; text-transform:uppercase; color: var(--text-dim); margin-bottom:4px;}
.pagenav .label{ font-weight:600; color:#fff; }
.hub-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:18px; margin-top:24px;}
.hub-card{ background: var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:20px; text-decoration:none; color:var(--text); display:block; border-top:4px solid var(--primary);}
.hub-card.bonus{ border-top-color: var(--accent); }
.hub-card .num{ color: var(--text-dim); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em;}
.hub-card h3{ color:#fff; margin:6px 0 8px;}
.hub-card p{ color: var(--text-dim); font-size:0.88rem; margin:0;}
.menu-body{ max-width:900px; margin:0 auto; padding: 50px 30px 90px; }
.menu-header{ text-align:center; margin-bottom:40px; }
.menu-header .eyebrow{ color: var(--accent-light); font-size:0.85rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:10px;}
.menu-header h1{ font-size:2.2rem; color:#fff; margin: 6px 0 10px;}
.menu-header p{ color: var(--text-dim); max-width:560px; margin:0 auto; }
.menu-list{ display:flex; flex-direction:column; gap:12px; }
.menu-item{
  display:flex; align-items:center; gap:16px; background: var(--bg-card); border:1px solid var(--border);
  border-left:4px solid var(--primary); border-radius:10px; padding:16px 22px; text-decoration:none; color:var(--text);
  transition: border-color .15s, transform .1s;
}
.menu-item:hover{ border-color: var(--primary); transform: translateX(2px); }
.menu-item .menu-num{ font-size:0.78rem; color: var(--text-dim); min-width:26px; font-weight:700;}
.menu-item .menu-name{ font-weight:700; color:#fff; font-size:1.05rem; flex:1;}
.menu-item .menu-desc{ color: var(--text-dim); font-size:0.85rem; }
.menu-item.disabled{ opacity:0.45; cursor:default; pointer-events:none; border-left-color: var(--border); }
.menu-item.disabled .menu-name::after{ content:" — à venir"; font-weight:400; font-style:italic; color: var(--text-dim); font-size:0.8rem; }
.menu-group{ display:flex; flex-direction:column; gap:12px; background: rgba(255,255,255,0.02); border:1px dashed var(--border); border-radius:12px; padding:16px; }
.menu-group .menu-group-title{ color: var(--text-dim); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em; font-weight:700; padding-left:4px;}
.menu-group .menu-item{ border-left-color: var(--accent); }
@media (max-width: 800px){
  .layout{ flex-direction:column; }
  .sidebar{ position:relative; width:100%; height:auto; border-right:none; border-bottom:1px solid var(--border);}
  main{ padding: 24px 18px 60px; }
  .pagenav{ flex-direction:column; }
  .menu-body{ padding: 30px 16px 60px; }
}