/* =====================================================================
   mattkds.dev — palette Sapin, polices système, accessible RGAA.
   Tailles en rem et interlignes sans unité : le texte suit le zoom
   et la taille de police choisie par la personne.
===================================================================== */
:root {
  --bg: #fcfcfa; --fg: #1b1d1b; --muted: #61645f; --faint: #767a73; --line: #e2e3df;
  --accent: #2f5d46;
  --font: "Geist", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f110f; --fg: #e8eae6; --muted: #9a9f98; --faint: #868b84; --line: #2a2f2a;
    --accent: #86bf9e; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f110f; --fg: #e8eae6; --muted: #9a9f98; --faint: #868b84; --line: #2a2f2a;
  --accent: #86bf9e; color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0 auto; max-width: 43rem; padding: 4.5rem 1.5rem 5rem;
  background: var(--bg); color: var(--fg);
  font-family: var(--font); font-size: 1rem; line-height: 1.625;
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
::selection { background: var(--accent); color: var(--bg); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
p { margin: 0 0 1rem; }
h1, h2, h3 { font-size: 1rem; font-weight: 500; line-height: 1.5; margin: 0; letter-spacing: -0.01em; }
img { max-width: 100%; height: auto; border-radius: 6px; }
.meta, time { color: var(--muted); }

/* Focus clavier toujours visible (RGAA 10.7) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
main:focus { outline: none; }

/* Texte réservé aux technologies d'assistance */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Lien d'évitement (RGAA 12.7), visible au focus */
.skip-link {
  position: absolute; top: 0.75rem; left: 0.75rem; z-index: 10;
  padding: 0.5rem 0.875rem; border-radius: 6px;
  background: var(--fg); color: var(--bg); font-weight: 500;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
.skip-link:hover { color: var(--bg); }

/* ---- En-tête : nom à gauche, menu et thème à droite ---- */
header.site {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.75rem 1.5rem; margin-bottom: 5.5rem;
}
header.site .name { margin: 0; font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; }
header.site .name a:hover { color: var(--fg); }
.logo { width: 0.85em; height: 1em; color: var(--accent); vertical-align: -0.1em; margin-right: 0.25rem; }

header.site .tools { display: flex; align-items: center; gap: 1.25rem; }
header.site nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; list-style: none; margin: 0; padding: 0; }
header.site nav a { color: var(--muted); }
header.site nav a:hover { color: var(--accent); }
/* Page courante : couleur ET soulignement, pas la couleur seule (RGAA 3.1) */
header.site nav a[aria-current] {
  color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 2px; text-underline-offset: 0.35em;
}

.theme-toggle {
  display: grid; place-items: center; width: 2rem; height: 2rem; margin: -0.375rem 0;
  padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { color: var(--accent); }
.theme-toggle svg { width: 1.125rem; height: 1.125rem; }
.theme-toggle .sun, .theme-toggle[aria-pressed="true"] .moon { display: none; }
.theme-toggle[aria-pressed="true"] .sun { display: block; }

/* ---- Titres de page et intro ---- */
main > h1 { margin-bottom: 1rem; }
main > h1 + .index { margin-top: 2.5rem; }
.intro { color: var(--muted); margin-bottom: 6rem; }
.intro strong { color: var(--fg); font-weight: 600; }
/* Liens repérables autrement que par la couleur ou la graisse (RGAA 10.6) */
.intro a { text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 0.25em; }
.intro a:hover { text-decoration-color: var(--accent); }
/* La flèche est décorative : texte de remplacement vide pour les lecteurs d'écran */
.intro a[href^="http"]::after { content: "\00a0↗" / ""; color: var(--faint); font-size: 0.75em; }
.intro a:hover strong { color: var(--accent); }

/* ---- Sections ---- */
section + section { margin-top: 4.5rem; }
section > h2 { color: var(--muted); margin-bottom: 1.5rem; }

/* ---- Liste des articles : index en colonnes ---- */
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.index li {
  display: grid; grid-template-columns: 4rem 1fr auto; gap: 1rem; align-items: baseline;
  padding: 0.875rem 0; border-bottom: 1px solid var(--line);
}
.index .year, .index time { color: var(--muted); font-variant-numeric: tabular-nums; }
.index time { white-space: nowrap; }
.index a { font-weight: 500; }

/* ---- Parcours : frise date | contenu, dans l'esprit de l'index ---- */
.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.timeline > li {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 0 1rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--line);
}
.timeline.compact > li { padding: 1rem 0; }
.timeline .when { margin: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.timeline .current .when, .timeline .current .when time { color: var(--accent); font-weight: 500; }
.timeline h3 { font-weight: 500; }
.timeline .org { color: var(--muted); font-weight: 400; }
.timeline .what > p { color: var(--muted); margin: 0.375rem 0 0; max-width: 34rem; }

/* ---- Maintenant ---- */
.entries { list-style: none; margin: 0; padding: 0; }
.entries li + li { margin-top: 1.25rem; }
.entries .meta { display: block; }
.entries p { color: var(--muted); margin: 0.5rem 0 0; }
.entries .tags { font-size: 0.875rem; }
cite { font-style: normal; }

/* ---- Article ---- */
header.post { margin-bottom: 4.5rem; }
/* Date au-dessus, titre grand et serré */
header.post .meta { margin: 0 0 1rem; }
header.post h1 { font-size: 2.25rem; line-height: 1.15; font-weight: 500; letter-spacing: -0.035em; }
article > img { margin-bottom: 3rem; }
.prose p, .prose ul, .prose ol, .prose pre, .prose blockquote, .prose table { margin: 0 0 1.5rem; }
.prose h2, .prose h3, .prose h4 { margin: 3rem 0 1rem; }
.prose h4 { color: var(--muted); }
.prose a { text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--accent); }
.prose blockquote { margin-left: 0; padding-left: 1rem; border-left: 2px solid var(--accent); color: var(--muted); }
.prose code { font-size: 0.875em; }
.prose pre { overflow-x: auto; padding: 1rem; border: 1px solid var(--line); border-radius: 6px; line-height: 1.5; }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 0.875rem; }
.prose th, .prose td { padding: 0.375rem 0.75rem; border-bottom: 1px solid var(--line); text-align: left; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

/* ---- Pied de page ---- */
footer.site { margin-top: 10rem; font-size: 0.875rem; color: var(--muted); }
footer.site ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; list-style: none; margin: 0; padding: 0; }
footer.site ul + ul { margin-top: 0.75rem; }
footer.site .page-eco { margin: 1.5rem 0 0; }
footer.site .page-eco a { text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 0.25em; }

/* Tableau des mesures (page Écoconception) */
.eco-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.eco-table caption { text-align: left; color: var(--muted); padding-bottom: 0.75rem; }
.eco-table th, .eco-table td { padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; }
.eco-table thead th { color: var(--muted); font-weight: 500; }
.eco-table td.num, .eco-table th.num { text-align: right; }
.eco-table td { white-space: nowrap; }
.eco-table tbody th { font-weight: 500; }
.eco-scroll { overflow-x: auto; margin: 0 0 1.5rem; }

/* ---- Petits écrans et zoom ---- */
@media (max-width: 37.5rem) {
  body { padding-top: 3rem; }
  .intro { margin-bottom: 4.5rem; }
  .index li { grid-template-columns: 1fr auto; }
  .index .year { grid-column: 1 / -1; }
  .index .year:empty { display: none; }
  /* En-tête mobile : nom et thème sur une ligne, menu en entier sur la suivante */
  header.site {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    gap: 0; margin-bottom: 3.5rem;
  }
  header.site .tools { display: contents; }
  header.site .theme-toggle { grid-row: 1; grid-column: 2; margin: 0 -0.375rem 0 0; }
  header.site nav {
    grid-row: 2; grid-column: 1 / -1;
    margin-top: 0.875rem; padding-top: 0.75rem; border-top: 1px solid var(--line);
  }
  header.site nav ul { flex-wrap: nowrap; gap: 1.5rem; }
  .timeline > li { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* Pas d'animation si la personne l'a demandé */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---- Plan du site ---- */
.sitemap, .sitemap ul { list-style: none; margin: 0; padding: 0; }
.sitemap > li + li { margin-top: 0.75rem; }
.sitemap ul { margin-top: 0.5rem; padding-left: 1.25rem; border-left: 1px solid var(--line); }
.sitemap ul li + li { margin-top: 0.375rem; }
.sitemap ul a { color: var(--muted); }
.sitemap a:hover { color: var(--accent); }