/* ═══════════════════════════════════════════════════════════════
   ARSÕLYA — Livre numérique : liseuse + gabarits de pages
   ------------------------------------------------------------
   Deux systèmes d'unités :
     • chrome de la liseuse  →  calc(N * var(--u))   (socle du site)
     • intérieur d'une page  →  calc(N * var(--bk-u))
       --bk-u = largeurPage / 520, borné à [0.80 ; 1.30], posé par
       js/book-engine.js sur .bk-root.
   DA : page #fffefc, encre #0b0d10, gris rgba(11,13,16,.56),
        fond de liseuse #efeeec. Titres Times. Traits 1px.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────── Socle ──────────────────────────── */

body.bk-reading { overflow: hidden; }
body.bk-reading .ars-header { display: none !important; }

.bk-root {
  --bk-pw: 420px;
  --bk-ph: 571px;
  --bk-u: 1px;

  --bk-paper:  #fffefc;
  --bk-ink:    #0b0d10;
  --bk-mute:   rgba(11, 13, 16, .56);
  --bk-soft:   rgba(11, 13, 16, .80);
  --bk-faint:  rgba(11, 13, 16, .12);
  --bk-hair:   rgba(11, 13, 16, .26);
  --bk-bg:     #efeeec;

  --bk-serif: "Times New Roman", Times, serif;
  --bk-sans:  -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --bk-ease:  cubic-bezier(.22, 1, .36, 1);

  position: fixed;
  inset: 0;
  z-index: 99000;
  display: flex;
  flex-direction: column;
  background: var(--bk-bg);
  color: var(--bk-ink);
  font-family: var(--bk-sans);
  opacity: 0;
  transition: opacity .26s var(--bk-ease);
  overscroll-behavior: contain;
  -webkit-font-smoothing: antialiased;
}
.bk-root.bk-in { opacity: 1; }

.bk-root *,
.bk-root *::before,
.bk-root *::after { box-sizing: border-box; }

.bk-root .bk-o { font-family: "Times New Roman", Times, serif; }

.bk-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.bk-root :focus-visible {
  outline: 1px solid var(--bk-ink);
  outline-offset: calc(3 * var(--u));
}

/* ──────────────── Onglets d'accès direct (chapitres) ────────────
   Deuxième barre, sous celle du haut. Elle n'existe que pour les livres
   dont des chapitres sont marqués `tab: true` : c'est l'accès « La matière /
   Unies / Métallisées / Paillettes » demandé pour la Résine. Sobre : un
   filet sous l'onglet actif, rien d'autre. Sur téléphone, la barre défile
   horizontalement et garde une seule ligne. */

.bk-tabs {
  flex: none;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: calc(2 * var(--u));
  height: calc(38 * var(--u));
  padding: 0 calc(14 * var(--u));
  border-bottom: 1px solid rgba(11, 13, 16, .10);
  background: rgba(252, 251, 250, .92);
  -webkit-backdrop-filter: saturate(1.3) blur(8px);
  backdrop-filter: saturate(1.3) blur(8px);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  z-index: 3;
}
.bk-tabs::-webkit-scrollbar { display: none; }
.bk-tabs[hidden] { display: none; }

.bk-tab {
  flex: none;
  position: relative;
  display: inline-flex; align-items: center;
  padding: 0 calc(14 * var(--u));
  border: 0; background: none;
  font-family: var(--bk-sans);
  font-size: calc(11 * var(--u));
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bk-mute);
  cursor: pointer;
  transition: color .2s;
}
.bk-tab:hover { color: var(--bk-ink); }
.bk-tab::after {
  content: ""; position: absolute;
  left: calc(14 * var(--u)); right: calc(14 * var(--u)); bottom: 0;
  height: 1px; background: var(--bk-ink);
  transform: scaleX(0);
  transition: transform .22s var(--bk-ease);
}
.bk-tab[aria-current="true"] { color: var(--bk-ink); }
.bk-tab[aria-current="true"]::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .bk-tab::after { transition: none; }
}

/* ───────────────────────── Barre du haut ────────────────────── */

