*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,sans-serif;
  font-size:15px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* Deux mesures : « col » pour la lecture suivie, « large » pour la page
   d'accueil et sa colonne latérale. */
.col{max-width:660px;margin:0 auto;padding:0 26px}
.large{max-width:1040px;margin:0 auto;padding:0 26px}

/* ---------- bandeau ---------- */
header.top{
  background:var(--panel);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:10;
}
header.top .large{display:flex;align-items:center;justify-content:space-between;gap:18px;height:54px}

.mark{font-family:"IBM Plex Mono",monospace;font-size:.78rem;font-weight:500;text-decoration:none}
.mark span{color:var(--mut)}

nav{display:flex;gap:1px;flex-wrap:wrap}
nav a{
  font-family:"IBM Plex Mono",monospace;
  font-size:.73rem;
  color:var(--mut);
  text-decoration:none;
  padding:5px 9px;
  border-radius:2px;
  transition:color .15s,background .15s;
}
nav a:hover{color:var(--ink);background:var(--panel-2)}
nav a[aria-current]{color:var(--acc)}

/* ---------- pied de page ---------- */
footer{
  border-top:1px solid var(--line);
  padding:26px 0 60px;
  color:var(--mut);
  font-family:"IBM Plex Mono",monospace;
  font-size:.71rem;
}
footer a{color:var(--acc)}

@media (max-width:820px){
  header.top{position:static}
  header.top .large{height:auto;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
}

@media (max-width:560px){
  .col,.large{padding:0 18px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}