/* ═══════════════════════════════════════════════════════════════
   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;

  /* Les quatre commandes (retour, sommaire, page précédente, page suivante)
     se tiennent au bord DU LIVRE, pas au bord de l'écran : --bk-half est la
     demi-largeur du livre, que le moteur recalcule à chaque géométrie via
     --bk-pw. --bk-ctrl est leur diamètre, --bk-gut leur écart au livre. */
  --bk-half: var(--bk-pw);
  --bk-ctrl: calc(44 * var(--u));
  --bk-gut:  calc(16 * var(--u));

  --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;
  /* Un voile, pas un fond : l'étagère reste visible derrière, floutée
     (voir .cat-shelf.cat-exit dans style.css). On ne quitte pas la page. */
  background: rgba(244, 243, 241, .58);
  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; }
/* Liseuse retenue : elle existe (elle donne la position d'arrivée à la
   couverture qui vole depuis l'étagère) mais ne se montre pas encore.
   Levé par js/catalogue.js quand la couverture est arrivée. */
.bk-root.bk-hold { opacity: 0 !important; pointer-events: none; }

.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. */

/* La barre d'onglets doublait le sommaire et ajoutait une deuxième barre
   d'application au-dessus du livre. Le sommaire (icône à trois traits) donne
   déjà l'accès direct à tout. Masquée, pas supprimée : les livres gardent
   leurs chapitres `tab: true` sans avoir à être réécrits. */
.bk-tabs { display: none !important; }

.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 ────────────────────── */

/* Deux pastilles posées sur le voile, aux deux coins. Plus de bandeau
   plein, plus de filet : rien qui ressemble à l'en-tête d'une autre page. */
/* Deux ancrages différents, et c'est voulu : « Retour » appartient à la page
   — coin haut gauche, là où on va le chercher — tandis que le sommaire
   appartient au livre : bord droit, à l'aplomb de la flèche de page suivante. */
.bk-topbar {
  flex: none;
  position: relative;
  height: calc(62 * var(--u));
  display: flex;
  align-items: center;
  padding: 0 calc(20 * var(--u));
  background: none;
  z-index: 4;
}

.bk-close,
.bk-tocbtn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(11, 13, 16, .26);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 calc(5 * var(--u)) calc(16 * var(--u)) calc(-7 * var(--u)) rgba(11, 13, 16, .34);
  color: var(--bk-ink);
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.bk-close:hover,
.bk-tocbtn:hover { background: #fff; border-color: var(--bk-ink); }

/* « ← Retour » : une pastille allongée, au coin haut gauche. */
.bk-close {
  height: calc(46 * var(--u));
  padding: 0 calc(20 * var(--u)) 0 calc(15 * var(--u));
  gap: calc(8 * var(--u));
}
.bk-close-t {
  font-family: var(--bk-sans);
  font-size: calc(12 * var(--u));
  letter-spacing: .11em;
  text-transform: uppercase;
  line-height: 1;
}

/* Le sommaire : une pastille ronde, calée sur le bord droit du livre. */
.bk-right {
  position: absolute; top: 50%;
  right: max(calc(10 * var(--u)), calc(50% - var(--bk-half) - var(--bk-gut) - var(--bk-ctrl)));
  transform: translateY(-50%);
  display: flex; align-items: center;
}
.bk-tocbtn { width: calc(52 * var(--u)); height: calc(52 * var(--u)); padding: 0; }
.bk-tocbtn .bk-ico { width: calc(26 * var(--u)); height: calc(26 * var(--u)); stroke-width: 2; }

.bk-ico { width: calc(21 * var(--u)); height: calc(21 * var(--u)); display: block; stroke-width: 2; }
.bk-ico * { vector-effect: non-scaling-stroke; }

/* Seul le libellé du sommaire reste caché : son icône se suffit. */
.bk-tocbtn-t {
  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;
}

/* Titre du livre et rappel de chapitre : sur la couverture et dans le
   sommaire. Conservés dans le document (le moteur les renseigne) mais
   retirés de la barre, qui ne porte plus que les deux commandes. */
.bk-ttl, .bk-chap { display: none; }

/* ──────────────────────────── 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: var(--bk-ctrl); height: var(--bk-ctrl);
  border-radius: 50%;
  border: 1px solid rgba(11, 13, 16, .26);
  background: #fff;
  box-shadow: 0 calc(5 * var(--u)) calc(16 * var(--u)) calc(-7 * var(--u)) rgba(11, 13, 16, .34);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s, border-color .2s, opacity .2s;
  z-index: 3;
}
/* Le bord extérieur du bouton vient se poser à --bk-gut du bord du livre.
   Le max() garde le bouton dans l'écran si la fenêtre devient très étroite. */
.bk-nav--prev { left:  max(calc(10 * var(--u)), calc(50% - var(--bk-half) - var(--bk-gut) - var(--bk-ctrl))); }
.bk-nav--next { right: max(calc(10 * var(--u)), calc(50% - var(--bk-half) - var(--bk-gut) - var(--bk-ctrl))); }
.bk-nav:hover:not(:disabled) { background: #fff; border-color: var(--bk-ink); }
/* Une flèche qui ne peut pas être cliquée ne s'affiche pas : livre fermé,
   pas de page précédente ; dernière page, pas de page suivante. */
.bk-nav:disabled { opacity: 0; pointer-events: none; }
.bk-nav span {
  width: calc(10 * var(--u)); height: calc(10 * var(--u));
  border-left: calc(1.6 * var(--u)) solid var(--bk-ink);
  border-bottom: calc(1.6 * var(--u)) 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%); }
/* Page unique : il n'y a plus de reliure, donc plus d'ombre de reliure.
   .bk-cast--r fait la largeur d'une page : en mode double elle borde la
   gouttière, en mode simple elle couvrait TOUTE la page et déposait une
   bande noire sur son bord gauche à chaque tourne. */
.bk-root[data-mode="single"] .bk-cast--l,
.bk-root[data-mode="single"] .bk-cast--r { 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-half: calc(var(--bk-pw) / 2); }
.bk-root[data-mode="single"] .bk-nav {
  top: auto; bottom: calc(-38 * var(--u));
  transform: none;
  width: calc(40 * var(--u)); height: calc(40 * var(--u));
}
/* Sous le livre, bord extérieur aligné sur le bord du livre. */
.bk-root[data-mode="single"] .bk-nav--prev { left:  max(calc(10 * var(--u)), calc(50% - var(--bk-half))); }
.bk-root[data-mode="single"] .bk-nav--next { right: max(calc(10 * var(--u)), calc(50% - var(--bk-half))); }
.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) {
  /* --u est plafonné en bas à 0,75px : sans ce rattrapage, les pastilles
     tomberaient à 28px au doigt. On agrandit la mesure commune, pour que la
     largeur de la barre du haut reste calée sur elle. */
  .bk-root { --bk-ctrl: calc(48 * var(--u)); --bk-gut: calc(10 * var(--u)); }
  .bk-topbar { padding: 0 calc(12 * var(--u)); height: calc(60 * var(--u)); }
  .bk-close { height: calc(48 * var(--u)); padding: 0 calc(19 * var(--u)) 0 calc(14 * var(--u)); }
  .bk-close-t { font-size: calc(13 * var(--u)); }
  .bk-ico { width: calc(23 * var(--u)); height: calc(23 * var(--u)); }
  .bk-tocbtn { width: calc(54 * var(--u)); height: calc(54 * var(--u)); }
  .bk-tocbtn .bk-ico { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
}

/* ──────────────────────── 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;
  }
}