/* ── Reset ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

/* ── Variables ────────────────────────────── */
:root {
  /* Surfaces */
  --bg:             #0e0e10;
  --surface:        #16161a;
  --surface-2:      #1e1e24;
  --line:           #25252d;
  --header-bg:      rgba(14,14,16,.92);
  --code-header-bg: rgba(255,255,255,.025);
  --dot-alpha:      .035;
  /* Texte */
  --txt:            #d4d4d8;
  --muted:          #6b6b75;
  --faint:          #303038;
  --heading:        #f4f4f5;
  /* Accent */
  --accent:         #818cf8;
  --accent2:        #38bdf8;
  --accent-rgb:     129 140 248;
  --grad:           linear-gradient(90deg, #818cf8, #c084fc 50%, #38bdf8);
  /* Tags / code */
  --tag-bg:         #1a1a2e;
  --tag-fg:         #a5b4fc;
  --tag-fg-rgb:     165 180 252;
  /* Couleurs sémantiques */
  --amber:          #fbbf24;
  --amber-rgb:      251 191 36;
  --green:          #4ade80;
  --green-rgb:      74 222 128;
  --danger:         #ef4444;
  --danger-rgb:     239 68 68;
  --accent2-rgb:    56 189 248;
  --border-hover:   #3f3f50;
  /* Réseaux sociaux & marques */
  --mastodon:       #6364ff;
  --mastodon-rgb:   99 100 255;
  --bluesky:        #0085ff;
  --bluesky-rgb:    0 133 255;
  --rss:            #f97316;
  --rss-rgb:        249 115 22;
  /* Utilitaires */
  --on-accent:      #ffffff;
  --overlay-bg:     rgb(0 0 0 / .92);
  /* Typo */
  --mono:           'JetBrains Mono', 'Fira Mono', monospace;
  --sans:           'Inter', system-ui, -apple-system, sans-serif;
}

/* ── Base ─────────────────────────────────── */
body {
  font-family: var(--sans);
  background: var(--bg);
  background-image: radial-gradient(circle, rgb(var(--accent-rgb) / var(--dot-alpha)) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--txt);
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; border-radius: 5px; }

/* ── Top gradient bar (toujours visible) ──── */
.top-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad);
  z-index: 300;
}

/* ── Reading progress (pages article) ──────── */
#progress {
  position: fixed;
  top: 2px; left: 0;
  height: 2px;
  width: 0%;
  background: var(--grad);
  z-index: 301;
  transition: width .08s linear;
}

/* ── Layout ───────────────────────────────── */
.wrap {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
main.wrap { flex: 1; padding-top: 2.5rem; padding-bottom: 3rem; }

/* ── Header ───────────────────────────────── */
header {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 2px; /* sous la top-bar */
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  z-index: 100;
}
header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  height: 52px;
  overflow: hidden; /* évite tout débordement horizontal */
}

/* Logo dégradé + curseur */
.brand {
  font-family: var(--mono);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  flex-shrink: 1; /* peut se rétrécir sur mobile si besoin */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.brand:hover { text-decoration: none; opacity: .85; }

.cursor {
  -webkit-text-fill-color: var(--accent);
  animation: blink 1.1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0 } }

/* Nav ────────────────────────────────────── */
.site-nav {
  display: flex;
  align-items: center;
  gap: .15rem;
  flex-shrink: 0; /* la nav ne se réduit pas, c'est le brand qui cède */
}
.site-nav a {
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  padding: .25rem .55rem;
  border-radius: 5px;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.site-nav a:hover,
.site-nav a.active { color: var(--txt); background: var(--faint); text-decoration: none; }

.github-link {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  padding: .25rem .3rem;
  border-radius: 5px;
  transition: color .15s;
}
.github-link:hover { color: var(--txt); text-decoration: none; }
.github-link svg { width: 17px; height: 17px; display: block; }

.rss-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--rss);
  background: rgb(var(--rss-rgb) / .1);
  border: 1px solid rgb(var(--rss-rgb) / .22);
  border-radius: 5px;
  padding: .2rem .5rem;
  transition: background .15s, border-color .15s;
  margin-left: .25rem;
}
.rss-pill svg { width: 12px; height: 12px; fill: currentColor; flex-shrink: 0; }
.rss-pill:hover { background: rgb(var(--rss-rgb) / .2); border-color: rgb(var(--rss-rgb) / .5); text-decoration: none; }

/* ── Liste d'articles ─────────────────────── */
.list { list-style: none; }
.list li {
  position: relative;
  cursor: pointer;
  padding: 1.5rem 0 1.5rem 1.25rem;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  transition: border-left-color .2s ease, padding-left .2s ease;
}
.list li:first-child { border-top: 1px solid var(--line); }
.list li:hover { border-left-color: var(--accent); padding-left: 2rem; }

.list time {
  display: block;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--muted);
  margin-bottom: .3rem;
}
.list h2 {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.3;
  margin-bottom: .35rem;
}
.list h2 a { color: var(--txt); }
.list h2 a:hover { color: var(--accent); text-decoration: none; }
.list h2 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.list p { font-size: .875rem; color: var(--muted); margin-bottom: .55rem; line-height: 1.55; }

/* ── Tags & meta ──────────────────────────── */
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; position: relative; z-index: 2; }
.tag {
  --tag-hue: 240;
  font-family: var(--mono);
  font-size: .68rem;
  color: hsl(var(--tag-hue), 70%, 72%);
  background: hsl(var(--tag-hue), 55%, 11%);
  border: 1px solid hsl(var(--tag-hue), 45%, 22%);
  border-radius: 4px;
  padding: .08rem .4rem;
}
.reading { font-size: .72rem; color: var(--muted); font-family: var(--mono); margin-left: auto; }

