/* ============================================================
   base.css — styles communs à toutes les pages
   Dépend de tokens.css (à charger avant).
   ============================================================ */

/* La police de corps, servie en local pour la sobriété et la pérennité.
   Placez le fichier .woff2 dans /files/. Un seul format suffit :
   woff2 est compris par tous les navigateurs modernes. */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/files/atkinson-hyperlegible.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;   /* affiche le texte immédiatement avec la police de repli */
}

/* — Réinitialisation minimale — */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading);
  /* Centre le contenu et garde une largeur de lecture confortable. */
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--space-3) var(--pad) var(--space-5);
}

/* — Bandeau signature : 6 aplats Solarized, présent une seule fois, en pied — */
.signature {
  display: flex;
  height: 4px;
  margin: var(--space-4) 0 var(--space-2);
  list-style: none;
  padding: 0;
}
.signature > * { flex: 1; }
.signature .y { background: var(--sol-yellow);  }
.signature .o { background: var(--sol-orange);  }
.signature .r { background: var(--sol-red);     }
.signature .m { background: var(--sol-magenta); }
.signature .c { background: var(--sol-cyan);    }
.signature .b { background: var(--sol-blue);    }

/* — En-tête du site — */
.site-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  margin-bottom: var(--space-4);
}
.site-head .name {
  font-family: var(--font-head);
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}
.site-head .name a { color: var(--ink); text-decoration: none; }
.site-head .role {
  color: var(--ink-soft);
  font-size: var(--text-sm);
  margin: 0.2em 0 0;
}
/* Bascule de langue */
.lang {
  font-family: var(--font-head);
  font-size: var(--text-sm);
}
.lang [aria-current="true"] { color: var(--ink-soft); text-decoration: none; }

/* — Navigation principale — */
.site-nav {
  font-family: var(--font-head);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
}
.site-nav a { margin-right: var(--space-2); white-space: nowrap; }

/* — Titres — */
h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}
h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-3); }
h2 { font-size: var(--text-lg); margin: var(--space-4) 0 var(--space-2); }
h3 { font-size: var(--text-base); margin: var(--space-3) 0 var(--space-1); }

/* — Texte courant — */
p { margin: 0 0 var(--space-2); }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration: none; }
a:visited { color: var(--accent-2); }

/* Lien d'évitement pour l'accessibilité clavier */
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--pad);
  top: var(--space-1);
  background: var(--bg-soft);
  padding: var(--space-1) var(--space-2);
}

/* Focus visible net partout (accessibilité clavier) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

img { max-width: 100%; height: auto; }

/* — Métadonnée discrète (dates de billets) — */
.meta { color: var(--ink-soft); font-size: var(--text-sm); }

/* — Listes de contenu : deux variantes (on en gardera une) — */
/* Variante A : puces classiques (défaut navigateur, resserré) */
.list-bullets { padding-left: 1.2em; }
.list-bullets li { margin-bottom: var(--space-1); }

/* Variante B : sans puces, structure par filets et espacement */
.list-ruled { list-style: none; padding: 0; margin: 0; }
.list-ruled li {
  padding: var(--space-1) 0;
  border-top: 1px solid var(--rule);
}
.list-ruled li:last-child { border-bottom: 1px solid var(--rule); }

/* — Pied de page — */
.site-foot {
  margin-top: var(--space-5);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rule);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.site-foot a { color: var(--ink-soft); }

/* — Respect de la préférence « mouvement réduit » (aucune animation ici,
   mais on pose le principe pour l'avenir) — */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   Contextes de page
   ============================================================ */

/* — Index du blog : liste à puces compacte (titre + date) — */
/* (utilise .list-bullets, défini plus haut) */

/* — Corps d'article : confort de lecture long — */
article.post .post-meta {
  font-family: var(--font-head);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
}
article.post h2 { margin-top: var(--space-4); }
article.post p,
article.post li { line-height: var(--leading); }
article.post blockquote {
  margin: var(--space-3) 0;
  padding-left: var(--space-2);
  border-left: 3px solid var(--accent);
  color: var(--ink-soft);
  font-style: italic;
}
article.post pre {
  background: var(--bg-soft);
  padding: var(--space-2);
  overflow-x: auto;
  font-size: var(--text-sm);
  border-radius: 3px;
}
article.post code { font-family: var(--font-head); font-size: 0.9em; }
/* Mention de mise à jour, en pied d'article (discrète) */
article.post .post-updated {
  margin-top: var(--space-3);
  font-family: var(--font-head);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
article.post figure { margin: var(--space-3) 0; }
article.post figcaption {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin-top: var(--space-1);
}
/* Navigation entre articles (précédent / suivant) */
.post-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rule);
  font-family: var(--font-head);
  font-size: var(--text-sm);
}

/* — Pages statiques : prose simple, déjà couverte par les styles de base — */
/* (publications, recherche, cours, about, contact) */
/* Liste dense pour la page Publications (variante puces) */
.refs { padding-left: 1.2em; }
.refs li { margin-bottom: var(--space-2); }
.refs h2 { margin-top: var(--space-4); }

/* — Pages publication et index  */
/* Mise en forme propre à la page Publications : l'année en gouttière à
       gauche, le texte de la référence aligné à droite. À reporter dans
       base.css si l'on souhaite réutiliser ce motif ailleurs. */

  .pubs { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
    .pubs li {
      display: flex;
      gap: var(--space-2);
      padding: var(--space-1) 0;
      border-top: 1px solid var(--rule);
    }
    .pubs li:last-child { border-bottom: 1px solid var(--rule); }
    .pubs .year {
      flex: 0 0 3rem;
      font-family: var(--font-head);
      font-size: var(--text-sm);
      color: var(--ink-soft);
    }