/* learn.css — section /learn/ : articles SEO, même monde visuel que la landing
   (scope radar nuit, vert phosphore, chrome monospace), optimisé lecture longue. */
:root{
  --void:#04070a; --void2:#070c10; --scope:#0a1210; --scope2:#0d1713;
  --phos:#46d049; --phos-dim:#1d5a20; --ink:#c6d6cb; --dim:#7a8a81;
  --amber:#e8b23d; --hair:#14231a;
  --mono:"SF Mono","Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--void); color:var(--ink); font-family:var(--mono);
  font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased;
}
a{color:var(--phos); text-decoration:none;}
a:hover{text-decoration:underline;}

/* header */
.top{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:18px;
  padding:12px 22px; background:rgba(4,7,10,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--hair); font-size:13px; letter-spacing:.06em;
}
.top .brand{color:var(--ink); font-weight:700;}
.top .brand span{color:var(--phos);}
.top nav{margin-left:auto; display:flex; gap:16px; align-items:center;}
.top .cta{
  border:1px solid var(--phos); color:var(--phos); padding:6px 14px;
  letter-spacing:.12em; font-size:12px;
}
.top .cta:hover{background:var(--phos); color:var(--void); text-decoration:none;}

.wrap{max-width:760px; margin:0 auto; padding:48px 22px 80px;}
.crumb{font-size:12px; color:var(--dim); letter-spacing:.14em; text-transform:uppercase; margin-bottom:22px;}
h1{font-size:clamp(26px,4.6vw,38px); line-height:1.2; margin-bottom:10px; letter-spacing:-.01em;}
h1 em{color:inherit; font-style:normal;}
.byline{font-size:12.5px; color:var(--dim); margin-bottom:34px; letter-spacing:.05em;}
h2{font-size:21px; margin:44px 0 14px; color:var(--phos);}
h3{font-size:16.5px; margin:30px 0 10px;}
p{margin:0 0 16px; color:var(--ink);}
p b, li b{color:#eaf5ec;}
ul,ol{margin:0 0 16px 22px;}
li{margin-bottom:8px;}
.muted{color:var(--dim); font-size:14px;}

/* encadrés */
.tldr{
  border:1px solid var(--phos-dim); background:var(--scope); padding:18px 20px;
  margin:0 0 30px; font-size:15px;
}
.tldr .t{color:var(--amber); font-size:11px; letter-spacing:.22em; margin-bottom:10px;}
.radio{
  border-left:3px solid var(--phos); background:var(--scope); padding:14px 18px;
  margin:0 0 16px; font-size:15px; color:#dfeee2;
}
.radio .who{color:var(--amber); font-size:11px; letter-spacing:.18em; display:block; margin-bottom:4px;}
.note{
  border:1px solid var(--hair); background:var(--void2); padding:14px 18px;
  margin:0 0 16px; font-size:14px; color:var(--dim);
}
table{display:block; width:100%; max-width:100%; overflow-x:auto; border-collapse:collapse; margin:0 0 20px; font-size:14px;}
th,td{border:1px solid var(--hair); padding:9px 12px; text-align:left; vertical-align:top;}
th{color:var(--dim); font-size:11px; letter-spacing:.16em; text-transform:uppercase; background:var(--scope);}
td code, p code, li code{color:var(--phos); background:var(--scope); padding:1px 5px; font-size:.92em;}

/* CTA fin d'article */
.practice{
  margin:48px 0 0; border:1px solid var(--phos-dim); background:var(--scope2);
  padding:24px; text-align:left;
}
.practice h2{margin:0 0 8px;}
.practice p{color:var(--dim); font-size:14px;}
.practice a{
  display:inline-block; margin-top:12px; border:1px solid var(--phos); color:var(--phos);
  padding:11px 26px; letter-spacing:.14em; font-size:13px;
}
.practice a:hover{background:var(--phos); color:var(--void); text-decoration:none;}

/* index des articles */
.card{
  display:block; border:1px solid var(--hair); background:var(--scope);
  padding:20px 22px; margin-bottom:14px;
}
.card:hover{border-color:var(--phos-dim); background:var(--scope2); text-decoration:none;}
.card h2{margin:0 0 6px; font-size:18px;}
.card p{color:var(--dim); font-size:14px; margin:0;}
.card .tag{color:var(--amber); font-size:10px; letter-spacing:.2em;}

footer{border-top:1px solid var(--hair); padding:26px 22px; text-align:center; font-size:12px; color:var(--dim);}