:root{
  --paper:#EFEEE4;
  --paper-2:#E7E5D8;
  --ink:#20281F;
  --ink-soft:#4B5245;
  --line:#C7C3AF;
  --line-soft:#DAD7C7;
  --income:#3C6E47;
  --income-soft:#E4EEE3;
  --expense:#9C3B2E;
  --expense-soft:#F3E4DF;
  --gold:#B9862F;
  --gold-soft:#F3E7CD;
  --white:#FBFAF6;
  --radius:3px;
  --shadow:0 1px 0 rgba(32,40,31,0.06);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans',sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Fraunces',serif;
  font-weight:600;
  margin:0;
  color:var(--ink);
}
a{color:inherit;}
.num{font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums;}
::selection{background:var(--gold-soft);}

/* ---------- Site header / nav ---------- */
.site-header{
  background:var(--ink);
  color:var(--paper);
  padding:18px clamp(16px,4vw,40px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  border-bottom:4px double var(--gold);
}
.site-header .brand{display:flex; align-items:baseline; gap:12px; text-decoration:none;}
.site-header .brand .mark{
  font-family:'Fraunces',serif; font-weight:700; font-size:26px; color:var(--gold);
  letter-spacing:0.5px;
}
.site-header .brand h1{font-size:19px; color:var(--paper); font-weight:500; letter-spacing:0.2px;}
.site-nav{display:flex; gap:4px; flex-wrap:wrap; align-items:center;}
.site-nav a{
  color:#D8DACB; text-decoration:none; font-size:13px; font-weight:600;
  padding:8px 14px; border-radius:4px; letter-spacing:0.2px;
}
.site-nav a:hover{background:#33402F; color:var(--paper);}
.site-nav a.active{background:#33402F; color:var(--paper);}
.site-nav a.cta{background:var(--gold); color:var(--ink);}
.site-nav a.cta:hover{background:#CF9A41;}

/* ---------- Hero ---------- */
.hero{background:var(--white); padding:64px clamp(16px,6vw,80px) 56px; border-bottom:1px solid var(--line);}
.hero .eyebrow{font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:1.4px; font-size:11.5px; color:var(--gold); margin-bottom:14px; font-weight:600;}
.hero h1{font-size:clamp(28px,4vw,42px); max-width:720px; margin-bottom:18px; line-height:1.15;}
.hero p.lead{font-size:16px; color:var(--ink-soft); max-width:600px; margin-bottom:28px;}
.hero .cta-row{display:flex; gap:12px; flex-wrap:wrap;}

/* ---------- Buttons (liens stylés en bouton) ---------- */
.btn{
  display:inline-block; font-family:'IBM Plex Sans',sans-serif; font-weight:600;
  font-size:13.5px; padding:12px 22px; border-radius:var(--radius); text-decoration:none;
  border:1px solid var(--ink); background:var(--ink); color:var(--paper); letter-spacing:0.2px;
}
.btn:hover{background:#33402F;}
.btn.secondary{background:transparent; color:var(--ink); border:1px solid var(--line);}
.btn.secondary:hover{background:var(--paper-2);}

/* ---------- Sections ---------- */
.section{padding:56px clamp(16px,6vw,80px); max-width:1100px; margin:0 auto;}
.section h2{font-size:26px; margin-bottom:8px;}
.section .section-lead{color:var(--ink-soft); max-width:620px; margin-bottom:32px; font-size:14px;}

/* ---------- Card grid ---------- */
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px;}
.card{background:var(--white); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:6px; padding:24px;}
.card h3{font-size:17px; margin-bottom:10px;}
.card p{font-size:13.5px; color:var(--ink-soft); margin-bottom:16px;}
.card a.card-link{font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.6px; color:var(--gold); text-decoration:none; font-weight:600;}
.card a.card-link:hover{text-decoration:underline;}

/* ---------- Table of contents ---------- */
.toc{background:var(--paper-2); border:1px solid var(--line); border-radius:6px; padding:18px 22px; margin-bottom:32px;}
.toc h4{font-size:12px; text-transform:uppercase; letter-spacing:0.7px; color:var(--ink-soft); margin-bottom:10px; font-family:'IBM Plex Mono',monospace;}
.toc ol{margin:0; padding-left:18px;}
.toc li{margin-bottom:6px;}
.toc a{color:var(--ink); text-decoration:none; font-size:13.5px;}
.toc a:hover{text-decoration:underline; color:var(--gold);}

/* ---------- Articles ---------- */
.article{background:var(--white); border:1px solid var(--line); border-radius:6px; padding:28px 30px; margin-bottom:22px; scroll-margin-top:20px;}
.article .article-meta{font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.7px; color:var(--gold); margin-bottom:10px; font-weight:600;}
.article h3{font-size:19px; margin-bottom:4px;}
.article p{margin:12px 0; font-size:14px; line-height:1.65; color:var(--ink);}
.article ul{margin:12px 0; padding-left:20px;}
.article li{margin-bottom:6px; font-size:14px; line-height:1.55;}

/* ---------- Practical examples ---------- */
.example{background:var(--white); border:1px solid var(--line); border-radius:6px; padding:26px 28px; margin-bottom:26px;}
.example .example-tag{font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.7px; color:var(--ink-soft); margin-bottom:4px; font-weight:600;}
.example h3{font-size:18px; margin-bottom:14px;}
table.example-table{width:100%; border-collapse:collapse; margin:14px 0;}
table.example-table th, table.example-table td{padding:7px 10px; border-bottom:1px solid var(--line-soft); font-size:13px; text-align:left;}
table.example-table th.num, table.example-table td.num{text-align:right; font-family:'IBM Plex Mono',monospace;}
table.example-table tr.total td{font-weight:700; border-top:2px solid var(--line);}
.example .takeaway{background:var(--gold-soft); border-radius:4px; padding:12px 16px; font-size:13px; color:#5B4415; margin-top:14px;}

/* ---------- Disclaimer ---------- */
.disclaimer{background:var(--paper-2); border:1px solid var(--line); border-radius:6px; padding:16px 20px; font-size:12.5px; color:var(--ink-soft); margin-top:40px; max-width:1100px; margin-left:auto; margin-right:auto;}

/* ---------- Footer ---------- */
.site-footer{padding:24px clamp(16px,4vw,40px) 44px; font-size:11.5px; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; text-align:center; border-top:1px solid var(--line); background:var(--paper);}

@media (max-width:640px){
  .site-header{flex-direction:column; align-items:flex-start;}
  .site-nav{width:100%;}
}