.wip-article .art-splash {
  position: relative;
  height: 66.667vh; height: 66.667svh; min-height: 360px;
  display: grid; place-items: center;
  background: var(--art-splash-bg, var(--sand));
  overflow: hidden;
}
.wip-article .art-splash-fig {
  height: 84%; aspect-ratio: 1 / 1; max-width: calc(100% - 2 * var(--wip-sec-x));
  display: grid; place-items: center;
}
.wip-article .art-splash-fig svg { display: block; width: 100%; height: 100%; }
.wip-article .art-splash-fig svg > rect:first-child { fill: transparent; }
.wip-article .art-splash-fig svg * { vector-effect: non-scaling-stroke; }
.wip-article .art-splash--tranches { color: var(--soot); --bk-fig-bg: var(--art-splash-bg); }
.wip-article .art-splash--tranches .art-splash-fig { aspect-ratio: 600 / 560; }

.wip-article .art-head {
  padding: var(--wip-gap-3) var(--wip-sec-x) var(--wip-gap-2);
  background: var(--bone);
}
.wip-article .art-head-in {
  max-width: var(--max-w-wide); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wip-gap-1);
}
.wip-article .art-crumb { justify-self: start; }
.wip-article .art-back { text-decoration: none; color: var(--ink); }
.wip-article .art-back .wip-ring { font-size: 0.7rem; }
.wip-article .art-title {
  max-width: 22ch;
  font-size: clamp(2rem, 4.6vw, 4.4rem);
  text-wrap: balance;
}
.wip-article .art-head-row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem;
  padding-top: 1.4rem; border-top: 1px solid var(--wip-line);
}
.wip-article .art-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; color: var(--ink); }
.wip-article .art-tags .bk-readtime { margin-left: 0.4rem; font-family: var(--wip-mono); }
.wip-article .art-intro {
  margin: 0; max-width: 46ch;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem); font-weight: 300; line-height: 1.6;
  color: var(--stone);
}
.wip-article .art-fmt { color: var(--ink); }
.wip-article .art-fmt .pg-filter.active { opacity: 1; background: var(--soot); border-color: var(--soot); color: var(--bone); }
@media (min-width: 900px) {
  .wip-article .art-head-row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.6rem; }
  .wip-article .art-tags { grid-column: 1 / span 5; align-self: start; }
  .wip-article .art-intro { grid-column: 7 / span 6; }
}