/* ── Pagination ───────────────────────────── */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
  font-size: .875rem;
}
.pager a { color: var(--muted); font-weight: 500; }
.pager a:hover { color: var(--txt); }
.pager span { color: var(--faint); font-family: var(--mono); font-size: .78rem; }

/* ── Article ──────────────────────────────── */
article { min-width: 0; } /* empêche le débordement dans un grid/flex */
.article-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--muted);
  margin-bottom: .75rem;
}
article h1 {
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.2;
  margin-bottom: 1.1rem;
  background: linear-gradient(135deg, var(--heading) 55%, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Prose ────────────────────────────────── */
.prose { font-size: 1rem; line-height: 1.82; color: var(--txt); }
@media (min-width: 640px) {
  .prose { font-size: 1.06rem; line-height: 1.84; }
  .prose h2 { font-size: 1.35rem; }
  .prose h3 { font-size: 1.12rem; }
  .prose p  { margin-bottom: 1.2rem; }
}

.prose h1, .prose h2, .prose h3, .prose h4 {
  color: var(--heading);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.3;
  margin: 2rem 0 .65rem;
}
.prose h2 { font-size: 1.3rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line); }
.prose h3 { font-size: 1.1rem; }
.prose h4 { font-size: .95rem; color: var(--muted); }

.prose p { margin-bottom: 1.15rem; }
.prose a { color: var(--accent); }
.prose strong { color: var(--heading); font-weight: 600; }
.prose em { color: var(--muted); font-style: italic; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 2rem 0; }
.prose img { margin: 1.5rem auto; border: 1px solid var(--line); }

.prose ul, .prose ol { margin: 0 0 1.15rem 1.4rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: .3rem; }
.prose li::marker { color: var(--accent); }

.prose blockquote {
  border-left: 2px solid var(--accent);
  background: rgb(var(--accent-rgb) / .06);
  padding: .75rem 1.1rem;
  margin: 1.25rem 0;
  border-radius: 0 5px 5px 0;
  color: var(--muted);
}
.prose blockquote p { margin: 0; font-style: italic; }

.prose code {
  font-family: var(--mono);
  font-size: .82em;
  color: var(--tag-fg);
  background: var(--tag-bg);
  border: 1px solid rgb(var(--tag-fg-rgb) / .12);
  border-radius: 4px;
  padding: .1em .4em;
}
.prose pre {
  margin: 1.25rem 0;
  border-radius: 8px;
  border: 1px solid var(--line);
  overflow-x: auto;
  position: relative;
}
.prose pre code { background: none; border: none; color: inherit; padding: 0; font-size: .875rem; display: block; }
.prose pre .hljs { padding: 1.1rem 1.25rem; border-radius: 8px; line-height: 1.65; }

.prose table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .875rem; }
.prose th { background: var(--surface); border: 1px solid var(--line); padding: .5rem .85rem; text-align: left; font-weight: 600; color: var(--heading); }
.prose td { border: 1px solid var(--line); padding: .45rem .85rem; color: var(--muted); }
.prose tr:hover td { background: var(--surface); color: var(--txt); }

/* ── Back / liens navigation ─────────────── */
.back {
  display: inline-block;
  margin-top: 2.5rem;
  font-size: .875rem;
  color: var(--muted);
  font-weight: 500;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  width: 100%;
}
.back:hover { color: var(--accent); text-decoration: none; }

/* ── Page title ───────────────────────────── */
.page-title {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--heading);
  margin-bottom: 2rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--line);
}

/* ── Archives ─────────────────────────────── */
.archive-year {
  margin-top: 2rem;
}
.archive-year:first-child { margin-top: 0; }
.year-label {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: .6rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--faint);
}
.archive-list { list-style: none; }
.archive-list li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--faint);
  transition: padding-left .15s;
}
.archive-list li:hover { padding-left: .5rem; }
.archive-list li:last-child { border-bottom: none; }
.archive-date {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--muted);
  white-space: nowrap;
  min-width: 5rem;
}
.archive-list a { font-size: .9rem; color: var(--txt); font-weight: 500; }
.archive-list a:hover { color: var(--accent); text-decoration: none; }
.archive-tags { display: flex; gap: .25rem; margin-left: auto; }

/* ── Recherche ────────────────────────────── */
.search-form {
  display: flex;
  gap: .5rem;
  margin-bottom: 2rem;
}
.search-form input[type="search"] {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--txt);
  font-family: var(--sans);
  font-size: .95rem;
  padding: .6rem 1rem;
  border-radius: 7px;
  outline: none;
  transition: border-color .15s;
  -webkit-appearance: none;
}
.search-form input[type="search"]::placeholder { color: var(--muted); }
.search-form input[type="search"]:focus { border-color: var(--accent); }
.search-form button {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 7px;
  padding: .6rem 1.1rem;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.search-form button:hover { opacity: .85; }

.search-count {
  font-size: .8rem;
  color: var(--muted);
  font-family: var(--mono);
  margin-bottom: 1.25rem;
}

mark {
  background: rgb(var(--accent-rgb) / .25);
  color: var(--tag-fg);
  border-radius: 2px;
  padding: 0 .1em;
}

/* ── Empty / misc ─────────────────────────── */
.empty { color: var(--muted); padding: 3rem 0; font-size: .9rem; }
.empty code { font-family: var(--mono); color: var(--tag-fg); }

/* ── Footer ───────────────────────────────── */
footer {
  border-top: 1px solid var(--line);
  padding: 1rem 0;
  font-size: .72rem;
  color: var(--muted);
  font-family: var(--mono);
}
footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
footer a { color: var(--muted); }
footer a:hover { color: var(--accent); text-decoration: none; }

/* ── Code wrap (badge lang + bouton copier) ── */
.prose .code-wrap { margin: 1.25rem 0; border-radius: 8px; border: 1px solid var(--line); overflow: hidden; }
.prose .code-wrap pre { margin: 0; border: none; border-radius: 0; }
.prose .code-wrap pre .hljs { border-radius: 0; }

.code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .35rem .9rem;
  background: var(--code-header-bg);
  border-bottom: 1px solid var(--line);
}
.code-lang {
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--muted);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.copy-btn {
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color .15s;
  user-select: none;
}
.copy-btn:hover { color: var(--txt); }
.copy-btn.copied { color: var(--green); }

