/* Pages légales — hérite des tokens de la DA. Registre éditorial : libellé en marge, contenu en colonne, comme les planches du temps 6. */ :root{ --paper:#EDECE9; --ink:#1B2338; --hairline:#C9C7C2; --signal:#D93A21; --ink-soft:#757985; --ink-mute:#5F6470; --sans:"Bricolage Grotesque",system-ui,sans-serif; --serif:"Instrument Serif",Georgia,serif; --edge:7vw; } *{margin:0;padding:0;box-sizing:border-box} /* clavier : lien d'evitement, et un contour de focus qui ne depende pas du navigateur — aucun style de focus n'etait ecrit */ .skip{position:absolute;left:-999px;top:8px;z-index:100; background:var(--ink);color:var(--paper);padding:12px 16px; font-size:14px;text-decoration:none} .skip:focus{left:8px} :focus-visible{outline:2px solid currentColor;outline-offset:3px} /* fond explicite sur : sinon celui de body remonte au canevas et le grain en `overlay` n'a plus de fond avec quoi se melanger */ html{background:var(--paper)} body{font-family:var(--sans);background:var(--paper);color:var(--ink); -webkit-font-smoothing:antialiased; isolation:isolate} /* grain sous le texte, jamais dessus : a 0,80 par-dessus tout, il tramait les titres et les vignettes des releves */ body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1; opacity:.2;mix-blend-mode:overlay; background-image:url("/img/grain.png");background-size:200px 200px} /* Meme nav que la home : marque vers /, Cases, Field notes, et le seul bouton du site. Elle n'est pas fixe ici — rien ne defile sous elle. */ nav{display:flex;justify-content:space-between;align-items:center;gap:16px; padding:26px var(--edge);font-size:14px;letter-spacing:.04em; border-bottom:1px solid var(--hairline)} nav .brand{display:inline-flex;align-items:center;gap:9px;font-size:14px; letter-spacing:-.01em;color:var(--ink);text-decoration:none;min-height:44px} nav .brand svg{width:17px;height:17px;display:block;color:currentColor} nav .navlinks{display:flex;align-items:center;gap:6px 24px;flex-wrap:wrap} /* cibles tactiles : 44 px dans les deux sens */ nav a{color:var(--ink-mute);text-decoration:none;transition:color 120ms; display:inline-flex;align-items:center;justify-content:center; min-height:44px;min-width:44px} nav a:hover{color:var(--ink)} nav a[aria-current]{color:var(--ink)} /* mention reservee aux lecteurs d'ecran */ .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} main{padding:0 var(--edge)} h1{font-size:clamp(38px,5.4vw,64px);line-height:1.05;font-weight:500; letter-spacing:-.02em;margin:12vh 0 8vh} .row{display:grid;grid-template-columns:22% 1fr;gap:6%; border-top:1px solid var(--hairline);padding:34px 0} .row .k{font-size:12px;letter-spacing:.02em;color:var(--ink-mute);padding-top:3px} .row .v{max-width:62ch} .row .v p{font-size:16px;line-height:1.75} .row .v p + p{margin-top:22px} .row .v a{color:inherit;text-decoration:none; border-bottom:1px solid var(--hairline);transition:border-color 120ms} .row .v a:hover{border-bottom-color:var(--ink)} footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px; border-top:1px solid var(--hairline);margin:10vh var(--edge) 0; padding:26px 0 7vh;font-size:12px;color:var(--ink-mute)} footer nav{border:0;padding:0;gap:24px;display:flex} footer a{color:var(--ink-mute);text-decoration:none;margin-left:24px;transition:color 120ms; display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px} footer a:hover{color:var(--ink)} footer a[aria-current]{color:var(--ink)} @media (max-width:820px){ :root{--edge:8vw} .row{grid-template-columns:1fr;gap:14px;padding:28px 0} h1{margin:8vh 0 6vh} }