.bk-topbar {
  flex: none;
  position: relative;
  height: calc(52 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(18 * var(--u));
  border-bottom: 1px solid rgba(11, 13, 16, .10);
  background: rgba(247, 246, 245, .86);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  z-index: 4;
}

.bk-close {
  display: inline-flex; align-items: center; gap: calc(8 * var(--u));
  height: calc(30 * var(--u));
  padding: 0 calc(13 * var(--u));
  border: 1px solid rgba(11, 13, 16, .18);
  border-radius: 999px;
  background: transparent;
  color: var(--bk-ink);
  font-family: var(--bk-sans);
  font-size: calc(11 * var(--u));
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.bk-close:hover { background: rgba(11, 13, 16, .05); border-color: rgba(11,13,16,.57); }
.bk-close-x { font-size: calc(12 * var(--u)); line-height: 1; opacity: .7; }

.bk-ttl {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: baseline; gap: calc(7 * var(--u));
  white-space: nowrap;
  pointer-events: none;
}
.bk-ttl-b {
  font-family: var(--bk-serif);
  font-size: calc(15 * var(--u));
  letter-spacing: .20em;
}
.bk-ttl-s { color: var(--bk-mute); font-size: calc(11 * var(--u)); }
.bk-ttl-n {
  font-family: var(--bk-serif);
  font-size: calc(15 * var(--u));
  letter-spacing: .02em;
}

.bk-right { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.bk-chap {
  max-width: calc(220 * var(--u));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: calc(10.5 * var(--u));
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bk-mute);
}
.bk-tocbtn {
  height: calc(30 * var(--u));
  padding: 0 calc(14 * var(--u));
  border: 1px solid rgba(11, 13, 16, .18);
  border-radius: 999px;
  background: transparent;
  color: var(--bk-ink);
  font-family: var(--bk-sans);
  font-size: calc(11 * var(--u));
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.bk-tocbtn:hover { background: rgba(11, 13, 16, .05); border-color: rgba(11,13,16,.57); }

/* ──────────────────────────── Scène ─────────────────────────── */

.bk-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bk-vp {
  flex: 1 1 auto;
  height: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bk-pager {
  flex: none;
  height: calc(42 * var(--u));
  display: flex; align-items: center; justify-content: center;
  font-size: calc(10.5 * var(--u));
  letter-spacing: .18em;
  color: var(--bk-mute);
  font-variant-numeric: tabular-nums;
}

/* flèches latérales */
.bk-nav {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: calc(42 * var(--u)); height: calc(42 * var(--u));
  border-radius: 50%;
  border: 1px solid rgba(11, 13, 16, .18);
  background: rgba(255, 255, 255, .62);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s, border-color .2s, opacity .2s;
  z-index: 3;
}
.bk-nav--prev { left: calc(14 * var(--u)); }
.bk-nav--next { right: calc(14 * var(--u)); }
.bk-nav:hover:not(:disabled) { background: #fff; border-color: rgba(11,13,16,.57); }
.bk-nav:disabled { opacity: .22; cursor: default; }
.bk-nav span {
  width: calc(9 * var(--u)); height: calc(9 * var(--u));
  border-left: 1px solid var(--bk-ink);
  border-bottom: 1px solid var(--bk-ink);
}
.bk-nav--prev span { transform: rotate(45deg); margin-left: calc(3 * var(--u)); }
.bk-nav--next span { transform: rotate(-135deg); margin-right: calc(3 * var(--u)); }

/* ──────────────────────────── Le livre ──────────────────────── */

.bk-book {
  position: relative;
  width: calc(var(--bk-pw) * 2);
  height: var(--bk-ph);
  perspective: calc(2600 * var(--bk-u));
  flex: none;
}
.bk-root[data-mode="single"] .bk-book { width: var(--bk-pw); }

.bk-slot {
  position: absolute; top: 0;
  width: var(--bk-pw); height: var(--bk-ph);
  background: var(--bk-paper);
  box-shadow:
    0 calc(2 * var(--bk-u)) calc(5 * var(--bk-u)) rgba(11, 13, 16, .07),
    0 calc(16 * var(--bk-u)) calc(42 * var(--bk-u)) rgba(11, 13, 16, .17);
}
.bk-slot--l { left: 0; }
.bk-slot--r { right: 0; }
.bk-root[data-mode="single"] .bk-slot--l { display: none; }
.bk-slot[data-empty] { background: transparent; box-shadow: none; }

/* épaisseur de papier sur les tranches extérieures */
.bk-slot::after {
  content: '';
  position: absolute; top: calc(4 * var(--bk-u)); bottom: calc(4 * var(--bk-u));
  width: calc(4 * var(--bk-u));
  background: linear-gradient(90deg, #faf9f7, #e6e4e0);
  box-shadow: 0 1px 2px rgba(11, 13, 16, .10);
}
.bk-slot[data-empty]::after { display: none; }
.bk-slot--l::after { left: calc(-4 * var(--bk-u)); border-radius: 1px 0 0 1px;
  background: linear-gradient(270deg, #faf9f7, #e6e4e0); }
.bk-slot--r::after { right: calc(-4 * var(--bk-u)); border-radius: 0 1px 1px 0; }

/* reliure centrale */
.bk-spine {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: calc(44 * var(--bk-u));
  transform: translateX(-50%);
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(11, 13, 16, 0) 0%,
      rgba(11, 13, 16, .055) 38%,
      rgba(11, 13, 16, .13) 49.6%,
      rgba(11, 13, 16, .13) 50.4%,
      rgba(11, 13, 16, .055) 62%,
      rgba(11, 13, 16, 0) 100%);
  z-index: 2;
  transition: opacity .25s var(--bk-ease);
}
.bk-slot--l[data-empty] ~ .bk-spine { opacity: 0; }
.bk-root[data-mode="single"] .bk-spine { display: none; }

/* ombres portées mobiles pendant le feuilletage */
.bk-cast {
  position: absolute; top: 0; bottom: 0;
  width: var(--bk-pw);
  pointer-events: none; opacity: 0; z-index: 3;
}
.bk-cast--l { left: 0; background: linear-gradient(270deg, rgba(11, 13, 16, .55), rgba(11, 13, 16, 0) 62%); }
.bk-cast--r { right: 0; background: linear-gradient(90deg, rgba(11, 13, 16, .55), rgba(11, 13, 16, 0) 62%); }
.bk-root[data-mode="single"] .bk-cast--l { display: none; }

/* ─────────────────────── La feuille qui pivote ──────────────── */

.bk-leaf {
  position: absolute; top: 0; right: 0;
  width: var(--bk-pw); height: var(--bk-ph);
  transform-origin: left center;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
  z-index: 6;
}
.bk-leaf[hidden] { display: none; }
.bk-leaf-f, .bk-leaf-b {
  position: absolute; inset: 0;
  background: var(--bk-paper);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  box-shadow: 0 calc(10 * var(--bk-u)) calc(30 * var(--bk-u)) rgba(11, 13, 16, .18);
}
.bk-leaf-b { transform: rotateY(180deg); }
.bk-leaf-pg { position: absolute; inset: 0; }
.bk-leaf-f[data-empty], .bk-leaf-b[data-empty] { background: var(--bk-bg); box-shadow: none; }
.bk-leaf-shade {
  position: absolute; inset: 0; z-index: 5; opacity: 0; pointer-events: none;
}
.bk-leaf-f .bk-leaf-shade {
  background: linear-gradient(90deg, rgba(11, 13, 16, .85) 0%, rgba(11, 13, 16, .18) 34%, rgba(11, 13, 16, 0) 72%);
}
.bk-leaf-b .bk-leaf-shade {
  background: linear-gradient(270deg, rgba(11, 13, 16, .85) 0%, rgba(11, 13, 16, .18) 34%, rgba(11, 13, 16, 0) 72%);
}

/* ═══════════════════════════ LA PAGE ════════════════════════════ */

.bk-page {
  position: relative;
  width: 100%; height: 100%;
  background: var(--bk-paper);
  color: var(--bk-ink);
  display: flex; flex-direction: column;
  padding: calc(32 * var(--bk-u)) calc(48 * var(--bk-u)) calc(22 * var(--bk-u));
  outline: none;
}

/* Gouttière intérieure plus généreuse côté reliure.
   IMPÉRATIF : la SOMME des paddings horizontaux reste 96 u dans tous
   les cas (page de gauche, page de droite, page de mesure) — sinon la
   pagination mesurée ne correspondrait plus à la page rendue. */
.bk-slot--l .bk-page, .bk-leaf-b .bk-page {
  padding-left: calc(44 * var(--bk-u)); padding-right: calc(52 * var(--bk-u));
}
.bk-slot--r .bk-page, .bk-leaf-f .bk-page {
  padding-left: calc(52 * var(--bk-u)); padding-right: calc(44 * var(--bk-u));
}
.bk-root[data-mode="single"] .bk-page {
  padding-left: calc(34 * var(--bk-u)); padding-right: calc(34 * var(--bk-u));
}

.bk-page-head {
  flex: none;
  height: calc(22 * var(--bk-u));
  display: flex; align-items: flex-start;
  font-size: calc(9 * var(--bk-u));
  letter-spacing: .20em;
  text-transform: uppercase;
  color: rgba(11, 13, 16, .58);
  white-space: nowrap; overflow: hidden;
}
.bk-slot--r .bk-page-head, .bk-leaf-f .bk-page-head { justify-content: flex-end; }
.bk-root[data-mode="single"] .bk-page-head { justify-content: flex-start; }

.bk-page-body {
  flex: 1 1 auto;
  min-height: 0;
  display: block;
  overflow: visible;
}

/* Page très peu remplie (fin de chapitre, sommaire court, bloc insécable
   resté seul) : le moteur la marque à la composition et on centre sa
   colonne. Une page de respiration assumée vaut mieux qu'un bloc tassé en
   tête avec la moitié basse en blanc. */
.bk-page[data-air] .bk-page-body {
  display: flex; flex-direction: column; justify-content: center;
}

.bk-page-foot {
  flex: none;
  height: calc(20 * var(--bk-u));
  display: flex; align-items: flex-end;
  font-size: calc(9.5 * var(--bk-u));
  letter-spacing: .14em;
  color: rgba(11, 13, 16, .58);
  font-variant-numeric: tabular-nums;
}
.bk-slot--r .bk-page-foot, .bk-leaf-f .bk-page-foot { justify-content: flex-end; }
.bk-root[data-mode="single"] .bk-page-foot { justify-content: center; }

/* pages pleine page : pas de chrome de page */
.bk-page--cover, .bk-page--chapter, .bk-page--plate { padding: 0 !important; }
.bk-page--cover .bk-page-head, .bk-page--cover .bk-page-foot,
.bk-page--chapter .bk-page-head, .bk-page--chapter .bk-page-foot,
.bk-page--plate .bk-page-head, .bk-page--plate .bk-page-foot { display: none; }
.bk-page--cta .bk-page-head, .bk-page--colophon .bk-page-head { visibility: hidden; }

/* ───────────────────── Rythme vertical des blocs ────────────── */

.bk-b + .bk-b         { margin-top: calc(17 * var(--bk-u)); }
.bk-b--h + .bk-b      { margin-top: calc(13 * var(--bk-u)); }
.bk-b + .bk-b--h      { margin-top: calc(30 * var(--bk-u)); }
.bk-b--p + .bk-b--p   { margin-top: calc(10 * var(--bk-u)); }
.bk-b + .bk-b--rule   { margin-top: calc(22 * var(--bk-u)); }
.bk-b--rule + .bk-b   { margin-top: calc(22 * var(--bk-u)); }
.bk-b + .bk-b--fig, .bk-b--fig + .bk-b { margin-top: calc(21 * var(--bk-u)); }
.bk-b + .bk-b--quote, .bk-b--quote + .bk-b { margin-top: calc(26 * var(--bk-u)); }

.bk-root h1, .bk-root h2, .bk-root h3, .bk-root h4,
.bk-root p, .bk-root ul, .bk-root ol, .bk-root dl,
.bk-root dd, .bk-root dt, .bk-root figure, .bk-root blockquote,
.bk-root table { margin: 0; padding: 0; }
.bk-root ul, .bk-root ol { list-style: none; }

/* ─────────────────────── Gabarits : textes ──────────────────── */

.bk-eyebrow {
  font-size: calc(9 * var(--bk-u));
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--bk-mute);
  margin-bottom: calc(10 * var(--bk-u)) !important;
}

.bk-h2 {
  font-family: var(--bk-serif);
  font-weight: 400;
  font-size: calc(27 * var(--bk-u));
  line-height: 1.1;
  letter-spacing: -.005em;
}
.bk-h2-rule {
  display: block;
  width: calc(32 * var(--bk-u)); height: 1px;
  background: var(--bk-hair);
  margin-top: calc(13 * var(--bk-u));
}

/* Ouverture de chapitre « en ligne » : la même hiérarchie qu'une page
   d'ouverture, en tête de page, sans consommer de page. */
.bk-chapin { display: block; }
.bk-chapin-t {
  font-family: var(--bk-serif);
  font-weight: 400;
  font-size: calc(32 * var(--bk-u));
  line-height: 1.06;
  letter-spacing: -.008em;
  margin-top: calc(5 * var(--bk-u));
}
.bk-chapin-s {
  font-family: var(--bk-serif);
  font-style: italic;
  font-size: calc(14 * var(--bk-u));
  line-height: 1.38;
  color: var(--bk-mute);
  margin-top: calc(8 * var(--bk-u));
}

.bk-suite {
  font-family: var(--bk-serif);
  font-style: italic;
  font-size: .62em;
  color: var(--bk-mute);
  letter-spacing: 0;
}

.bk-sub {
  font-size: calc(9 * var(--bk-u));
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bk-mute);
  margin-bottom: calc(11 * var(--bk-u)) !important;
}

.bk-lead {
  font-family: var(--bk-serif);
  font-size: calc(19.5 * var(--bk-u));
  line-height: 1.46;
  letter-spacing: .002em;
  color: var(--bk-ink);
}

.bk-p {
  font-size: calc(16 * var(--bk-u));
  line-height: 1.62;
  color: var(--bk-soft);
  letter-spacing: .002em;
}

.bk-microtext {
  font-size: calc(10 * var(--bk-u));
  line-height: 1.5;
  color: var(--bk-mute);
  margin-top: calc(10 * var(--bk-u)) !important;
}

/* ─────────────────────── Gabarit : figure ───────────────────── */

.bk-media, .bk-fig-m, .bk-cover-m { position: relative; overflow: hidden; display: block; background: #f1f0ee; }
.bk-media img, .bk-fig-m img, .bk-cover-m img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.bk-cover-m { width: 100%; height: 100%; }

.bk-fig-m { width: 100%; }
.bk-cap {
  font-size: calc(10 * var(--bk-u));
  line-height: 1.45;
  color: var(--bk-mute);
  margin-top: calc(9 * var(--bk-u)) !important;
  padding-top: calc(8 * var(--bk-u));
  border-top: 1px solid var(--bk-faint);
}

/* ─────────────────────── Gabarit : specs ────────────────────── */

.bk-sp { border-top: 1px solid var(--bk-hair); }
.bk-sp-row {
  display: flex; align-items: baseline; gap: calc(14 * var(--bk-u));
  justify-content: space-between;
  padding: calc(8.5 * var(--bk-u)) 0;
  border-bottom: 1px solid var(--bk-faint);
}
.bk-sp-row dt {
  flex: 0 1 auto;
  font-size: calc(10 * var(--bk-u));
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--bk-mute);
}
.bk-sp-row dd {
  flex: 0 1 auto;
  text-align: right;
  font-size: calc(13 * var(--bk-u));
  line-height: 1.35;
  color: var(--bk-ink);
}

/* ─────────────────────── Gabarit : cartes ───────────────────── */

.bk-cards { display: grid; gap: calc(16 * var(--bk-u)) calc(18 * var(--bk-u)); }
.bk-cards[data-cols="2"] { grid-template-columns: 1fr 1fr; }
.bk-cards[data-cols="1"] { grid-template-columns: 1fr; }
.bk-card { border-top: 1px solid var(--bk-hair); padding-top: calc(10 * var(--bk-u)); }
.bk-card-t {
  font-family: var(--bk-serif);
  font-weight: 400;
  font-size: calc(15.5 * var(--bk-u));
  line-height: 1.2;
}
.bk-card-d {
  font-size: calc(11.5 * var(--bk-u));
  line-height: 1.52;
  color: var(--bk-mute);
  margin-top: calc(6 * var(--bk-u)) !important;
}

/* ─────────────────────── Gabarit : étapes ───────────────────── */

.bk-steps { border-top: 1px solid var(--bk-faint); }
.bk-step {
  display: grid;
  grid-template-columns: calc(40 * var(--bk-u)) 1fr;
  gap: calc(12 * var(--bk-u));
  padding: calc(11 * var(--bk-u)) 0;
  border-bottom: 1px solid var(--bk-faint);
}
.bk-step-n {
  font-family: var(--bk-serif);
  font-size: calc(22 * var(--bk-u));
  line-height: 1;
  color: rgba(11, 13, 16, .58);
  letter-spacing: .02em;
}
.bk-step-b { display: block; }
.bk-step-t {
  display: block;
  font-size: calc(13 * var(--bk-u));
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.3;
}
.bk-step-d {
  display: block;
  font-size: calc(11.5 * var(--bk-u));
  line-height: 1.52;
  color: var(--bk-mute);
  margin-top: calc(4 * var(--bk-u));
}

/* ──────────────────── Gabarit : échantillons ────────────────── */

/* Le nombre de colonnes vient des données (`swatches.cols`) : c'est lui qui
   règle la taille des carrés, donc le remplissage de la page. Les écarts
   restent fins et constants pour que la planche se lise comme une grille,
   pas comme une collection de vignettes isolées. */
.bk-sws { display: grid; gap: calc(11 * var(--bk-u)) calc(9 * var(--bk-u)); }
.bk-sws[data-cols="1"] { grid-template-columns: 1fr; }
.bk-sws[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.bk-sws[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.bk-sws[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.bk-sws[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }
.bk-sws[data-cols="6"] { grid-template-columns: repeat(6, 1fr); }
/* Un échantillon « pleine largeur » occupe toute la rangée. */
.bk-sw--wide { grid-column: 1 / -1; }
/* Une teinte sans photo (RAL) garde le gabarit carré, jamais une bande —
   sauf un échantillon pleine largeur, dont le moteur calcule le format
   pour qu'il garde la hauteur d'une rangée. */
.bk-sws .bk-sw:not(.bk-sw--wide) .bk-sw-v--flat { aspect-ratio: 1 / 1; }

.bk-sw { display: block; min-width: 0; }
.bk-sw-v {
  display: block; position: relative;
  width: 100%; aspect-ratio: var(--bk-sw-ar, 1 / 1);
  overflow: hidden;
  border-radius: calc(1 * var(--bk-u));
  box-shadow: inset 0 0 0 1px rgba(11, 13, 16, .10);
  background: #f1f0ee;
}
.bk-sw-v img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-sw-n {
  display: block;
  margin-top: calc(6 * var(--bk-u));
  font-size: calc(8.5 * var(--bk-u));
  line-height: 1.24;
  letter-spacing: .03em;
  color: var(--bk-mute);
  overflow-wrap: anywhere;
}
/* Les grilles denses (métallisés basse définition) resserrent la légende. */
.bk-sws[data-cols="5"] .bk-sw-n,
.bk-sws[data-cols="6"] .bk-sw-n { font-size: calc(7.5 * var(--bk-u)); }

/* L'échantillon photo est un bouton : il ouvre la loupe, il ne tourne pas la
   page. On ne lui donne aucun habillage de bouton — la grille doit rester
   une planche, pas une barre d'outils. */
.bk-sw-z {
  display: block; width: 100%;
  margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left;
  cursor: zoom-in;
  -webkit-appearance: none; appearance: none;
}
.bk-sw-z:focus-visible { outline: 2px solid var(--bk-ink); outline-offset: calc(2 * var(--bk-u)); }
@media (hover: hover) {
  .bk-sw-z:hover .bk-sw-v { box-shadow: inset 0 0 0 1px rgba(11, 13, 16, .34); }
  .bk-sw-z:hover .bk-sw-n { color: var(--bk-ink); }
}

/* ───────────────────── Gabarits : puces, listes ─────────────── */

.bk-chips { display: flex; flex-wrap: wrap; gap: calc(7 * var(--bk-u)); }
.bk-chip {
  border: 1px solid var(--bk-faint);
  border-radius: 999px;
  padding: calc(5 * var(--bk-u)) calc(11 * var(--bk-u));
  font-size: calc(10.5 * var(--bk-u));
  letter-spacing: .05em;
  color: var(--bk-soft);
  white-space: nowrap;
}

.bk-list li {
  position: relative;
  padding-left: calc(18 * var(--bk-u));
  font-size: calc(13.5 * var(--bk-u));
  line-height: 1.56;
  color: var(--bk-soft);
}
.bk-list li + li { margin-top: calc(7 * var(--bk-u)); }
.bk-list li::before {
  position: absolute; left: 0; top: 0;
  color: rgba(11, 13, 16, .58);
  font-size: calc(12 * var(--bk-u));
  line-height: 1.75;
}
.bk-list[data-style="bullet"] li::before { content: '—'; }
.bk-list[data-style="check"]  li::before { content: '✓'; font-size: calc(10 * var(--bk-u)); }

/* ─────────────────────── Gabarit : tableau ──────────────────── */

.bk-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.bk-table th[scope="col"] {
  text-align: left;
  font-size: calc(9 * var(--bk-u));
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bk-mute);
  padding: 0 calc(8 * var(--bk-u)) calc(8 * var(--bk-u)) 0;
  border-bottom: 1px solid var(--bk-hair);
}
.bk-table th[scope="col"]:last-child { padding-right: 0; }
.bk-table td, .bk-table th[scope="row"] {
  font-size: calc(11.5 * var(--bk-u));
  line-height: 1.4;
  text-align: left;
  padding: calc(8 * var(--bk-u)) calc(8 * var(--bk-u)) calc(8 * var(--bk-u)) 0;
  border-bottom: 1px solid var(--bk-faint);
  color: var(--bk-mute);
  word-break: break-word;
}
.bk-table th[scope="row"] { font-weight: 500; color: var(--bk-ink); }
.bk-table td:last-child, .bk-table th:last-child { padding-right: 0; }

/* ──────────────── Gabarits : encadré, citation, filet ───────── */

.bk-note {
  border-left: 1px solid var(--bk-hair);
  padding: calc(2 * var(--bk-u)) 0 calc(2 * var(--bk-u)) calc(15 * var(--bk-u));
}
.bk-note-l {
  font-size: calc(9 * var(--bk-u));
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bk-mute);
  margin-bottom: calc(6 * var(--bk-u)) !important;
}
.bk-note-t { font-size: calc(12 * var(--bk-u)); line-height: 1.56; color: var(--bk-soft); }

.bk-quote { text-align: center; padding: 0 calc(6 * var(--bk-u)); }

/* Une figure seule sur sa page : on la centre verticalement plutôt que de
   la laisser en haut avec les deux tiers de la page en blanc. */
.bk-page-body:has(> .bk-b--fig:only-child) {
  display: flex; flex-direction: column; justify-content: center;
}

/* Une citation seule sur sa page devient une vraie page de respiration :
   centrée verticalement, un cran plus grande, avec deux filets fins.
   Sans :has(), on retombe simplement sur la composition en haut de page. */
.bk-page-body:has(> .bk-b--quote:only-child) {
  display: flex; align-items: center; justify-content: center;
}
.bk-page-body:has(> .bk-b--quote:only-child) .bk-quote {
  padding: 0 calc(18 * var(--bk-u));
}
.bk-page-body:has(> .bk-b--quote:only-child) .bk-quote p {
  font-size: calc(23 * var(--bk-u));
  line-height: 1.42;
}
.bk-page-body:has(> .bk-b--quote:only-child) .bk-quote p::before,
.bk-page-body:has(> .bk-b--quote:only-child) .bk-quote p::after {
  content: ''; display: block; width: calc(34 * var(--bk-u)); height: 1px;
  background: var(--bk-faint); margin: 0 auto;
}
.bk-page-body:has(> .bk-b--quote:only-child) .bk-quote p::before { margin-bottom: calc(26 * var(--bk-u)); }
.bk-page-body:has(> .bk-b--quote:only-child) .bk-quote p::after  { margin-top: calc(26 * var(--bk-u)); }
.bk-quote p {
  font-family: var(--bk-serif);
  font-style: italic;
  font-size: calc(20 * var(--bk-u));
  line-height: 1.38;
  color: var(--bk-ink);
}
.bk-quote cite {
  display: block;
  margin-top: calc(12 * var(--bk-u));
  font-style: normal;
  font-size: calc(9 * var(--bk-u));
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bk-mute);
}

.bk-rule { display: block; width: 100%; height: 1px; background: var(--bk-faint); }

/* ════════════════ Gabarits « page entière » ═══════════════════ */

/* — Couverture — */
.bk-cover { position: relative; width: 100%; height: 100%; overflow: hidden; background: #15171a; }
.bk-cover-im { position: absolute; inset: 0; }
.bk-cover-veil {
  position: absolute; inset: 0;
  box-shadow: inset 0 0 calc(40 * var(--bk-u)) rgba(8, 9, 11, .14);
}
.bk-cover--tx .bk-cover-veil {
  background:
    linear-gradient(to top, rgba(8, 9, 11, .80) 0%, rgba(8, 9, 11, .26) 42%, rgba(8, 9, 11, .10) 62%, rgba(8, 9, 11, .42) 100%);
}
.bk-cover-tx {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: calc(40 * var(--bk-u));
  color: #fff;
}
.bk-cover-brand {
  position: absolute; top: calc(38 * var(--bk-u)); left: calc(40 * var(--bk-u));
  font-family: var(--bk-serif);
  font-size: calc(13 * var(--bk-u));
  letter-spacing: .36em;
  color: rgba(255, 255, 255, .92);
}
.bk-cover-rule {
  display: block; width: calc(28 * var(--bk-u)); height: 1px;
  background: rgba(255, 255, 255, .6);
  margin-bottom: calc(14 * var(--bk-u));
}
.bk-cover-num {
  font-size: calc(9.5 * var(--bk-u));
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  margin-bottom: calc(10 * var(--bk-u)) !important;
}
.bk-cover-t {
  font-family: var(--bk-serif);
  font-weight: 400;
  font-size: calc(44 * var(--bk-u));
  line-height: 1.02;
  letter-spacing: -.012em;
}
.bk-cover-tag {
  margin-top: calc(14 * var(--bk-u)) !important;
  font-size: calc(12 * var(--bk-u));
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
  max-width: 86%;
}

/* — Ouverture de chapitre —
   C'est une PAGE DE TITRE, pas une page illustrée amputée de son image.
   Trois temps, de haut en bas : le chiffre romain sous un filet plein ;
   le titre ancré au bas d'une zone de respiration ; en pied, le sommaire
   du chapitre — ses familles de teintes et le nombre de teintes de
   chacune, ou, pour un chapitre de texte, ses têtes de section et leur
   page réelle. Tout est calculé depuis les données par le moteur.
   Le gabarit `.bk-chapo--img` (champ `img` d'un bloc `chapter`) reste
   supporté : il reprend la composition d'origine, image en bas. */
.bk-chapo {
  display: flex; flex-direction: column; height: 100%;
  padding: calc(38 * var(--bk-u)) calc(44 * var(--bk-u)) calc(34 * var(--bk-u));
}
/* Même gouttière de reliure que les pages de texte (somme constante : 88). */
.bk-slot--l .bk-chapo:not(.bk-chapo--img), .bk-leaf-b .bk-chapo:not(.bk-chapo--img) {
  padding-left: calc(40 * var(--bk-u)); padding-right: calc(48 * var(--bk-u));
}
.bk-slot--r .bk-chapo:not(.bk-chapo--img), .bk-leaf-f .bk-chapo:not(.bk-chapo--img) {
  padding-left: calc(48 * var(--bk-u)); padding-right: calc(40 * var(--bk-u));
}
.bk-root[data-mode="single"] .bk-chapo:not(.bk-chapo--img) {
  padding-left: calc(34 * var(--bk-u)); padding-right: calc(34 * var(--bk-u));
}

.bk-chapo-top {
  flex: none;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: calc(12 * var(--bk-u));
  padding-top: calc(13 * var(--bk-u));
  border-top: 1px solid var(--bk-hair);
}
.bk-chapo-k {
  font-size: calc(9 * var(--bk-u));
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--bk-mute);
}
.bk-chapo-n {
  font-family: var(--bk-serif);
  font-size: calc(58 * var(--bk-u));
  line-height: .86;
  letter-spacing: .03em;
  color: var(--bk-ink);
}
.bk-chapo-mid {
  flex: 1 1 auto;
  min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(30 * var(--bk-u)) 0 calc(32 * var(--bk-u));
}
.bk-chapo-rule {
  display: block; width: calc(44 * var(--bk-u)); height: 1px;
  background: var(--bk-hair);
  margin-bottom: calc(18 * var(--bk-u));
}
.bk-chapo-t {
  font-family: var(--bk-serif);
  font-weight: 400;
  font-size: calc(38 * var(--bk-u));
  line-height: 1.04;
  letter-spacing: -.012em;
}
.bk-chapo-s {
  margin-top: calc(14 * var(--bk-u)) !important;
  font-size: calc(13 * var(--bk-u));
  line-height: 1.55;
  color: var(--bk-mute);
  max-width: 92%;
}

/* Pied de la page de titre : le sommaire du chapitre, ou — à défaut de
   matière à lister — la signature de l'ouvrage. Dans les deux cas la page
   est ancrée en bas : plus jamais de moitié de page en blanc. */
.bk-chapo-sum, .bk-chapo-sig {
  flex: none;
  border-top: 1px solid var(--bk-hair);
  padding-top: calc(13 * var(--bk-u));
}
.bk-chapo-sk {
  font-size: calc(9 * var(--bk-u));
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--bk-mute);
}
.bk-chapo-l {
  margin-top: calc(8 * var(--bk-u)) !important;
  display: grid;
  gap: 0 calc(22 * var(--bk-u));
}
.bk-chapo-l[data-cols="2"] { grid-template-columns: 1fr 1fr; }
/* En page unique (tactile), les entrées du sommaire de chapitre doivent
   rester attrapables au doigt : la page y est plus haute, la place existe. */
.bk-root[data-mode="single"] .bk-chapo-e { padding: calc(7 * var(--bk-u)) 0; }
.bk-chapo-e {
  width: 100%;
  display: flex; align-items: baseline; gap: calc(8 * var(--bk-u));
  background: none; border: 0;
  padding: calc(4.5 * var(--bk-u)) 0;
  text-align: left;
  font-family: var(--bk-sans);
  color: inherit;
  cursor: pointer;
}
.bk-chapo-et {
  flex: 0 1 auto;
  font-size: calc(11 * var(--bk-u));
  line-height: 1.3;
  color: var(--bk-soft);
}
.bk-chapo-ed {
  flex: 1 1 auto;
  min-width: calc(10 * var(--bk-u));
  border-bottom: 1px dotted rgba(11, 13, 16, .26);
  transform: translateY(calc(-3 * var(--bk-u)));
}
.bk-chapo-ev {
  flex: none;
  font-size: calc(10 * var(--bk-u));
  color: var(--bk-mute);
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
  .bk-chapo-e:hover .bk-chapo-et { color: var(--bk-ink); text-decoration: underline;
    text-underline-offset: calc(3 * var(--bk-u)); }
}
.bk-chapo-tot {
  margin-top: calc(11 * var(--bk-u)) !important;
  font-size: calc(9 * var(--bk-u));
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(11, 13, 16, .58);
}
/* Chapitre d'un seul nuancier : le libellé à gauche, l'ampleur de la
   palette à droite, chiffre en vedette. */
.bk-chapo-sum--one {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: calc(14 * var(--bk-u));
}
.bk-chapo-big {
  font-size: calc(10 * var(--bk-u));
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bk-mute);
}
.bk-chapo-bign {
  font-family: var(--bk-serif);
  font-size: calc(26 * var(--bk-u));
  letter-spacing: .02em;
  text-transform: none;
  color: var(--bk-ink);
  margin-right: calc(4 * var(--bk-u));
}
.bk-chapo-sigt {
  font-family: var(--bk-serif);
  font-size: calc(11 * var(--bk-u));
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--bk-mute);
}

/* Variante illustrée — conservée telle quelle pour le jour où un chapitre
   porterait de nouveau un champ `img`. */
.bk-chapo--img { padding: 0; }
.bk-chapo--img .bk-chapo-top {
  padding: calc(40 * var(--bk-u)) calc(44 * var(--bk-u)) 0;
  border-top: 0;
}
.bk-chapo--img .bk-chapo-mid {
  padding: calc(26 * var(--bk-u)) calc(44 * var(--bk-u)) calc(34 * var(--bk-u));
  justify-content: center;
}
.bk-chapo--img .bk-chapo-sum, .bk-chapo--img .bk-chapo-sig { display: none; }
.bk-chapo-img { flex: none; height: 42%; }

/* — Planche image — */
.bk-plate { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; }
.bk-plate-m { flex: 1 1 auto; min-height: 0; }
.bk-plate-c {
  flex: none;
  padding: calc(14 * var(--bk-u)) calc(44 * var(--bk-u)) calc(20 * var(--bk-u));
  font-size: calc(10 * var(--bk-u));
  letter-spacing: .05em;
  line-height: 1.45;
  color: var(--bk-mute);
  background: var(--bk-paper);
}

/* — Page CTA — */
.bk-ctap {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.bk-ctap-mark {
  font-family: var(--bk-serif);
  font-size: calc(46 * var(--bk-u));
  line-height: 1;
  color: rgba(11,13,16,.57);
  margin-bottom: calc(24 * var(--bk-u));
}
.bk-ctap-t {
  font-family: var(--bk-serif);
  font-weight: 400;
  font-size: calc(30 * var(--bk-u));
  line-height: 1.12;
  letter-spacing: -.008em;
  max-width: 92%;
}
.bk-ctap-rule {
  display: block; width: calc(30 * var(--bk-u)); height: 1px;
  background: var(--bk-hair);
  margin: calc(18 * var(--bk-u)) 0;
}
.bk-ctap-x {
  font-size: calc(13 * var(--bk-u));
  line-height: 1.6;
  color: var(--bk-mute);
  max-width: 86%;
}
.bk-ctap-a {
  margin-top: calc(28 * var(--bk-u));
  display: flex; flex-direction: column; align-items: center; gap: calc(14 * var(--bk-u));
}
.bk-btn {
  display: inline-flex; align-items: center;
  gap: calc(8 * var(--bk-u));   /* l'espace avant la flèche, qu'un flex avale sinon */
  background: var(--bk-ink);
  color: var(--bk-paper);
  text-decoration: none;
  padding: calc(12 * var(--bk-u)) calc(24 * var(--bk-u));
  font-size: calc(10.5 * var(--bk-u));
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: opacity .2s;
}
.bk-btn:hover { opacity: .82; }
.bk-btn--text {
  background: transparent;
  color: var(--bk-ink);
  padding: 0;
  border-radius: 0;
  letter-spacing: .1em;
  border-bottom: 1px solid var(--bk-hair);
  padding-bottom: calc(3 * var(--bk-u));
}

/* — Colophon — */
.bk-colo {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.bk-colo-brand {
  font-family: var(--bk-serif);
  font-size: calc(22 * var(--bk-u));
  letter-spacing: .34em;
}
.bk-colo-rule {
  display: block; width: calc(40 * var(--bk-u)); height: 1px;
  background: var(--bk-hair);
  margin: calc(20 * var(--bk-u)) 0;
}
.bk-colo-t {
  font-size: calc(12 * var(--bk-u));
  line-height: 1.7;
  color: var(--bk-mute);
  max-width: 80%;
}
.bk-colo-tag {
  margin-top: calc(22 * var(--bk-u)) !important;
  font-size: calc(9 * var(--bk-u));
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(11, 13, 16, .58);
}

/* — Sommaire imprimé dans le livre — */
.bk-tocl { margin-top: calc(22 * var(--bk-u)) !important; }
.bk-toce {
  width: 100%;
  display: flex; align-items: baseline; gap: calc(12 * var(--bk-u));
  background: none; border: 0;
  border-bottom: 1px solid var(--bk-faint);
  padding: calc(11 * var(--bk-u)) 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--bk-sans);
  color: inherit;
}
.bk-toce:hover .bk-toce-t { text-decoration: underline; text-underline-offset: calc(3 * var(--bk-u)); }
.bk-toce-n {
  flex: none;
  min-width: calc(26 * var(--bk-u));
  font-family: var(--bk-serif);
  font-size: calc(14 * var(--bk-u));
  color: var(--bk-mute);
}
.bk-toce-b { display: block; flex: 0 1 auto; }
.bk-toce-t {
  display: block;
  font-family: var(--bk-serif);
  font-size: calc(16 * var(--bk-u));
  line-height: 1.2;
}
.bk-toce-s {
  display: block;
  font-size: calc(10.5 * var(--bk-u));
  line-height: 1.4;
  color: var(--bk-mute);
  margin-top: calc(3 * var(--bk-u));
}
.bk-toce-d { flex: 1 1 auto; border-bottom: 1px dotted rgba(11, 13, 16, .26); transform: translateY(calc(-3 * var(--bk-u))); }
.bk-toce-p {
  flex: none;
  font-size: calc(11 * var(--bk-u));
  letter-spacing: .08em;
  color: var(--bk-mute);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────── Sommaire en surcouche ──────────────────── */

.bk-tocp {
  position: absolute; inset: 0;
  z-index: 20;
  background: rgba(11, 13, 16, .40);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: calc(24 * var(--u));
}
.bk-tocp[hidden] { display: none; }
.bk-tocp-in {
  width: min(calc(520 * var(--u)), 100%);
  max-height: 100%;
  overflow-y: auto;
  background: var(--bk-paper);
  padding: calc(28 * var(--u)) calc(30 * var(--u)) calc(22 * var(--u));
  box-shadow: 0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(11, 13, 16, .3);
}
.bk-tocp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: calc(14 * var(--u));
  border-bottom: 1px solid var(--bk-hair);
}
.bk-tocp-k {
  margin: 0;
  font-size: calc(10 * var(--u));
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--bk-mute);
}
.bk-tocp-x {
  border: 0; background: none; cursor: pointer;
  font-size: calc(14 * var(--u));
  color: var(--bk-mute);
  padding: calc(4 * var(--u));
  line-height: 1;
}
.bk-tocp-l { margin: 0; padding: 0; list-style: none; }
.bk-tocp-e {
  width: 100%;
  display: flex; align-items: baseline; gap: calc(14 * var(--u));
  background: none; border: 0;
  border-bottom: 1px solid var(--bk-faint);
  padding: calc(13 * var(--u)) 0;
  text-align: left; cursor: pointer;
  font-family: var(--bk-sans);
  color: var(--bk-ink);
  transition: opacity .18s;
}
.bk-tocp-e:hover { opacity: .6; }
.bk-tocp-e[aria-current="true"] .bk-tocp-t { text-decoration: underline; text-underline-offset: calc(3 * var(--u)); }
.bk-tocp-n {
  flex: none; min-width: calc(28 * var(--u));
  font-family: var(--bk-serif);
  font-size: calc(14 * var(--u));
  color: var(--bk-mute);
}
.bk-tocp-t {
  flex: 1 1 auto;
  font-family: var(--bk-serif);
  font-size: calc(18 * var(--u));
  line-height: 1.25;
}
.bk-tocp-p {
  flex: none;
  font-size: calc(11 * var(--u));
  color: var(--bk-mute);
  font-variant-numeric: tabular-nums;
}
.bk-tocp-e--cover { border-bottom: 0; }

/* Sous-entrées : les familles de couleurs d'une grosse collection. Elles
   n'apparaissent que si le chapitre en compte plus d'une, et leurs numéros
   de page viennent des pages réellement composées. */
.bk-tocp-sl {
  margin: 0 0 calc(4 * var(--u)) calc(42 * var(--u));
  padding: 0; list-style: none;
}
.bk-tocp-s {
  width: 100%;
  display: flex; align-items: baseline; gap: calc(12 * var(--u));
  background: none; border: 0;
  padding: calc(6 * var(--u)) 0;
  text-align: left; cursor: pointer;
  font-family: var(--bk-sans);
  color: var(--bk-mute);
  transition: color .18s;
}
.bk-tocp-s:hover { color: var(--bk-ink); }
.bk-tocp-st {
  flex: 1 1 auto;
  font-size: calc(12 * var(--u));
  line-height: 1.3;
  letter-spacing: .02em;
}

/* ───────────────────── Loupe : échantillon agrandi ─────────────
   Surcouche au-dessus de tout. Elle ne touche jamais à la pagination :
   on la ferme et on retrouve exactement la page qu'on lisait. */

.bk-lb {
  position: absolute; inset: 0;
  z-index: 30;
  background: rgba(11, 13, 16, .72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: calc(28 * var(--u));
  cursor: zoom-out;
}
.bk-lb[hidden] { display: none; }

/* `max-width` est recalculé par le moteur d'après la taille native de
   l'image (jamais plus de quatre fois, pour ne pas empâter les planches
   fournisseur basse définition) ; la valeur ci-dessous est le repli. */
.bk-lb-in {
  position: relative;
  max-width: min(calc(560 * var(--u)), 92vw);
  width: 100%;
  cursor: default;
}
.bk-lb-x {
  position: absolute; top: calc(-34 * var(--u)); right: 0;
  width: calc(28 * var(--u)); height: calc(28 * var(--u));
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  background: none;
  color: #fff;
  font-size: calc(12 * var(--u));
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.bk-lb-x:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .7); }

.bk-lb-m {
  background: var(--bk-paper);
  border-radius: calc(2 * var(--u));
  overflow: hidden;
  box-shadow: 0 40px 90px -36px rgba(0, 0, 0, .7);
  line-height: 0;
}
.bk-lb-m img {
  display: block;
  width: 100%;
  max-height: 64vh;
  object-fit: contain;
  background: #f1f0ee;
}
.bk-lb-f {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: calc(16 * var(--u));
  margin-top: calc(13 * var(--u));
}
.bk-lb-n {
  margin: 0;
  font-family: var(--bk-serif);
  font-size: calc(17 * var(--u));
  line-height: 1.3;
  color: #fff;
}
.bk-lb-full {
  flex: none;
  font-size: calc(11 * var(--u));
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  text-decoration: underline;
  text-underline-offset: calc(3 * var(--u));
}
.bk-lb-full:hover { color: #fff; }
.bk-lb-full[hidden] { display: none; }

@media (max-width: 760px) {
  .bk-lb { padding: calc(18 * var(--u)); }
  .bk-lb-m img { max-height: 54vh; }
  .bk-lb-f { flex-direction: column; align-items: flex-start; gap: calc(6 * var(--u)); }
}

/* ───────────────────── Page unique / mobile ─────────────────── */

.bk-root[data-mode="single"] .bk-nav {
  top: auto; bottom: calc(-36 * var(--u));
  transform: none;
  width: calc(36 * var(--u)); height: calc(36 * var(--u));
}
.bk-root[data-mode="single"] .bk-nav--prev { left: calc(16 * var(--u)); }
.bk-root[data-mode="single"] .bk-nav--next { right: calc(16 * var(--u)); }
.bk-root[data-mode="single"] .bk-pager { height: calc(54 * var(--u)); }
.bk-root[data-mode="single"] .bk-stage { overflow: visible; }

@media (max-width: 760px) {
  .bk-topbar { padding: 0 calc(12 * var(--u)); }
  .bk-chap { display: none; }
  .bk-close-t { display: none; }
  .bk-close { padding: 0 calc(10 * var(--u)); }
  .bk-ttl-b { font-size: calc(13 * var(--u)); letter-spacing: .16em; }
  .bk-ttl-n { font-size: calc(13 * var(--u)); }
  /* Onglets compacts : une seule ligne qui défile, calée à gauche pour que
     le premier accès soit toujours visible. */
  .bk-tabs { height: calc(34 * var(--u)); justify-content: flex-start; padding: 0 calc(8 * var(--u)); }
  .bk-tab { padding: 0 calc(10 * var(--u)); font-size: calc(10.5 * var(--u)); letter-spacing: .07em; }
  .bk-tab::after { left: calc(10 * var(--u)); right: calc(10 * var(--u)); }
}

@media (max-width: 420px) {
  .bk-ttl-s, .bk-ttl-b { display: none; }
}

/* ──────────────────────── Zone de mesure ────────────────────── */

.bk-measure {
  position: absolute;
  top: 0; left: -30000px;
  width: var(--bk-pw); height: var(--bk-ph);
  pointer-events: none;
  opacity: 0;
  z-index: -1;
}
.bk-measure .bk-page { box-shadow: none; }

/* ──────────────────── Mouvement réduit ──────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .bk-root, .bk-root * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}