/* Feuille commune aux pages secondaires. Memes jetons que index.html.
   fonts.css n'est plus importe ici : un @import serialise les requetes
   (HTML -> pages.css -> fonts.css -> woff2). Les pages le chargent
   elles-memes en <link>, en parallele de cette feuille. */
:root{
  --paper:#FBF8F3; --paper-2:#F4EFE6; --card:#FFFFFF;
  --ink:#171310; --ink-2:#4E4740; --ink-3:#6B6259;
  --rule:#E2D9CB; --hi:#A84403; --hi-bg:#FBEBDC; --hi-line:#EFCFAC;
  --sans:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  --disp:'Archivo',var(--sans);
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
/* Version sombre. Le site est clair par defaut et ne suit pas le reglage du
   systeme : cette palette ne s'applique que si le visiteur a clique sur le
   bouton de bascule, qui pose data-theme="dark" sur <html>. */
:root[data-theme="dark"]{
    --paper:#14110E; --paper-2:#1C1815; --card:#1E1A16;
    --ink:#F2EDE5; --ink-2:#BCB3A8; --ink-3:#978E81;
    --rule:#332C25; --hi:#F0A05A; --hi-bg:#2A1C10; --hi-line:#4A3320;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:70px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
.wrap{max-width:720px;margin:0 auto;padding:0 22px}
a{color:var(--hi);text-underline-offset:3px}
.bar{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--rule)}
.bar-in{display:flex;align-items:center;gap:16px;max-width:1040px;margin:0 auto;padding:12px 22px;flex-wrap:wrap}
.mark{font-family:var(--disp);font-weight:900;letter-spacing:-.03em;font-size:17px;text-decoration:none;color:var(--ink)}
.mark span{color:var(--hi)}
.bar nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.bar nav a{font-size:12.5px;font-weight:600;color:var(--ink-3);text-decoration:none;padding:6px 9px;border-radius:7px}
.bar nav a:hover{color:var(--hi);background:var(--hi-bg)}
header.h{padding:52px 0 30px;border-bottom:1px solid var(--rule)}
h1{font-family:var(--disp);font-weight:900;letter-spacing:-.035em;line-height:1.04;font-size:clamp(32px,6vw,46px);margin:0}
.sub{color:var(--ink-2);font-size:17px;margin:14px 0 0}
main{padding:36px 0 60px}
h2{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;font-size:23px;margin:40px 0 10px}
p,li{font-size:16px}
ul,ol{padding-left:22px}
li{margin-bottom:6px}
code{font:600 13.5px var(--mono);background:var(--paper-2);border:1px solid var(--rule);padding:1px 6px;border-radius:5px}
dl{margin:14px 0}
dt{font-weight:650;margin-top:14px}
dd{margin:2px 0 0;color:var(--ink-2)}
.todo{display:inline-block;background:#FFE9A8;color:#6B4E00;border:1px dashed #C9A227;
  border-radius:5px;padding:1px 8px;font:600 14px var(--mono)}
:root[data-theme="dark"] .todo{background:#3A2E08;color:#FFD966;border-color:#8A7020}
.box{border:1px solid var(--rule);background:var(--card);border-radius:12px;padding:16px 18px;margin:20px 0}
.box.hi{background:var(--hi-bg);border-color:var(--hi-line)}
.box p:last-child{margin-bottom:0}
a.mail{font:700 17px var(--mono);text-decoration:none;border-bottom:2px solid var(--hi-line)}
/* Bouton qui se presente comme un lien : c'est une action, pas une navigation. */
.lienbtn{font:inherit;color:var(--hi);background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.lienbtn:hover{text-decoration-thickness:2px}
footer{border-top:1px solid var(--rule);margin-top:50px;padding:26px 0 50px;color:var(--ink-3);font-size:14px}
footer a{color:var(--ink-3)}

/* ---------- bascule clair / sombre ---------- */
.themetoggle{
  flex:none;display:grid;place-items:center;padding:0;cursor:pointer;
  width:33px;height:30px;border-radius:8px;
  background:var(--card);border:1px solid var(--rule);color:var(--hi);transition:.15s;
}
.themetoggle svg{width:18px;height:18px}
.themetoggle:hover,.themetoggle:focus-visible{border-color:var(--hi);background:var(--hi-bg)}
.themetoggle .sun{display:none}
:root[data-theme="dark"] .themetoggle .moon{display:none}
:root[data-theme="dark"] .themetoggle .sun{display:block}
@media print{
  /* Le selecteur doit inclure [data-theme="dark"] : sans lui, la palette sombre
     (specificite 0,2,0) l'emporterait sur un simple :root (0,1,0) et le visiteur
     qui imprime depuis la version sombre sortirait du texte clair sur du blanc. */
  :root,:root[data-theme="dark"]{
    --paper:#fff;--paper-2:#fff;--card:#fff;--ink:#000;--ink-2:#222;--ink-3:#555;
    --rule:#bbb;--hi:#A84403;--hi-bg:#FBEBDC;--hi-line:#EFCFAC;
  }
  .bar,.themetoggle{display:none!important}
}