:root{
  --noir:#0c0c0c; --ink:#141414; --soft:#4a4a4a; --mute:#8a8a8a;
  --bg:#f7f5f1; --card:#fff; --line:#e5e2dc; --bronze:#8c6a3f;
  --serif:"Didot","Bodoni MT",Georgia,serif; --sans:"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root{--noir:#f4f1ec;--ink:#ece8e1;--soft:#b3ada2;--mute:#8b857a;--bg:#0e0e0d;--card:#181816;--line:#2a2926;}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.7;font-size:15px}
a{color:var(--bronze)}
.l-top{border-bottom:1px solid var(--line);background:var(--card)}
.l-top-in{max-width:820px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between}
.l-brand{font-family:var(--serif);font-size:22px;letter-spacing:.28em;text-indent:.28em;color:var(--noir);text-decoration:none}
.l-lang{border:1px solid var(--noir);background:none;color:var(--ink);font:inherit;font-size:11px;letter-spacing:.14em;padding:6px 14px;cursor:pointer}
.l-lang:hover{background:var(--noir);color:var(--bg)}
.l-wrap{max-width:820px;margin:0 auto;padding:44px 24px 90px}
.l-wrap .kicker{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--bronze);margin:0 0 6px}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(28px,5vw,40px);margin:0 0 6px;color:var(--noir)}
.updated{color:var(--mute);font-size:12.5px;margin:0 0 34px}
h2{font-family:var(--serif);font-weight:400;font-size:22px;margin:36px 0 8px;color:var(--noir)}
p,li{color:var(--soft)}
ul{padding-left:20px}
.box{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--bronze);border-radius:0 10px 10px 0;padding:16px 20px;margin:18px 0;font-size:14px}
.l-nav{font-size:13px;margin:0 0 30px}
.l-nav a{margin-right:18px;text-decoration:none;border-bottom:1px solid var(--line)}
.l-foot{border-top:1px solid var(--line);margin-top:50px;padding:26px 0 0;color:var(--mute);font-size:12.5px}
:root[data-lang="fr"] .lang-en{display:none}
:root[data-lang="en"] .lang-fr{display:none}

/* ——— Mobile : cibles tactiles ≥44px, aucun débordement ——— */
@media (max-width:720px){
  body{font-size:15px}
  .l-top-in{padding:14px 16px}
  .l-brand{font-size:19px;letter-spacing:.2em;text-indent:.2em}
  .l-lang{padding:12px 18px;font-size:12px}
  .l-wrap{padding:32px 18px 70px}
  .l-nav{display:flex;flex-wrap:wrap;gap:4px 14px}
  .l-nav a{margin-right:0;padding:11px 0;display:inline-block}
  h1{font-size:clamp(25px,7vw,34px)}
  h2{font-size:20px;margin-top:30px}
  .box{padding:14px 16px}
  table{display:block;overflow-x:auto}
}