/* ── Table des matières ───────────────────── */
.toc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 7px 7px 0;
  padding: .9rem 1.1rem;
  margin-bottom: 2rem;
  font-size: .875rem;
}
.toc-title {
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .6rem;
  font-weight: 600;
}
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { padding: .15rem 0; }
.toc li.level-3 { padding-left: 1rem; }
.toc a { color: var(--muted); font-size: .875rem; transition: color .15s; }
.toc a:hover { color: var(--accent); text-decoration: none; }

/* ── Article layout large + sidebar TOC ─────── */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* minmax(0,1fr) évite le dépassement horizontal */
  gap: 1.5rem;
}

@media (min-width: 960px) {
  /* Élargi seulement quand un TOC est présent */
  .has-toc.wrap--article { max-width: 1060px; }

  .has-toc .article-layout {
    grid-template-columns: minmax(0, 1fr) 220px;
    grid-template-areas: "content sidebar";
    gap: 3rem;
    align-items: start;
  }
  .has-toc .article-layout article          { grid-area: content; }
  .has-toc .article-layout .article-sidebar { grid-area: sidebar; }

  .has-toc .article-sidebar {
    position: sticky;
    top: 68px; /* top-bar 2px + header 52px + marge 14px */
  }
  .has-toc .article-sidebar .toc {
    border-radius: 7px;
    margin-bottom: 0;
  }

  /* Breakout : blocs de code débordant légèrement */
  .has-toc .prose .code-wrap {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }
}

/* TOC sur mobile : 2 colonnes sans JS, replié avec JS */
@media (max-width: 959px) {
  .article-sidebar { margin-bottom: .75rem; }
  .article-sidebar .toc { font-size: .78rem; padding: .5rem .85rem; margin-bottom: 0; }

  /* Sans JS → 2 colonnes, réduit la hauteur de moitié */
  .article-sidebar .toc ol { columns: 2; column-gap: .75rem; margin-top: .4rem; }
  .article-sidebar .toc li.level-3 { padding-left: .5rem; }

  /* Avec JS → ol[hidden] = caché, seul le titre reste visible */
  .article-sidebar .toc ol[hidden] { display: none; }

  /* Titre cliquable dans les deux cas */
  .toc-title {
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0 !important;
  }
}

/* ── Articles liés ────────────────────────── */
.related {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.related-title {
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
  font-weight: 600;
}
.related-list { list-style: none; display: flex; flex-direction: column; gap: .75rem; }
.related-list li {
  display: flex;
  align-items: baseline;
  gap: .75rem;
}
.related-list time { font-family: var(--mono); font-size: .7rem; color: var(--muted); white-space: nowrap; }
.related-list a { font-size: .9rem; color: var(--txt); font-weight: 500; }
.related-list a:hover { color: var(--accent); text-decoration: none; }

/* ── Tags cliquables ──────────────────────── */
a.tag { text-decoration: none; transition: background .15s, border-color .15s; }
a.tag:hover { background: hsl(var(--tag-hue), 55%, 18%); border-color: hsl(var(--tag-hue), 45%, 36%); text-decoration: none; }

/* ── Page tag ─────────────────────────────── */
.tag-hero {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 2rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--line);
}
.tag-hero .tag { font-size: .85rem; padding: .25rem .65rem; }
.tag-hero span { font-size: .8rem; color: var(--muted); font-family: var(--mono); }