.wip-article .art-body {
  padding: var(--wip-gap-2) var(--wip-sec-x) var(--wip-sec-y);
  background: var(--bone);
}
.wip-article .art-body-in { max-width: 720px; margin: 0 auto; }
@media (min-width: 1100px) {
  .wip-article .art-body-in { margin-left: max(0px, calc((100% - var(--max-w-wide)) / 2 + var(--max-w-wide) * 4 / 12)); margin-right: auto; }
}
.wip-article .prose { font-size: 1.04rem; font-weight: 300; line-height: 1.85; color: #3f3b37; }
.wip-article .prose p { margin-bottom: var(--wip-gap-p); }
.wip-article .prose strong { color: var(--ink); font-weight: 500; }
.wip-article .prose h2,
.wip-article .prose h3 {
  margin: var(--wip-gap-2) 0 1.4rem;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-weight: 700; line-height: 1.15;
  letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink);
  text-wrap: balance;
}
.wip-article .prose :is(h2, h3)::before { content: none; }
.wip-article .prose :is(h2, h3):first-child { margin-top: 0; }
.wip-article .fmt-content { display: none; }
.wip-article .fmt-content.active { display: block; }
.wip-article .prose em { font-style: italic; color: var(--stone); }
.wip-article .prose ul, .wip-article .prose ol { margin: 0 0 1.7rem 1.2rem; }
.wip-article .prose li { margin-bottom: 0.6rem; }
.wip-article .prose hr { border: none; border-top: 1px solid var(--wip-line); margin: 3rem 0; }
.wip-article .prose p:last-child { margin-bottom: 0; }
.wip-article .prose a[href^="/"]:not([class]) {
  color: inherit; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 0.22em; text-decoration-color: rgba(51, 51, 51, 0.4);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.wip-article .prose a[href^="/"]:not([class]):hover { color: var(--wip-orange); text-decoration-color: currentColor; }
.wip-article .prose .article-footnote {
  margin-top: var(--wip-gap-2); padding-top: 1.2rem; border-top: 1px solid var(--wip-line);
  font-family: var(--wip-mono); font-size: 0.7rem; line-height: 1.7; letter-spacing: 0.01em; color: var(--stone);
}
.wip-article .prose .article-footnote em { font-style: normal; color: inherit; }
.wip-article .art-more { margin-top: var(--wip-gap-1); background: transparent; color: var(--ink); cursor: pointer; font-family: inherit; }
.wip-article .art-more:hover { background: var(--soot); border-color: var(--soot); color: var(--bone); }

.wip-article .art-fig { margin: var(--wip-gap-2) 0; }
.wip-article .art-fig-svg { border: 1px solid var(--wip-line); border-radius: 18px; }
.wip-article .art-fig-svg svg text[font-family*="Martian"] { font-family: var(--wip-mono); }
.wip-article .art-fig figcaption {
  font-family: var(--wip-mono); font-size: 0.68rem; line-height: 1.6; letter-spacing: 0.01em; color: var(--stone);
}

.wip-article .art-fig-svg { overflow: hidden; }
.wip-article .art-fig-svg svg { display: block; width: 100%; height: auto; }
.wip-article .art-fig-svg svg * { vector-effect: non-scaling-stroke; }
.wip-article .art-fig figcaption { margin-top: 0.8rem; max-width: 62ch; }
@media (max-width: 640px) {
  .wip-article .art-fig-svg { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .wip-article .art-fig-svg svg { width: 600px; max-width: none; }
  .wip-article .art-fig-zoom { right: -10px; }
}

.wip-article .art-fig-cadre { position: relative; }
.wip-article .art-fig-svg { cursor: zoom-in; }
.wip-article .art-fig-zoom {
  position: absolute; top: -17px; right: -17px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--wip-line); border-radius: 50%;
  background: #F2F0EC; color: var(--ink);
  cursor: zoom-in; opacity: 0.85;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.wip-article .art-fig-cadre:hover .art-fig-zoom, .wip-article .art-fig-zoom:focus-visible { opacity: 1; }
.wip-article .art-fig-zoom:hover { background: var(--soot); border-color: var(--soot); color: var(--bone); }

.wip-article .art-fig-glisser {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  display: none; align-items: center; justify-content: center;
  width: 52px; height: 36px; border-radius: 999px;
  background: var(--soot); color: var(--bone);
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.wip-article .art-fig-cadre.deborde .art-fig-glisser { display: inline-flex; }
.wip-article .art-fig-cadre.a-glisse .art-fig-glisser { opacity: 0; }
.art-fig-glisser .glisser-doigt { animation: glisser-doigt 1.8s ease-in-out infinite; }
@keyframes glisser-doigt {
  0%, 15% { transform: translateX(0); opacity: 1; }
  60% { transform: translateX(9px); opacity: 0.35; }
  61%, 100% { transform: translateX(0); opacity: 1; }
}

.art-fig-loupe {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  padding: calc(clamp(0.75rem, 3vw, 2.5rem) + env(safe-area-inset-top, 0px)) clamp(0.75rem, 3vw, 2.5rem) calc(clamp(0.75rem, 3vw, 2.5rem) + env(safe-area-inset-bottom, 0px));
  background: rgba(28, 25, 22, 0.88); cursor: zoom-out;
  opacity: 0; transition: opacity 0.25s ease;
}
.art-fig-loupe.ouverte { opacity: 1; }
.art-fig-loupe-panneau {
  position: relative; display: flex; flex-direction: column; gap: 0.9rem;
  width: min(100%, 1400px, calc((100vh - 9rem) * var(--fig-ratio, 1.29)));
  max-height: 100%;
  padding: clamp(0.6rem, 1.6vw, 1.2rem);
  border-radius: 18px; background: #F2F0EC;
  cursor: default;
  transform: scale(0.97); transition: transform 0.25s ease;
}
.art-fig-loupe.ouverte .art-fig-loupe-panneau { transform: scale(1); }
.art-fig-loupe-zone { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.art-fig-loupe-svg { position: relative; min-height: 0; min-width: 0; overflow: auto; border-radius: 10px; }
.art-fig-loupe-svg svg { display: block; width: 100%; height: auto; }
.art-fig-loupe-svg svg text[font-family*="Martian"] { font-family: var(--wip-mono); }
.art-fig-loupe-legende {
  margin: 0; max-width: 80ch;
  font-family: var(--wip-mono); font-size: 0.7rem; line-height: 1.6; color: var(--stone);
}
.art-fig-loupe-fermer {
  position: absolute; top: calc(1rem + env(safe-area-inset-top, 0px)); right: 1.2rem; padding: 0.5rem 0.9rem;
  border: 1px solid var(--bone); border-radius: 999px; background: none; color: var(--bone);
  font: 600 0.65rem/1 'General Sans', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
}
.art-fig-loupe .art-fig-glisser {
  position: absolute; right: 12px; bottom: 12px; display: none; align-items: center; justify-content: center;
  width: 52px; height: 36px; border-radius: 999px; background: var(--soot); color: var(--bone);
  pointer-events: none; transition: opacity 0.35s ease;
}
@media (max-width: 700px) {
  .art-fig-loupe { padding: 3.6rem 0.6rem 0.6rem; }
  .art-fig-loupe-panneau { width: 100%; }
  .art-fig-loupe-svg { overflow: auto; -webkit-overflow-scrolling: touch; }
  .art-fig-loupe-svg svg { width: 960px; max-width: none; }
  .art-fig-loupe .art-fig-glisser { display: inline-flex; }
  .art-fig-loupe.a-glisse .art-fig-glisser { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .art-fig-loupe, .art-fig-loupe-panneau { transition: none; }
  .art-fig-glisser .glisser-doigt { animation: none; }
}

.wip-article .art-next-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 760px)  { .wip-article .art-next-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .wip-article .art-next-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wip-article .art-next-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.wip-article .art-next-cover {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; padding: 1.4rem;
  background: var(--art-splash-bg, var(--sand));
  border-bottom: 1px solid var(--wip-line);
}
.wip-article .art-next-cover svg { display: block; height: 100%; width: auto; max-width: 100%; transition: transform 0.6s var(--ease-expo, ease); }
.wip-article .art-next-cover svg > rect:first-child { fill: transparent; }
.wip-article .art-next-cover--tranches { color: var(--soot); --bk-fig-bg: var(--art-splash-bg); }
.wip-article .art-next-card:hover .art-next-cover svg { transform: scale(1.04); }
.wip-article .art-next-body { display: flex; flex: 1; flex-direction: column; gap: 1.1rem; padding: 1.6rem 1.6rem 1.8rem; }
.wip-article .art-next-title { font-size: clamp(1.2rem, 1.6vw, 1.5rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.025em; }
.wip-article .art-next-title a { color: inherit; text-decoration: none; }
.wip-article .art-next-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.wip-article .art-next-body .bk-desc { flex: 1; }
.wip-article .art-next-body .bk-formats { margin-top: 0; padding-top: 0.2rem; border-top: 0; }
@media (prefers-reduced-motion: reduce) { .wip-article .art-next-cover svg { transition: none; } }

.prose .ecoute-titre { margin: 0 0 2.8rem; }
.prose .ecoute-titre p { margin-bottom: 0.9rem; }

.ecoute-pilule {
  display: flex; align-items: center; gap: 1.3rem;
  margin: 0 0 1rem; padding: 0.55rem 2rem 0.55rem 0.55rem;
  background: var(--sand-light); border-radius: 999px;
}
.ecoute-macaron {
  flex: none; width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  background: #111; box-shadow: 0 0 0 5px #111, 0 2px 8px rgba(0, 0, 0, 0.25);
  margin: 5px;
}
.ecoute-macaron--vide {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, #1a1a19 0 31%, #2c2c2a 32% 33%, #1a1a19 34%);
}
.ecoute-macaron--vide span {
  width: 52%; height: 52%; border-radius: 50%; background: var(--stone);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 0.55rem; line-height: 1.25; letter-spacing: 0.06em; color: var(--bone);
}
.ecoute-pilule-texte { min-width: 0; }
.prose .ecoute-pilule-texte p { margin: 0; line-height: 1.35; }
.ecoute-entete { display: flex; align-items: baseline; gap: 0.7rem; }
.ecoute-num {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; color: var(--stone);
  font-variant-numeric: tabular-nums;
}
.ecoute-artiste {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soot);
}
.prose .ecoute-morceau { font-size: 1.3rem; font-weight: 400; color: var(--soot); margin: 0.15rem 0 0.2rem; }
.prose .ecoute-annee { font-size: 0.78rem; color: var(--stone); }
.prose .ecoute-meta { font-size: 0.82rem; color: var(--stone); margin-bottom: 1rem; }

.prose .ecoute-liens { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.1rem 0 0; }
.ecoute-liens a, .ecoute-absent {
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.5rem 0.9rem; border: 1px solid var(--soot); border-radius: 999px;
  color: var(--soot); text-decoration: none; line-height: 1;
}
.ecoute-liens a:hover { background: var(--soot); color: var(--bone); }
.ecoute-absent { border-color: rgba(51, 51, 51, 0.2); color: rgba(51, 51, 51, 0.45); }

@media (max-width: 480px) {
  .ecoute-pilule { gap: 0.9rem; padding-right: 1.2rem; }
  .ecoute-macaron { width: 68px; height: 68px; box-shadow: 0 0 0 4px #111, 0 2px 6px rgba(0, 0, 0, 0.25); margin: 4px; }
  .prose .ecoute-morceau { font-size: 1.1rem; }
}

.ecoute-zoom {
  flex: none; padding: 0; border: 0; background: none; border-radius: 50%;
  cursor: zoom-in; line-height: 0;
}
.ecoute-zoom:focus-visible { outline: 2px solid var(--soot); outline-offset: 4px; }
.ecoute-zoom .ecoute-macaron { transition: transform 0.25s ease; }
.ecoute-zoom:hover .ecoute-macaron { transform: rotate(-8deg) scale(1.04); }
.ecoute-loupe {
  position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; background: rgba(28, 25, 22, 0.88); cursor: zoom-out;
  opacity: 0; transition: opacity 0.25s ease;
}
.ecoute-loupe.ouverte { opacity: 1; }
.ecoute-loupe img {
  width: min(80vmin, 600px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
  background: #111; box-shadow: 0 0 0 10px #111, 0 12px 40px rgba(0, 0, 0, 0.5);
  transform: scale(0.94); transition: transform 0.25s ease;
}
.ecoute-loupe.ouverte img { transform: scale(1); }
.ecoute-loupe-fermer {
  position: absolute; top: calc(1rem + env(safe-area-inset-top, 0px)); right: 1.2rem; padding: 0.5rem 0.9rem;
  border: 1px solid var(--bone); border-radius: 999px; background: none; color: var(--bone);
  font: 600 0.65rem/1 'General Sans', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
}
.loupe-ouverte .site-head { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .ecoute-loupe, .ecoute-loupe img, .ecoute-zoom .ecoute-macaron { transition: none; }
}

.art-progress {
  position: fixed; z-index: 205; left: 50%; bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--wip-line); border-radius: 999px;
  background: rgba(242, 240, 236, 0.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--wip-mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--ink);
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.art-progress.visible { opacity: 1; transform: translate(-50%, 0); }
.art-progress-pct { min-width: 3.4em; text-align: right; font-variant-numeric: tabular-nums; }
.art-progress-track { position: relative; width: 140px; height: 2px; border-radius: 999px; background: rgba(51, 51, 51, 0.12); overflow: hidden; }
.art-progress-fill { position: absolute; inset: 0; background: var(--soot); transform-origin: left; transform: scaleX(0); }
.loupe-ouverte .art-progress { opacity: 0; }
@media (max-width: 768px) {
  .art-progress {
    left: 0; right: 0; top: env(safe-area-inset-top, 0px); bottom: auto;
    display: block; padding: 0; border: 0; border-radius: 0; background: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    transform: translateY(-6px);
  }
  .art-progress.visible { transform: none; }
  .art-progress-track { display: block; width: 100%; height: 3px; border-radius: 0; background: rgba(51, 51, 51, 0.1); }
  .art-progress-fill { background: var(--wip-orange); }
  .art-progress-pct {
    position: absolute; top: calc(var(--mv-head, 64px) / 2 - 0.1rem); left: 50%; transform: translate(-50%, -50%);
    min-width: 0; padding: 0.3rem 0.6rem; border-radius: 999px;
    background: rgba(242, 240, 236, 0.94); border: 1px solid var(--wip-line);
    font-size: 0.6rem;
  }
}
@media (prefers-reduced-motion: reduce) { .art-progress { transition: none; } }

.wip-article .art-byline {
  flex-basis: 100%;
  margin-top: 0.6rem;
  font-family: var(--wip-mono); font-size: 0.66rem; letter-spacing: 0.06em;
  color: var(--ink); opacity: 0.7;
}
.wip-article .art-byline a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.wip-article .art-byline a:hover { opacity: 0.75; }

.wip-article .prose table {
  width: 100%; margin: 0 0 var(--wip-gap-p); border-collapse: collapse;
  font-size: 0.9rem; line-height: 1.55; border-top: 1px solid var(--wip-line);
}
.wip-article .prose th, .wip-article .prose td { padding: 0.75rem 1rem 0.75rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--wip-line); }
.wip-article .prose thead th {
  font-family: var(--wip-mono); font-size: 0.62rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone);
}
.wip-article .prose tbody th { color: var(--ink); font-weight: 500; }
@media (max-width: 699.98px) {
  .wip-article .prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

.wip-article .art-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1.2rem; }
.wip-article .art-theme {
  background: none; color: var(--ink); cursor: pointer;
  font-family: inherit;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.wip-article .art-theme:hover { background: var(--soot); border-color: var(--soot); color: var(--bone); }
.wip-article .art-theme svg { display: block; }
:root:not([data-theme]) .wip-article .art-theme { display: none; }
@media (max-width: 479.98px) {
  .wip-article .art-theme { padding: 0.42rem; }
  .wip-article .art-theme-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

.theme-bascule .wip-article, .theme-bascule .wip-article main * {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, fill 0.4s ease, stroke 0.4s ease !important;
}

:root[data-theme="sombre"] { color-scheme: dark; }
:root[data-theme="sombre"] body.wip-article { background: #1c1916; }
:root[data-theme="sombre"] .wip-article main {
  --bone: #1c1916;
  --soot: #ece8e1;
  --ink: #ece8e1;
  --stone: #a8a197;
  --sand-light: #151310;
  --wip-panel: #23201c;
  --wip-line: #3a3632;
  --ink-08: rgba(236, 232, 225, 0.08);
  --ink-12: rgba(236, 232, 225, 0.14);
  --ink-20: rgba(236, 232, 225, 0.22);
  --ink-35: rgba(236, 232, 225, 0.35);
  --bone-35: rgba(28, 25, 22, 0.35);
  --bone-55: rgba(28, 25, 22, 0.55);
  --bone-65: rgba(28, 25, 22, 0.7);
  --bone-75: rgba(28, 25, 22, 0.75);
  color: var(--ink);
}
:root[data-theme="sombre"] .wip-article main .wip-grain-layer { background-image: url("../img/grain-sombre.webp"); }
:root[data-theme="clair"] .wip-article main .wip-grain-layer { background-image: url("../img/grain-clair.webp"); }
:root[data-theme="sombre"] .wip-article main .wip-sep { border-top-color: rgba(248, 247, 243, 0.16); }
:root[data-theme="clair"] .wip-article main .wip-sep { border-top-color: rgba(28, 25, 22, 0.4); }

:root[data-theme="sombre"] .wip-article .art-splash,
:root[data-theme="sombre"] .wip-article .art-next-cover { background: #0e0c0a; --bk-fig-bg: #0e0c0a; }
:root[data-theme="sombre"] .wip-article .prose { color: #c9c3b9; }
:root[data-theme="sombre"] .wip-article .prose a[href^="/"]:not([class]) { text-decoration-color: rgba(236, 232, 225, 0.4); }
:root[data-theme="sombre"] .wip-article .prose a[href^="/"]:not([class]):hover { color: #f07a45; }
:root[data-theme="sombre"] .wip-article .art-fig-svg { border-color: #2b2825; }
:root[data-theme="sombre"] .wip-article .art-fig-zoom { background: #23201c; }
:root[data-theme="sombre"] .wip-article .bk-panel--dark .bk-stade-title em { color: #625d55; }
:root[data-theme="sombre"] .wip-article .bk-panel--sand { --stone: #625d55; --bone: #e9dcc9; --soot: #1c1916; color: #1c1916; }
:root[data-theme="sombre"] .wip-article .ecoute-macaron--vide span { background: #625d55; color: #f8f7f3; }
:root[data-theme="sombre"] .wip-article .ecoute-absent { border-color: rgba(236, 232, 225, 0.2); color: rgba(236, 232, 225, 0.45); }

:root[data-theme="sombre"] .art-fig-loupe-panneau { background: #0e0c0a; }
:root[data-theme="sombre"] .art-fig-loupe-legende { color: #a8a197; }
:root[data-theme="sombre"] .art-progress,
:root[data-theme="sombre"] .art-progress-pct { background: rgba(28, 25, 22, 0.92); border-color: #3a3632; color: #ece8e1; }
:root[data-theme="sombre"] .art-progress-track { background: rgba(236, 232, 225, 0.14); }
:root[data-theme="sombre"] .art-progress-fill { background: #ece8e1; }
@media (max-width: 768px) {
  :root[data-theme="sombre"] .art-progress { background: none; }
  :root[data-theme="sombre"] .art-progress-fill { background: var(--wip-orange); }
}

:root[data-theme="sombre"] .wip-article :is(.art-splash-fig, .art-next-cover, .art-fig-svg) > svg:has(> rect:first-child:is([fill="#f2f0ec" i], [fill="#e9dcc9" i])),
:root[data-theme="sombre"] .art-fig-loupe-svg > svg:has(> rect:first-child:is([fill="#f2f0ec" i], [fill="#e9dcc9" i])) {
  --fig-f2f0ec: #0e0c0a;
  --fig-e9dcc9: #0e0c0a;
  --fig-1c1916: #f8f7f3;
  --fig-625d55: #979187;
  --fig-979187: #6e685f;
  --fig-d1cec8: #2b2825;
  --fig-d8d2c8: #3a3632;
  --fig-e6e4df: #23201c;
  --fig-e9e5de: #23201c;
}
:root[data-theme="sombre"] :is(.art-splash-fig, .art-next-cover, .art-fig-svg, .art-fig-loupe-svg) svg [fill="#f2f0ec" i] { fill: var(--fig-f2f0ec, #f2f0ec); }
:root[data-theme="sombre"] :is(.art-splash-fig, .art-next-cover, .art-fig-svg, .art-fig-loupe-svg) svg [fill="#e9dcc9" i] { fill: var(--fig-e9dcc9, #e9dcc9); }
:root[data-theme="sombre"] :is(.art-splash-fig, .art-next-cover, .art-fig-svg, .art-fig-loupe-svg) svg [fill="#1c1916" i] { fill: var(--fig-1c1916, #1c1916); }
:root[data-theme="sombre"] :is(.art-splash-fig, .art-next-cover, .art-fig-svg, .art-fig-loupe-svg) svg [fill="#625d55" i] { fill: var(--fig-625d55, #625d55); }
:root[data-theme="sombre"] :is(.art-splash-fig, .art-next-cover, .art-fig-svg, .art-fig-loupe-svg) svg [fill="#979187" i] { fill: var(--fig-979187, #979187); }
:root[data-theme="sombre"] :is(.art-splash-fig, .art-next-cover, .art-fig-svg, .art-fig-loupe-svg) svg [fill="#e6e4df" i] { fill: var(--fig-e6e4df, #e6e4df); }
:root[data-theme="sombre"] :is(.art-splash-fig, .art-next-cover, .art-fig-svg, .art-fig-loupe-svg) svg [fill="#e9e5de" i] { fill: var(--fig-e9e5de, #e9e5de); }
:root[data-theme="sombre"] :is(.art-splash-fig, .art-next-cover, .art-fig-svg, .art-fig-loupe-svg) svg [stroke="#f2f0ec" i] { stroke: var(--fig-f2f0ec, #f2f0ec); }
:root[data-theme="sombre"] :is(.art-splash-fig, .art-next-cover, .art-fig-svg, .art-fig-loupe-svg) svg [stroke="#1c1916" i] { stroke: var(--fig-1c1916, #1c1916); }
:root[data-theme="sombre"] :is(.art-splash-fig, .art-next-cover, .art-fig-svg, .art-fig-loupe-svg) svg [stroke="#625d55" i] { stroke: var(--fig-625d55, #625d55); }
:root[data-theme="sombre"] :is(.art-splash-fig, .art-next-cover, .art-fig-svg, .art-fig-loupe-svg) svg [stroke="#979187" i] { stroke: var(--fig-979187, #979187); }
:root[data-theme="sombre"] :is(.art-splash-fig, .art-next-cover, .art-fig-svg, .art-fig-loupe-svg) svg [stroke="#d1cec8" i] { stroke: var(--fig-d1cec8, #d1cec8); }
:root[data-theme="sombre"] :is(.art-splash-fig, .art-next-cover, .art-fig-svg, .art-fig-loupe-svg) svg [stroke="#d8d2c8" i] { stroke: var(--fig-d8d2c8, #d8d2c8); }