/* ── Navigation précédent / suivant ──────── */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.post-nav a {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.post-nav a:hover { border-color: var(--accent); background: rgb(var(--accent-rgb) / .05); text-decoration: none; }
.post-nav .nav-right { text-align: right; }
.nav-dir {
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.nav-title { font-size: .875rem; font-weight: 500; color: var(--txt); line-height: 1.35; }

/* ── 404 ──────────────────────────────────── */
.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5rem 0 4rem;
  text-align: center;
  gap: .75rem;
}
.not-found-code {
  font-family: var(--mono);
  font-size: 5rem;
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.not-found-msg { color: var(--muted); font-size: .95rem; }
.not-found-back {
  margin-top: .5rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--accent);
}
.not-found-back:hover { text-decoration: underline; }

/* ── Ancres de titres ────────────────────── */
.prose h2 .h-anchor,
.prose h3 .h-anchor {
  font-size: .7em;
  margin-left: .45rem;
  color: var(--faint);
  text-decoration: none;
  opacity: 0;
  font-weight: 400;
  font-family: var(--mono);
  transition: opacity .15s, color .15s;
  user-select: none;
}
.prose h2:hover .h-anchor,
.prose h3:hover .h-anchor { opacity: 1; color: var(--accent); }

/* ── Now page ─────────────────────────────── */
.now-header { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.now-header .page-title { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
.now-updated { font-family: var(--mono); font-size: .72rem; color: var(--muted); }

/* ── Nuage de tags ────────────────────────── */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  align-items: baseline;
  padding: 1.5rem 0 2rem;
}
.cloud-tag {
  --tag-hue: 240;
  font-family: var(--mono);
  color: hsl(var(--tag-hue), 65%, 68%);
  font-weight: 500;
  line-height: 1.2;
  transition: color .15s;
  text-decoration: none;
}
.cloud-tag:hover  { color: hsl(var(--tag-hue), 70%, 82%); text-decoration: none; }
.cloud-tag.active { color: var(--accent); font-weight: 700; }
.cloud-tag sup { font-size: .55em; color: var(--muted); margin-left: .15em; }

.tag-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .875rem; }
.tag-table th { background: var(--surface); border: 1px solid var(--line); padding: .45rem .85rem; text-align: left; font-weight: 600; color: var(--heading); }
.tag-table td { border: 1px solid var(--line); padding: .4rem .85rem; }
.tag-table tr:hover td { background: var(--surface); }
.tag-count { color: var(--muted); font-family: var(--mono); font-size: .8rem; }

/* ── Stats footer ─────────────────────────── */
.footer-stats { font-family: var(--mono); font-size: .7rem; color: var(--muted); }


/* ── Fil d'Ariane ─────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  font-family: var(--mono);
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { color: var(--faint); }
.breadcrumb .current { color: var(--txt); }

/* ── Partage ──────────────────────────────── */
.share-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 2rem 0 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.share-label { font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: .25rem; }
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 500;
  padding: .3rem .7rem;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.share-btn:hover { color: var(--txt); border-color: var(--border-hover); background: var(--surface-2); text-decoration: none; }
.share-btn.mastodon:hover { color: var(--mastodon); border-color: rgb(var(--mastodon-rgb) / .4); }
.share-btn.bluesky:hover  { color: var(--bluesky);  border-color: rgb(var(--bluesky-rgb)  / .4); }
.share-btn.email:hover    { color: var(--accent);   border-color: rgb(var(--accent-rgb)   / .4); }
.share-btn svg { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; display: block; }

/* ── TOC lien actif (IntersectionObserver) ── */
.toc a.toc-active { color: var(--accent); font-weight: 600; }

/* ── Temps lecture dans les archives ─────── */
.archive-read { font-family: var(--mono); font-size: .68rem; color: var(--muted); white-space: nowrap; }

/* ── Badges de type de post ──────────────── */
.post-type {
  display: inline-flex;
  align-items: center;
  font-size: .62rem;
  font-family: var(--mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .12rem .4rem;
  border-radius: 4px;
  white-space: nowrap;
}
.type-til { background: rgb(var(--amber-rgb) / .12); color: var(--amber); border: 1px solid rgb(var(--amber-rgb) / .25); }

/* ── Méta ligne du haut dans la liste ────── */
.list-meta-top {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .15rem;
}
.list-meta-top time { color: var(--muted); font-size: .8rem; font-family: var(--mono); margin-bottom: 0; }

/* ── Statut en direct ────────────────────── */
.status-widget {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  margin-bottom: 1.5rem;
  font-size: .875rem;
}
.status-emoji { font-size: 1.15rem; line-height: 1; flex-shrink: 0; }
.status-text  { color: var(--txt); flex: 1; }
.status-updated { color: var(--muted); font-size: .72rem; white-space: nowrap; font-family: var(--mono); }

/* ── Photos ──────────────────────────────── */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.photo-item img {
  width: 100%; height: 200px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
  cursor: zoom-in;
  transition: opacity .15s, transform .15s;
  display: block;
}
.photo-item img:hover { opacity: .85; transform: scale(1.01); }
.photo-caption { font-size: .75rem; color: var(--muted); margin-top: .35rem; text-align: center; }
/* ── Lightbox photos ─────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0;
  background: rgb(0 0 0 / .94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.lightbox.open { opacity: 1; pointer-events: auto; }

/* Image */
.lb-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  padding: 3.5rem 3.5rem 1rem;
  box-sizing: border-box;
}
@media (max-width: 600px) {
  .lb-img-wrap { padding: 3.5rem 1rem 1rem; }
}
.lightbox img {
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 6px;
  border: none;
  background: none;
  display: block;
  transform: scale(.94);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox.open img { transform: scale(1); opacity: 1; }

/* Bouton fermer */
.lb-close {
  position: absolute;
  top: .85rem; right: 1rem;
  width: 38px; height: 38px;
  border: 1px solid rgb(255 255 255 / .15);
  border-radius: 50%;
  background: rgb(255 255 255 / .07);
  color: rgb(255 255 255 / .8);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.lb-close:hover { background: rgb(255 255 255 / .18); border-color: rgb(255 255 255 / .35); color: #fff; }

/* Flèches prev / next */
.lb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 56px;
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: 8px;
  background: rgb(255 255 255 / .06);
  color: rgb(255 255 255 / .75);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, opacity .15s;
  user-select: none;
}
.lb-arrow:hover { background: rgb(255 255 255 / .16); border-color: rgb(255 255 255 / .28); color: #fff; }
.lb-arrow:disabled, .lb-arrow[aria-disabled="true"] { opacity: .2; pointer-events: none; }
.lb-prev { left: .85rem; }
.lb-next { right: .85rem; }
@media (max-width: 480px) {
  .lb-arrow { width: 36px; height: 44px; font-size: 1.2rem; }
  .lb-prev { left: .4rem; }
  .lb-next { right: .4rem; }
}

/* Footer : caption + compteur */
.lb-footer {
  width: 100%;
  padding: .65rem 1.25rem .9rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.5rem;
}
.lb-caption {
  font-size: .875rem;
  color: rgb(255 255 255 / .7);
  font-style: italic;
  margin: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-counter {
  font-family: var(--mono);
  font-size: .7rem;
  color: rgb(255 255 255 / .4);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Footer links ────────────────────────── */
footer .footer-links { display: flex; gap: 1.25rem; }
footer .footer-links a { color: var(--muted); font-size: .8rem; }
footer .footer-links a:hover { color: var(--txt); }

/* ── Nav : visibilité responsive ───────────── */
.nav-collapse { display: inline-flex; }
.mobile-show  { display: none !important; }
@media (max-width: 760px) {
  .nav-collapse { display: none !important; }
  .mobile-show  { display: inline-flex !important; }
}

/* ── Print ────────────────────────────────── */
@media print {
  @page { margin: 2cm 2.5cm; }

  .top-bar, #progress, header, footer,
  .toc, .post-nav, .related, .comments,
  .share-bar, .back, .breadcrumb,
  .webmentions, .series-box, .reading-mode-btn,
  #back-to-top, .badge-new, .wm-empty { display: none !important; }

  body { background: #fff !important; color: #000; font-size: 11pt; line-height: 1.6; }
  .article-layout { display: block !important; }
  article h1 {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    background: none !important;
    font-size: 22pt;
    margin-bottom: .6cm;
  }
  .prose { font-size: 11pt !important; color: #000; line-height: 1.55; }
  .prose h2 { font-size: 15pt; color: #000; page-break-after: avoid; }
  .prose h3 { font-size: 12pt; color: #000; page-break-after: avoid; }
  .prose p, .prose li { orphans: 3; widows: 3; }
  .prose a { color: #000; text-decoration: underline; }
  /* Affiche l'URL des liens externes */
  .prose a[href^="http"]::after {
    content: ' (' attr(href) ')';
    font-size: 8pt;
    color: #555;
    word-break: break-all;
  }
  .prose img { max-width: 100% !important; page-break-inside: avoid; border: none !important; }
  .prose pre { border: 1px solid #ccc !important; background: #f5f5f5 !important; page-break-inside: avoid; }
  .prose pre code { color: #222 !important; font-size: 8.5pt; }
  .prose blockquote { border-left: 2px solid #ccc; background: #f9f9f9 !important; color: #444; }
  .prose table { font-size: 9pt; page-break-inside: avoid; }
  .prose th { background: #eee !important; }
  .prose code { background: #f5f5f5 !important; color: #333 !important; border-color: #ddd !important; }
  .prose .callout { background: #f5f5f5 !important; page-break-inside: avoid; }
  .wrap { max-width: 100% !important; padding: 0 !important; }
  .article-meta { color: #555; font-size: 9pt; }
  .tag { border: 1px solid #ccc !important; color: #555 !important; background: #f5f5f5 !important; }
  .meta { margin-bottom: .4cm !important; }
}

/* ── Mode clair automatique (OS) ──────────── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    /* Surfaces */
    --bg:             #f7f7f9;
    --surface:        #ffffff;
    --surface-2:      #ededf5;
    --line:           #e2e2e8;
    --header-bg:      rgba(247,247,249,.94);
    --code-header-bg: rgba(0,0,0,.04);
    --dot-alpha:      .04;
    /* Texte */
    --txt:            #1c1c24;
    --muted:          #6b6b7b;
    --faint:          #c0c0cc;
    --heading:        #1c1c24;
    /* Accent */
    --accent:         #4f46e5;
    --accent2:        #0ea5e9;
    --accent-rgb:     79 70 229;
    --grad:           linear-gradient(90deg, #4f46e5, #7c3aed 50%, #0ea5e9);
    /* Tags / code */
    --tag-bg:         #eeeeff;
    --tag-fg:         #4338ca;
    --tag-fg-rgb:     67 56 202;
    /* Couleurs sémantiques */
    --amber:          #92400e;
    --amber-rgb:      146 64 14;
    --green:          #16a34a;
    --green-rgb:      22 163 74;
    --danger:         #dc2626;
    --danger-rgb:     220 38 38;
    --accent2-rgb:    14 165 233;
    --border-hover:   #b0b0c0;
  }
  :root:not([data-theme="dark"]) .brand { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
  :root:not([data-theme="dark"]) .not-found-code { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
  :root:not([data-theme="dark"]) .tag {
    color: hsl(var(--tag-hue), 50%, 32%);
    background: hsl(var(--tag-hue), 60%, 93%);
    border-color: hsl(var(--tag-hue), 40%, 78%);
  }
  :root:not([data-theme="dark"]) a.tag:hover { background: hsl(var(--tag-hue), 55%, 86%); border-color: hsl(var(--tag-hue), 40%, 65%); }
  :root:not([data-theme="dark"]) .cloud-tag { color: hsl(var(--tag-hue), 52%, 36%); }
  :root:not([data-theme="dark"]) .cloud-tag:hover { color: hsl(var(--tag-hue), 55%, 22%); }
}

/* ── Callouts / Admonitions ──────────────────────────────── */
.prose .callout {
  padding: .85rem 1.1rem;
  margin: 1.25rem 0;
  border-radius: 0 7px 7px 0;
  border-left: 3px solid;
}
.prose .callout p { margin: 0; }
.prose .callout p + p { margin-top: .45rem; }
.prose .callout-title {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .45rem !important;
}
.callout-note      { background: rgb(var(--accent-rgb)  / .07); border-color: var(--accent);  }
.callout-note      .callout-title { color: var(--accent);  }
.callout-tip       { background: rgb(var(--green-rgb)   / .08); border-color: var(--green);   }
.callout-tip       .callout-title { color: var(--green);   }
.callout-warning   { background: rgb(var(--amber-rgb)   / .08); border-color: var(--amber);   }
.callout-warning   .callout-title { color: var(--amber);   }
.callout-important { background: rgb(var(--accent2-rgb) / .08); border-color: var(--accent2); }
.callout-important .callout-title { color: var(--accent2); }
.callout-danger    { background: rgb(var(--danger-rgb)  / .08); border-color: var(--danger);  }
.callout-danger    .callout-title { color: var(--danger);  }

/* ── Notes de bas de page ────────────────────────────────── */
.prose .footnotes {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .85rem;
  color: var(--muted);
}
.prose .footnotes ol { list-style: decimal; margin-left: 1.4rem; }
.prose .footnotes li { margin-bottom: .4rem; line-height: 1.55; }
.prose .fn-ref {
  font-family: var(--mono);
  font-size: .72em;
  color: var(--accent);
  text-decoration: none;
}
.prose .fn-ref:hover { text-decoration: underline; }
.prose .fn-back {
  color: var(--faint);
  font-size: .85em;
  text-decoration: none;
  margin-left: .2rem;
}
.prose .fn-back:hover { color: var(--accent); }

/* ── Série d'articles ────────────────────────────────────── */
.series-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent2);
  border-radius: 0 0 7px 7px;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
}
.series-label {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: .4rem;
}
.series-name {
  font-size: .9rem;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: .7rem;
}
.series-list { list-style: none; display: flex; flex-direction: column; gap: .3rem; }
.series-list li { display: flex; align-items: baseline; gap: .5rem; font-size: .85rem; }
.series-num { font-family: var(--mono); font-size: .65rem; color: var(--muted); min-width: 1.5rem; flex-shrink: 0; }
.series-list a { color: var(--txt); font-weight: 500; }
.series-list a:hover { color: var(--accent); text-decoration: none; }
.series-current { color: var(--accent2); font-weight: 600; font-size: .85rem; }

/* ── Webmentions ─────────────────────────────────────────── */
.webmentions {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.webmentions-title {
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
  font-weight: 600;
}
.wm-likes { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.wm-likes a img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; margin: 0; border: 1px solid var(--line); transition: opacity .15s; }
.wm-likes a img:hover { opacity: .75; }
.wm-mentions { list-style: none; display: flex; flex-direction: column; gap: .85rem; }
.wm-mention { display: flex; gap: .75rem; font-size: .85rem; }
.wm-mention img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; margin: 0; border: 1px solid var(--line); }
.wm-mention-meta { flex: 1; min-width: 0; }
.wm-mention-author { font-weight: 600; color: var(--heading); font-size: .82rem; }
.wm-mention-text { color: var(--muted); font-size: .82rem; margin-top: .15rem; line-height: 1.45; }
.wm-mention-date { font-family: var(--mono); font-size: .65rem; color: var(--faint); margin-top: .2rem; }
.wm-empty { font-size: .82rem; color: var(--muted); font-style: italic; }

/* ── Mode lecture ────────────────────────────────────────── */
.reading-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .68rem;
  font-family: var(--mono);
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: .2rem .5rem;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  user-select: none;
  vertical-align: middle;
}
.reading-mode-btn:hover { color: var(--txt); border-color: var(--line); background: var(--surface); }
.reading-mode-btn.active { color: var(--accent); border-color: rgb(var(--accent-rgb) / .35); background: rgb(var(--accent-rgb) / .06); }
.reading-mode-btn svg { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; }

body.reading-mode header,
body.reading-mode .breadcrumb,
body.reading-mode .post-nav,
body.reading-mode .related,
body.reading-mode .comments,
body.reading-mode .webmentions,
body.reading-mode .share-bar,
body.reading-mode .back,
body.reading-mode footer { display: none !important; }
body.reading-mode #progress { top: 0; }
body.reading-mode .wrap--article { max-width: 680px !important; margin: 2rem auto; padding-top: 1.5rem; }
body.reading-mode .has-toc .article-layout { grid-template-columns: 1fr !important; }
body.reading-mode .article-sidebar { display: none; }
body.reading-mode .prose { font-size: 1.06rem; line-height: 1.9; }

/* ── Bouton retour en haut ────────────────────────────────── */
#back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, background .15s, color .15s, border-color .15s;
  z-index: 200;
  padding: 0;
}
#back-to-top.visible { opacity: 1; pointer-events: auto; }
#back-to-top:hover { background: var(--surface-2); color: var(--accent); border-color: rgb(var(--accent-rgb) / .4); }
#back-to-top svg { width: 15px; height: 15px; fill: currentColor; display: block; }

/* ── Bouton partage natif (Web Share API) ───────────────── */
.share-btn.native { display: none; }
.share-api-ready .share-btn.native { display: inline-flex; }

/* ── Overflow-wrap global (évite le scroll horizontal) ── */
.prose,
article h1,
.breadcrumb .current,
.series-list a,
.series-current,
.nav-title,
.list h2 a,
.archive-list a,
.wm-mention-text,
.wm-mention-author {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── Responsive ───────────────────────────── */
@media (max-width: 600px) {
  article h1 { font-size: 1.4rem; }
  .prose h2  { font-size: 1.15rem; }
  .prose h3  { font-size: 1rem; }
  .prose pre .hljs { padding: .85rem 1rem; font-size: .8rem; }
  .reading { margin-left: 0; }
  .archive-tags { display: none; }

  /* ── Article page ── */
  .article-meta { flex-wrap: wrap; gap: .35rem .5rem; }
  .post-nav { grid-template-columns: 1fr; gap: .5rem; }
  .post-nav .nav-right { text-align: left; }
  .share-btn { padding: .45rem .7rem; }
  .share-bar { gap: .4rem; padding: .75rem 0; }
  .series-box { padding: .75rem 1rem; }
  .series-list li { flex-wrap: wrap; }
  .wm-mention img { width: 30px; height: 30px; flex-shrink: 0; }

  /* ── Archives ── */
  .archive-list li { flex-wrap: wrap; gap: .3rem .6rem; align-items: center; }
  .archive-list a  { flex: 1 1 55%; font-size: .875rem; min-width: 0; }
  .archive-read    { margin-left: auto; }
  .archive-date    { min-width: auto; }

  /* ── Footer ── */
  footer .wrap { flex-direction: column; align-items: flex-start; gap: .65rem; }
  .footer-links { flex-wrap: wrap; gap: .5rem 1rem; }
}

/* ── Nav : cache le RSS pill sur petit écran (reste dans le footer) ── */
@media (max-width: 480px) {
  .rss-pill { display: none !important; }
}

@media (max-width: 420px) {
  .site-nav { gap: .25rem; }
  article h1 { font-size: 1.2rem; }
  .wrap { padding: 0 1rem; }
  .github-link { padding: .2rem .2rem; }
}

/* ── Table wrapper (scroll horizontal) ────── */
.prose .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.25rem 0;
}
.prose .table-wrap table { margin: 0; width: 100%; }

/* ── iOS safe area (notch / home bar) ──────── */
@supports (padding: env(safe-area-inset-bottom)) {
  #back-to-top {
    bottom: max(1.5rem, calc(env(safe-area-inset-bottom) + .75rem));
    right:  max(1.5rem, calc(env(safe-area-inset-right)  + 1rem));
  }
}

/* ── DCI-P3 (écrans large gamme Apple) ─────── */
@media (color-gamut: p3) {
  :root {
    --accent:  color(display-p3 0.47 0.50 0.99);
    --accent2: color(display-p3 0.10 0.74 0.99);
    --green:   color(display-p3 0.18 0.90 0.48);
    --amber:   color(display-p3 0.99 0.73 0.06);
    --danger:  color(display-p3 0.96 0.17 0.17);
    --grad:    linear-gradient(90deg,
                 color(display-p3 0.47 0.50 0.99),
                 color(display-p3 0.78 0.25 0.98) 50%,
                 color(display-p3 0.10 0.74 0.99));
  }
}
@media (color-gamut: p3) and (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --accent:  color(display-p3 0.24 0.21 0.93);
    --accent2: color(display-p3 0.03 0.64 0.93);
    --green:   color(display-p3 0.04 0.64 0.27);
    --amber:   color(display-p3 0.52 0.22 0.02);
    --danger:  color(display-p3 0.82 0.08 0.08);
    --grad:    linear-gradient(90deg,
                 color(display-p3 0.24 0.21 0.93),
                 color(display-p3 0.49 0.14 0.93) 50%,
                 color(display-p3 0.03 0.64 0.93));
  }
}
@media (color-gamut: p3) {
  :root[data-theme="light"] {
    --accent:  color(display-p3 0.24 0.21 0.93);
    --accent2: color(display-p3 0.03 0.64 0.93);
    --green:   color(display-p3 0.04 0.64 0.27);
    --amber:   color(display-p3 0.52 0.22 0.02);
    --danger:  color(display-p3 0.82 0.08 0.08);
    --grad:    linear-gradient(90deg,
                 color(display-p3 0.24 0.21 0.93),
                 color(display-p3 0.49 0.14 0.93) 50%,
                 color(display-p3 0.03 0.64 0.93));
  }
}

/* ── Mode clair forcé manuellement ─────────── */
:root[data-theme="light"] {
  --bg:             #f7f7f9;
  --surface:        #ffffff;
  --surface-2:      #ededf5;
  --line:           #e2e2e8;
  --header-bg:      rgba(247,247,249,.94);
  --code-header-bg: rgba(0,0,0,.04);
  --dot-alpha:      .04;
  --txt:            #1c1c24;
  --muted:          #6b6b7b;
  --faint:          #c0c0cc;
  --heading:        #1c1c24;
  --accent:         #4f46e5;
  --accent2:        #0ea5e9;
  --accent-rgb:     79 70 229;
  --grad:           linear-gradient(90deg, #4f46e5, #7c3aed 50%, #0ea5e9);
  --tag-bg:         #eeeeff;
  --tag-fg:         #4338ca;
  --tag-fg-rgb:     67 56 202;
  --amber:          #92400e;
  --amber-rgb:      146 64 14;
  --green:          #16a34a;
  --green-rgb:      22 163 74;
  --danger:         #dc2626;
  --danger-rgb:     220 38 38;
  --accent2-rgb:    14 165 233;
  --border-hover:   #b0b0c0;
}
:root[data-theme="light"] .brand { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
:root[data-theme="light"] .not-found-code { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
:root[data-theme="light"] .tag {
  color: hsl(var(--tag-hue), 50%, 32%);
  background: hsl(var(--tag-hue), 60%, 93%);
  border-color: hsl(var(--tag-hue), 40%, 78%);
}
:root[data-theme="light"] a.tag:hover { background: hsl(var(--tag-hue), 55%, 86%); border-color: hsl(var(--tag-hue), 40%, 65%); }
:root[data-theme="light"] .cloud-tag { color: hsl(var(--tag-hue), 52%, 36%); }
:root[data-theme="light"] .cloud-tag:hover { color: hsl(var(--tag-hue), 55%, 22%); }

/* ── Mode sombre forcé (neutralise le mode clair auto) ── */
:root[data-theme="dark"] .tag {
  color: hsl(var(--tag-hue), 70%, 72%);
  background: hsl(var(--tag-hue), 55%, 11%);
  border-color: hsl(var(--tag-hue), 45%, 22%);
}
:root[data-theme="dark"] a.tag:hover { background: hsl(var(--tag-hue), 55%, 18%); border-color: hsl(var(--tag-hue), 45%, 36%); }
:root[data-theme="dark"] .cloud-tag { color: hsl(var(--tag-hue), 65%, 68%); }
:root[data-theme="dark"] .cloud-tag:hover { color: hsl(var(--tag-hue), 70%, 82%); }

/* ── Bouton toggle thème ───────────────────── */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: color .15s, border-color .15s, background .15s;
}
.theme-toggle-btn:hover { color: var(--txt); border-color: var(--line); background: var(--faint); }
.theme-toggle-btn svg { width: 16px; height: 16px; fill: currentColor; display: block; }
/* Sombre par défaut → lune visible, soleil caché */
.theme-toggle-btn .icon-sun  { display: none; }
.theme-toggle-btn .icon-moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle-btn .icon-sun  { display: block; }
  :root:not([data-theme="dark"]) .theme-toggle-btn .icon-moon { display: none; }
}
:root[data-theme="light"] .theme-toggle-btn .icon-sun  { display: block; }
:root[data-theme="light"] .theme-toggle-btn .icon-moon { display: none; }
:root[data-theme="dark"]  .theme-toggle-btn .icon-sun  { display: none; }
:root[data-theme="dark"]  .theme-toggle-btn .icon-moon { display: block; }

/* ── Badge "Nouveau" ───────────────────────── */
.badge-new {
  display: inline-flex;
  align-items: center;
  font-size: .6rem;
  font-family: var(--mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .1rem .35rem;
  border-radius: 4px;
  background: rgb(var(--green-rgb) / .12);
  color: var(--green);
  border: 1px solid rgb(var(--green-rgb) / .25);
  white-space: nowrap;
  vertical-align: middle;
}

/* ── Bouton copier le lien (share-bar) ─────── */
.share-btn.copied { color: var(--green); border-color: rgb(var(--green-rgb) / .35); background: rgb(var(--green-rgb) / .07); }

/* ── Page Statistiques ─────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .85rem;
  margin-bottom: 2.5rem;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.stat-value {
  font-family: var(--mono);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -.04em;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-label { font-size: .72rem; color: var(--muted); font-family: var(--mono); }
.stats-section {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.stats-section-title {
  font-family: var(--mono);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
}
.bar-chart { width: 100%; overflow: hidden; }
.bar-chart svg { width: 100%; height: auto; display: block; }
.bar-rect  { fill: var(--accent); opacity: .75; }
.bar-count { fill: var(--muted); font-family: var(--mono); font-size: 8px; text-anchor: middle; }
.bar-label { fill: var(--muted); font-family: var(--mono); font-size: 8px; text-anchor: middle; }
.stats-top-tags { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.stats-top-tags li { display: flex; align-items: center; gap: .75rem; font-size: .875rem; flex-wrap: wrap; }
.stats-tag-bar { height: 4px; border-radius: 2px; background: var(--accent); opacity: .55; flex-shrink: 0; }
.stats-tag-count { font-family: var(--mono); font-size: .72rem; color: var(--muted); white-space: nowrap; }
.stats-year-table { width: 100%; border-collapse: collapse; font-size: .875rem; margin-top: .5rem; }
.stats-year-table th { text-align: left; padding: .45rem .75rem; border-bottom: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.stats-year-table td { padding: .4rem .75rem; border-bottom: 1px solid var(--faint); }
.stats-year-table tr:last-child td { border-bottom: none; }
.stats-year-table .year-cell { font-family: var(--mono); font-weight: 700; color: var(--accent); }
.stats-year-table .count-cell { color: var(--txt); font-family: var(--mono); }
.stats-year-table .words-cell { color: var(--muted); font-size: .8rem; }

/* ── Skip link accessibilité ────────────────── */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 9999;
  background: var(--accent);
  color: #fff;
  padding: .45rem 1rem;
  border-radius: 0 0 6px 6px;
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s;
  white-space: nowrap;
}
.skip-link:focus { top: 0; outline: none; }

/* ── CSS View Transitions (navigation fluide entre pages) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: 180ms ease-out both vt-out; }
  ::view-transition-new(root) { animation: 180ms ease-out both vt-in;  }
}
@keyframes vt-out { to   { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(6px);  } }

/* ── Footnotes popover ───────────────────────── */
.fn-popover {
  position: absolute;
  z-index: 200;
  max-width: 300px;
  min-width: 140px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .6rem .85rem;
  font-size: .8rem;
  line-height: 1.65;
  color: var(--txt);
  box-shadow: 0 6px 28px rgba(0,0,0,.32);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}
.fn-popover.visible { opacity: 1; }
.fn-popover a { color: var(--accent); }
.fn-ref { cursor: help; }

/* ── Articles visités ────────────────────────── */
.list li.visited { position: relative; }
.list li.visited h2 a { color: var(--muted); }
.list li.visited h2 a::after {
  content: ' ✓';
  font-size: .65em;
  color: var(--green);
  font-weight: 500;
  opacity: .9;
}

/* ── Animation apparition au scroll (articles) ────────── */
.anim-item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .42s ease, transform .42s ease;
}
.anim-item.in-view {
  opacity: 1;
  transform: none;
}
/* Délai en cascade pour les premiers éléments */
.anim-item:nth-child(2) { transition-delay: .06s; }
.anim-item:nth-child(3) { transition-delay: .12s; }
.anim-item:nth-child(4) { transition-delay: .18s; }
.anim-item:nth-child(5) { transition-delay: .22s; }
/* Respect de prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .anim-item { opacity: 1; transform: none; transition: none; }
}