/* The three themes as books (Théo, 28/10/2026), in place of the demo store pictures.
   tpl/v2/livre.php builds them. The faces of a box in CSS 3D; every size follows --w, the cover's
   width, so the same book sits small on a card and large in the reader. The foil follows the
   pointer (--hx, --hy). Prototype and its history: /assets/v2/proto/livres/. */
@font-face { font-family: 'Caslon WOTG'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/v2/fonts/librecaslontext-400.woff2) format('woff2'); }
@font-face { font-family: 'Caslon WOTG'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/v2/fonts/librecaslontext-400i.woff2) format('woff2'); }

.lv-livre { --w: 150px; --h: calc(var(--w) * 1.44); --d: calc(var(--w) * .195);
  --rx: 0deg; --ry: 0deg; --hx: 50%; --hy: 50%; --lx: 1; --ly: 1;
  position: relative; display: block; width: var(--w); height: var(--h); transform-style: preserve-3d;
  font-family: 'Caslon WOTG', Georgia, serif; font-weight: 400; color: var(--encre-titre); }
.lv-livre[data-palier="grid"] { --gravure: url(img/grid.png); }
.lv-livre[data-palier="grid-core"] { --gravure: url(img/grid-core.png); }
.lv-livre[data-palier="grid-studio"] { --gravure: url(img/grid-studio.png); }
.lv-livre--papier { --c1: #F3F0E8; --c2: #E5ECEF; --c3: #F1E8E2; --c4: #E3E8F1; --encre-titre: #121212; }
.lv-livre--noir   { --c1: #A4A7AE; --c2: #DCDEE3; --c3: #8F929A; --c4: #CDD0D7; --encre-titre: #0B0B0D; }
.lv-livre--holo   { --c1: #E7C8F3; --c2: #BCEDE7; --c3: #F2D3E6; --c4: #C6E3F6; --encre-titre: #120A24; }

/* ── The faces ─────────────────────────────────────────────────────────────── */
.lv-f { position: absolute; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lv-avant, .lv-dos { inset: 0; border-radius: 1px 3px 3px 1px; overflow: hidden; }
.lv-avant { transform: translateZ(calc(var(--d) / 2)); padding: calc(var(--w) * .1) calc(var(--w) * .085) 0 calc(var(--w) * .12); }
.lv-dos { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.lv-tranche { top: 0; height: var(--h); width: var(--d); left: calc(50% - var(--d) / 2); overflow: hidden;
  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--w) * .038); padding: calc(var(--w) * .05) 0 calc(var(--w) * .05); }
.lv-pages { top: 3px; height: calc(var(--h) - 6px); width: calc(var(--d) - 3px); left: calc(50% - (var(--d) - 3px) / 2);
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2 - 3px));
  background: repeating-linear-gradient(90deg, #FBFAF7 0 1px, #E4E1DA 1px 2px); }
.lv-ht, .lv-bs { left: 3px; width: calc(var(--w) - 6px); height: calc(var(--d) - 3px); top: calc(50% - (var(--d) - 3px) / 2);
  background: repeating-linear-gradient(0deg, #FBFAF7 0 1px, #E4E1DA 1px 2px); }
.lv-ht { transform: rotateX(90deg) translateZ(calc(var(--h) / 2 - 3px)); }
.lv-bs { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2 - 3px)); }

/* The jacket after Nomad Letters (Stripe Press): a foil sky per tier, then the engraving
   (img/<tier>.png) with a raised edge where they meet; it wraps back, spine and front. */
.lv-avant, .lv-dos, .lv-tranche { color: var(--encre-titre);
  background:
    radial-gradient(circle at var(--hx) calc(var(--hy) * .5), rgba(255,255,255,.75), transparent 34%),
    linear-gradient(calc(105deg + var(--ry) * 2), var(--c1) 0%, var(--c2) 22%, var(--c3) 44%, var(--c4) 66%, var(--c2) 84%, var(--c1) 100%);
  background-size: 100% 100%, 280% 280%; background-position: 0 0, var(--hx) var(--hy); }
.lv-gravure { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--gravure) no-repeat; background-size: calc(2 * var(--w) + var(--d)) var(--h);
  filter: drop-shadow(calc(var(--lx) * -.4px) -1px 0 rgba(255,255,255,.65)) drop-shadow(calc(var(--lx) * .5px) 1.6px 1.2px rgba(0,0,0,.45)); }
.lv-avant .lv-gravure { background-position: right top; }
.lv-dos .lv-gravure { background-position: left top; }
.lv-tranche .lv-gravure { background-position: calc(-1 * var(--w)) 0; }
/* The hinge groove, and the bookcloth grain. */
.lv-avant::before { content: ""; position: absolute; z-index: 2; left: 5%; top: 0; bottom: 0; width: 1px; background: currentColor; opacity: .1; }
.lv-avant::after, .lv-tranche::after, .lv-dos::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .4; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .045' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045 .9' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"); }
.lv-holo { position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: soft-light; opacity: .55;
  background: linear-gradient(115deg, transparent calc(var(--hx) - 30%), rgba(255,255,255,.9) var(--hx), transparent calc(var(--hx) + 30%)); }
.lv-livre--holo .lv-holo { mix-blend-mode: overlay; opacity: .6; }

/* The cover: author, a rule, the name, one line in italics, pressed into the foil; the logo tab. */
.lv-av-bas { position: relative; z-index: 2; display: flex; flex-direction: column; }
.lv-auteur { font-size: calc(var(--w) * .053); line-height: 1.2; }
.lv-tiret { display: block; width: calc(var(--w) * .05); height: 1px; margin: calc(var(--w) * .03) 0 calc(var(--w) * .034); background: currentColor; }
.lv-titre { font-size: calc(var(--w) * .114); line-height: 1.02; white-space: nowrap; }
.lv-ligne { margin-top: calc(var(--w) * .034); font-size: calc(var(--w) * .055); font-style: italic; line-height: 1.2; white-space: nowrap; opacity: .85; }
.lv-auteur, .lv-titre, .lv-ligne { text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 -.5px 0 rgba(0,0,0,.18); }
.lv-onglet { position: absolute; z-index: 3; top: -1px; right: 6%; width: 12.7%; height: 10.6%; display: grid; place-items: center;
  background: #0A0A0A; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.lv-onglet .lv-sym { width: 37%; }

/* The symbol, four blocks (brand/v2/README.md), one more filled per tier. */
.lv-sym { position: relative; display: block; width: 30px; aspect-ratio: 172.28 / 247.41; }
.lv-sym i { position: absolute; z-index: 1; width: 43.96%; border: 1px solid currentColor; }
.lv-sym i:nth-of-type(1) { left: 56.04%; top: 0; height: 45.79%; border-radius: 30% 0 0 30% / 20% 0 0 20%; }
.lv-sym i:nth-of-type(2) { left: 0; top: 54.21%; height: 45.79%; border-radius: 0 30% 30% 0 / 0 20% 20% 0; }
.lv-sym i:nth-of-type(3) { left: 0; top: 15.18%; height: 30.61%; border-radius: 0 0 26% 0; }
.lv-sym i:nth-of-type(4) { left: 56.04%; top: 54.21%; height: 30.61%; border-radius: 26% 0 0 0; }
.lv-sym i:nth-of-type(-n+2), .lv-livre[style*="--n:3"] .lv-sym i:nth-of-type(3), .lv-livre[style*="--n:4"] .lv-sym i:nth-of-type(n+3) { background: currentColor; }
.lv-sym--dos { position: absolute; z-index: 2; left: calc(50% - var(--w) * .034); top: 47%; width: calc(var(--w) * .068); color: #fff; opacity: .8; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.lv-tranche .lv-auteur, .lv-tranche b { position: relative; z-index: 2; writing-mode: vertical-rl; white-space: nowrap; }
.lv-tranche b { font-weight: 400; font-size: calc(var(--w) * .064); line-height: 1; }
.lv-tranche .lv-auteur { font-size: calc(var(--w) * .042); letter-spacing: .04em; }
.lv-tranche .lv-sym--mini { position: relative; z-index: 2; margin-top: auto; width: calc(var(--w) * .05); color: #fff; }
.lv-tranche .lv-sym--mini i { border-color: #fff; }

.lv-tranche .lv-holo { z-index: 3; }

/* ── On a card: the book lies flat, only its spine shows, as in Stripe Press's stack
   (Théo, 28/10). Hovering lifts it and shows the cover; a click opens it. ─────────────── */
.lv-pres { --w: min(280px, 57cqi); position: relative; display: grid; place-items: center; height: 100%; min-height: 96px;
  text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.lv-couche { position: relative; width: calc(var(--w) * 1.44); height: calc(var(--w) * .195); perspective: 1100px; perspective-origin: 50% -10%; }
.lv-couche .lv-livre { --w: inherit; position: absolute; top: calc(50% - var(--w) * .72); left: calc(50% - var(--w) / 2);
  transform: rotateX(-5deg) rotateZ(-90deg) rotateY(90deg); transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.lv-pres:hover .lv-couche .lv-livre, .lv-pres:focus-visible .lv-couche .lv-livre {
  transform: translateY(-8px) rotateX(calc(-24deg + var(--rx))) rotateZ(calc(-90deg + var(--ry))) rotateY(90deg); }
.lv-pres .lv-livre.suit { transition: transform .2s linear; }
.lv-couche::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -14px; height: 14px;
  background: radial-gradient(closest-side, rgba(0,0,0,.2), transparent); transition: opacity .8s, transform .8s; }
.lv-pres:hover .lv-couche::after { opacity: .6; transform: scaleX(.94) translateY(4px); }
.lv-pres.est-parti .lv-couche { visibility: hidden; }
.lv-pres:focus-visible { outline: none; }
.lv-pres:focus-visible .lv-couche { outline: 2px solid var(--fg-accent, #992CFF); outline-offset: 10px; border-radius: 4px; }
.lv-voir { display: none; position: absolute; right: 12px; bottom: 10px; padding: 6px 11px; border-radius: 99px; background: #fff;
  font: 500 12px/1 var(--fg-sans, system-ui), sans-serif; color: #0A0A0A; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
  opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; pointer-events: none; }
.lv-pres:hover .lv-voir, .lv-pres:focus-visible .lv-voir { opacity: 1; transform: none; }

/* ── The reader: the book flies out of its card, comes round to face you, opens full screen ── */
.lv-lecteur { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; padding: 0;
  background: transparent; color: #0A0A0A; overflow: hidden; }
.lv-lecteur[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.lv-lecteur::backdrop { background: rgba(245,243,239,0); transition: background .6s; }
.lv-lecteur.est-la::backdrop { background: rgba(245,243,239,.97); }
.lv-lecteur::before { content: ""; position: fixed; inset: 0; background: #F5F3EF; opacity: 0; transition: opacity .6s; pointer-events: none; }
.lv-lecteur.est-la::before { opacity: 1; }
.lv-fermer, .lv-nav { opacity: 0; transition: opacity .4s; }
.lv-lecteur.est-la .lv-fermer, .lv-lecteur.est-la .lv-nav { opacity: 1; transition-delay: .7s; }
.lv-fermer { position: absolute; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); z-index: 5;
  width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 99px; background: #fff; color: #0A0A0A; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.lv-scene { position: relative; perspective: 2600px; perspective-origin: 50% 40%; outline: none; }
.lv-vol { transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3,.75,.2,1); }
.lv-livre--lecteur { --w: min(44vw, calc((100dvh - 130px) / 1.44)); cursor: pointer;
  transform: rotateX(8deg) rotateY(-24deg); transition: transform 1s cubic-bezier(.3,.75,.2,1); }
.lv-livre--lecteur.est-couche { transform: rotateX(-9deg) rotateZ(-90deg) rotateY(90deg); }
.lv-livre--lecteur.est-ouvert { transform: translateX(calc(var(--w) / 2)) rotateX(4deg) rotateY(0deg); }
.lv-livre--lecteur.est-ouvert.est-seule { transform: rotateX(0deg) rotateY(0deg); }
.lv-vol, .lv-livre--lecteur { will-change: transform; }

/* The cover is a leaf of its own; the leaves are built by the script (livres.js). */
.lv-couv, .lv-feuille { position: absolute; transform-style: preserve-3d; transform-origin: 0 50%;
  transition: transform 1.15s cubic-bezier(.45,.05,.2,1); }
.lv-couv { inset: 0; transform: translateZ(calc(var(--d) / 2)); }
.lv-couv .lv-avant { transform: none; }
.lv-livre--lecteur.est-ouvert .lv-couv { transform: translateZ(calc(var(--d) / 2)) rotateY(-180deg); }
.lv-garde, .lv-recto, .lv-verso { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lv-garde, .lv-verso { transform: rotateY(180deg); }
.lv-garde { border-radius: 3px 1px 1px 3px; background: #EDE9E0; }
.lv-garde > .lv-page { inset: 3px 0 3px 4px; }
.lv-feuilles { position: absolute; inset: 0; transform-style: preserve-3d; }
.lv-feuille { top: 3px; left: 0; width: calc(var(--w) - 4px); height: calc(var(--h) - 6px);
  transform: translateZ(calc(var(--d) / 2 - (var(--i) + 1) * .5px)); }
.lv-feuille.est-tournee { transform: translateZ(calc(var(--d) / 2 + (var(--i) + 1) * .5px)) rotateY(-180deg); }
/* The light on a turning leaf: it darkens as it stands up, then lightens as it lies down. */
.lv-recto::after, .lv-verso::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.lv-recto::after { background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,.05) 60%, rgba(255,255,255,.12)); }
.lv-verso::after { background: linear-gradient(270deg, rgba(0,0,0,.28), rgba(0,0,0,.05) 60%, rgba(255,255,255,.12)); }
.lv-feuille.en-vol .lv-recto::after, .lv-feuille.en-vol .lv-verso::after { animation: lv-lumiere 1.15s ease-in-out; }
@keyframes lv-lumiere { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* A page: uncoated paper, the gutter shading toward the spine. */
.lv-page { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; color: #0A0A0A;
  font: 400 clamp(11px, calc(var(--w) * .032), 16px)/1.35 'Caslon WOTG', Georgia, serif;
  padding: calc(var(--w) * .085) calc(var(--w) * .075) calc(var(--w) * .055); }
.lv-recto .lv-page { background: linear-gradient(90deg, rgba(0,0,0,.1), rgba(0,0,0,.02) 7%, transparent 14%), #FBFAF6; }
.lv-verso .lv-page, .lv-garde .lv-page { background: linear-gradient(270deg, rgba(0,0,0,.1), rgba(0,0,0,.02) 7%, transparent 14%), #FBFAF6; }
.lv-page--blanche { background-color: #FBFAF6; }
.lv-folio { margin-top: calc(var(--w) * .03); text-align: center; font-size: .85em; opacity: .5; }
.lv-p-tete { font: 500 clamp(9px, calc(var(--w) * .021), 11px)/1 var(--fg-mono, ui-monospace), monospace; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.lv-p-titre { font-size: calc(var(--w) * .1); line-height: 1.02; white-space: nowrap; }
.lv-p-ligne { margin-top: calc(var(--w) * .03); font-style: italic; font-size: 1.15em; }
.lv-p-bas { margin-top: auto; font-size: .9em; opacity: .7; text-wrap: balance; }
.lv-page--titre { padding-top: calc(var(--w) * .2); }
.lv-page--titre .lv-auteur { font-size: 1em; }
.lv-page--titre .lv-tiret { width: 14px; margin: calc(var(--w) * .025) 0 calc(var(--w) * .03); }

/* Contents: the stores, a leader, the page; one line on each. */
.lv-page--sommaire ol { list-style: none; margin: calc(var(--w) * .07) 0 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--w) * .045); }
.lv-page--sommaire button { all: unset; display: block; width: 100%; cursor: pointer; }
.lv-s-l { display: flex; align-items: baseline; gap: 8px; font-size: 1.45em; }
.lv-s-pts { flex: 1; border-bottom: 1px dotted currentColor; opacity: .35; transform: translateY(-4px); }
.lv-s-ligne { display: block; margin-top: 3px; font-style: italic; opacity: .72; }
.lv-page--sommaire button:hover .lv-s-nom, .lv-page--sommaire button:focus-visible .lv-s-nom { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lv-page--sommaire button:focus-visible { outline: 2px solid var(--fg-accent, #992CFF); outline-offset: 4px; }

/* A store opens its chapter: its name large, one line, the way in. */
.lv-page--chapitre { justify-content: flex-start; }
.lv-c-nom { margin-top: calc(var(--w) * .28); font-size: calc(var(--w) * .14); line-height: 1; letter-spacing: -.01em; }
.lv-page--chapitre .lv-p-ligne { max-width: 26ch; }
.lv-c-bas { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.lv-boutique { color: inherit; font-size: 1.15em; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lv-boutique:hover { text-decoration-thickness: 2px; }
.lv-mdp { font-size: .9em; opacity: .65; }

/* A plate: the screenshot as large as the page allows, a caption and a way to the store. */
.lv-planche { padding-top: calc(var(--w) * .07); }
.lv-cadre { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.lv-cadre img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: zoom-in;
  box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 2px 6px rgba(0,0,0,.08); }
.lv-planche--tel .lv-cadre img { border-radius: calc(var(--w) * .035); }
.lv-planche figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: calc(var(--w) * .035); }
.lv-planche figcaption .lv-boutique { font-size: 1em; white-space: nowrap; }

/* The last page: the purchase. */
.lv-page--fin { align-items: center; justify-content: center; text-align: center; }
.lv-sym--fin { width: calc(var(--w) * .07); margin-bottom: calc(var(--w) * .05); }
.lv-p-bts { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: calc(var(--w) * .08); width: min(100%, 300px); }
.lv-p-bts .fg-bt { justify-content: center; }

.lv-nav { position: relative; display: flex; align-items: center; gap: 18px; font: 500 13px/1 var(--fg-mono, ui-monospace), monospace; color: #5E5B55; }
.lv-nav button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 99px; background: #fff; color: #0A0A0A; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.lv-nav button:disabled { opacity: .35; cursor: default; }
.lv-compte { min-width: 7ch; text-align: center; }

/* A plate, full screen. */
.lv-zoom { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 24px; background: rgba(245,243,239,.97); cursor: zoom-out; }
.lv-zoom[hidden] { display: none; }
.lv-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 10px 40px rgba(0,0,0,.12); }

/* On the pricing page, in the place of the store pictures: the book alone, no frame (Théo, 28/10). */
.pr2-scene .pr2-vitrine.pr2-vitrine--livre { container-type: inline-size; height: 128px !important; overflow: visible; background: none; border-radius: 0; }

@media (max-width: 720px) {
  .lv-livre--lecteur { --w: min(86vw, calc((100dvh - 150px) / 1.44)); }
  .pr2-scene .pr2-vitrine.pr2-vitrine--livre { height: 112px !important; }
  .lv-pres { --w: min(250px, 58cqi); }
}
@media (prefers-reduced-motion: reduce) {
  .lv-couche .lv-livre, .lv-vol, .lv-livre--lecteur, .lv-couv, .lv-feuille, .lv-quat, .lv-colophon { transition-duration: .01s !important; }
  .lv-feuille.en-vol .lv-recto::after, .lv-feuille.en-vol .lv-verso::after { animation: none; }
}

/* ── Third pass (Théo, 28/10): the book lands on its cover and waits for a click; spreads; the end ── */
.lv-livre--lecteur { transform: rotateX(4deg) rotateY(-10deg); }
.lv-livre--lecteur.est-arrive:not(.est-ouvert) { animation: lv-souffle 4s ease-in-out infinite; }
@keyframes lv-souffle { 50% { transform: translateY(-6px) rotateX(5deg) rotateY(-14deg); } }
.lv-aide { font: 400 14px/1.3 var(--fg-sans, system-ui), sans-serif; color: #5E5B55; letter-spacing: 0; }

/* The back board: a leaf of its own, hinged at the spine, the endpaper inside, the jacket outside. */
.lv-quat { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 0 50%;
  transform: translateZ(calc(var(--d) / -2)); transition: transform 1.2s cubic-bezier(.45,.05,.2,1); }
.lv-quat > .lv-garde--fin { transform: none; border-radius: 1px 3px 3px 1px; }
.lv-quat > .lv-garde--fin .lv-page { inset: 3px 4px 3px 0; background: linear-gradient(90deg, rgba(0,0,0,.1), rgba(0,0,0,.02) 7%, transparent 14%), #F1EEE6; }
.lv-quat > .lv-dos { transform: rotateY(180deg); }
.lv-livre--lecteur.est-fin .lv-quat { transform: translateZ(calc(var(--d) / 2 + var(--nf, 12) * .5px + 2px)) rotateY(-180deg); }
.lv-livre--lecteur .lv-pages, .lv-livre--lecteur .lv-ht, .lv-livre--lecteur .lv-bs { transition: opacity .5s .4s; }
.lv-livre--lecteur.est-fin .lv-pages, .lv-livre--lecteur.est-fin .lv-ht, .lv-livre--lecteur.est-fin .lv-bs { opacity: 0; transition-delay: 0s; }
.lv-livre--lecteur.est-ouvert.est-fin { transform: translateX(calc(var(--w) * .32)) scale(.78) rotateX(4deg) rotateY(16deg); }

/* The colophon beside the closed book: the name, the price, the purchase. */
.lv-colophon { position: absolute; left: calc(50% + 3vw); top: 50%; width: min(360px, 40vw); transform: translate(24px, -50%);
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; opacity: 0; pointer-events: none;
  font: 400 16px/1.35 'Caslon WOTG', Georgia, serif; color: #0A0A0A; transition: opacity .6s, transform .8s cubic-bezier(.2,.8,.2,1); }
.lv-lecteur.est-fin .lv-colophon { opacity: 1; transform: translate(0, -50%); pointer-events: auto; transition-delay: .9s; }
.lv-colophon .lv-sym--fin { width: 22px; margin: 0 0 18px; }
.lv-colophon .lv-auteur { font-size: 14px; }
.lv-co-titre { font-size: clamp(34px, 4vw, 52px); line-height: 1; margin-top: 8px; white-space: nowrap; }
.lv-colophon .lv-p-ligne { font-size: 19px; }
.lv-co-prix { margin-top: 22px; font: 400 15px/1.3 var(--fg-sans, system-ui), sans-serif; color: #5E5B55; }
.lv-co-prix b { font: 600 30px/1 var(--fg-sans, system-ui), sans-serif; letter-spacing: -.03em; color: #0A0A0A; margin-right: 6px; }
.lv-co-ligne { font-style: italic; opacity: .7; }
.lv-colophon .lv-p-bts { margin-top: 18px; width: 100%; }

/* A desktop screenshot across a spread: the two halves of one picture, meeting at the gutter. */
.lv-planche--g, .lv-planche--d { padding-left: 0; padding-right: 0; }
.lv-planche--g { padding-left: calc(var(--w) * .075); }
.lv-planche--d { padding-right: calc(var(--w) * .075); }
.lv-moitie { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; overflow: hidden; }
.lv-moitie > span { display: block; width: 100%; aspect-ratio: 1440 / 1800; cursor: zoom-in;
  background: #EEE no-repeat; background-size: 200% 100%; }
.lv-planche--g .lv-moitie > span { background-position: 0 0; }
.lv-planche--d .lv-moitie > span { background-position: 100% 0; }
.lv-planche--g figcaption { visibility: hidden; }
.lv-planche--d figcaption { padding-left: calc(var(--w) * .075); }

/* The chapter page: what the home page holds. */
.lv-c-home { display: flex; flex-direction: column; gap: 2px; margin-top: calc(var(--w) * .07); }
.lv-c-home .lv-p-tete { margin-bottom: 6px; }

@media (max-width: 720px) {
  .lv-livre--lecteur.est-ouvert.est-fin.est-seule { transform: translateX(calc(var(--w) * .5)) translateY(calc(var(--h) * -.3)) scale(.44) rotateX(4deg) rotateY(14deg); }
  .lv-colophon { left: 50%; top: calc(50% - 6px); width: calc(100vw - 48px); transform: translate(-50%, 24px); align-items: center; text-align: center; gap: 2px; }
  .lv-lecteur.est-fin .lv-colophon { transform: translate(-50%, 0); }
  .lv-colophon .lv-sym--fin, .lv-colophon .lv-auteur, .lv-co-ligne { display: none; }
  .lv-co-titre { font-size: 32px; margin-top: 0; }
  .lv-colophon .lv-p-ligne { font-size: 16px; margin-top: 4px; }
  .lv-co-prix { margin-top: 12px; }
  .lv-colophon .lv-p-bts { margin-top: 14px; }
}

/* ── Fourth pass (Théo, 28/10): the book turns freely under the pointer or a finger, and grows or shrinks ── */
.lv-scene { touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.lv-scene.est-tenue, .lv-scene.est-tenue .lv-livre--lecteur { cursor: grabbing; }
.lv-orbite { transform-style: preserve-3d;
  transform: scale(var(--z, 1)) rotateX(var(--ox, 0deg)) rotateY(var(--oy, 0deg));
  transition: transform .6s cubic-bezier(.3,.75,.2,1); }
.lv-scene.est-tenue .lv-orbite { transition: none; }
.lv-vue { position: absolute; top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); z-index: 5;
  display: flex; gap: 8px; opacity: 0; transition: opacity .4s; }
.lv-lecteur.est-la .lv-vue { opacity: 1; transition-delay: .7s; }
.lv-vue button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 99px; background: #fff; color: #0A0A0A; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.lv-vue button:disabled { opacity: .35; cursor: default; }
@media (prefers-reduced-motion: reduce) { .lv-orbite { transition-duration: .01s !important; } }
.lv-nav { z-index: 5; }

/* ── Fifth pass (Théo, 28/10, after Nomad Letters seen up close): a real hardcover. The boards have a
   thickness (--lv-ep) and stand proud of the text block by a square (--sq); the page edges are grey,
   streaked and shaded under the boards; a headband at the spine; the back says its line again. ── */
.lv-livre { --lv-ep: calc(var(--w) * .013); --sq: calc(var(--w) * .022); }
.lv-pages { top: var(--sq); height: calc(var(--h) - 2 * var(--sq)); width: calc(var(--d) - 2 * var(--lv-ep)); left: calc(50% - var(--d) / 2 + var(--lv-ep));
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2 - var(--sq)));
  background:
    linear-gradient(90deg, rgba(40,38,34,.32), rgba(40,38,34,.06) 14%, transparent 30%, transparent 70%, rgba(40,38,34,.06) 86%, rgba(40,38,34,.32)),
    linear-gradient(180deg, rgba(0,0,0,.1), transparent 6%, transparent 94%, rgba(0,0,0,.12)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85 .003' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .3 0 0 0 0 .3 0 0 0 .9 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, #F6F5F2 0 .7px, #D3D1CB .7px 1.2px, #ECEBE7 1.2px 2px, #C9C7C1 2px 2.4px, #F1F0EC 2.4px 3.3px),
    #E6E5E1;
  background-size: 100% 100%, 100% 100%, 180px 100%, auto, auto; }
.lv-ht, .lv-bs { left: 2px; width: calc(var(--w) - var(--sq) - 2px); height: calc(var(--d) - 2 * var(--lv-ep)); top: calc(50% - var(--d) / 2 + var(--lv-ep));
  background:
    linear-gradient(0deg, rgba(40,38,34,.3), rgba(40,38,34,.05) 16%, transparent 32%, transparent 68%, rgba(40,38,34,.05) 84%, rgba(40,38,34,.3)),
    repeating-linear-gradient(0deg, #3A3A3A 0 1px, #F4F2EE 1px 2px) 0 0 / calc(var(--w) * .014) 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .85' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .3 0 0 0 0 .3 0 0 0 .9 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 100% 180px,
    repeating-linear-gradient(0deg, #F6F5F2 0 .7px, #D3D1CB .7px 1.2px, #ECEBE7 1.2px 2px, #C9C7C1 2px 2.4px, #F1F0EC 2.4px 3.3px),
    #E6E5E1; }
.lv-ht { transform: rotateX(90deg) translateZ(calc(var(--h) / 2 - var(--sq))); }
.lv-bs { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2 - var(--sq))); }

/* The boards' edges. */
.lv-carton { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.lv-carton--av { transform: translateZ(calc(var(--d) / 2)); }
.lv-carton--ar { transform: translateZ(calc(var(--d) / -2 + var(--lv-ep))); }
.lv-carton--q { transform: translateZ(var(--lv-ep)); }
.lv-carton > i { position: absolute; display: block; transform-origin: 0 0;
  background: var(--gravure) no-repeat, linear-gradient(90deg, var(--c1), var(--c3)); filter: brightness(.86); }
.lv-k-chant { left: var(--w); top: 0; width: var(--lv-ep); height: var(--h); transform: rotateY(90deg);
  background-size: calc(2 * var(--w) + var(--d)) var(--h), 100% 100% !important; background-position: right top, 0 0 !important; }
.lv-k-tete, .lv-k-pied { left: 0; width: var(--w); height: var(--lv-ep); transform: rotateX(-90deg); background: linear-gradient(90deg, var(--c1), var(--c3)) !important; }
.lv-k-tete { top: 0; filter: brightness(1.02); }
.lv-k-pied { top: var(--h);
  background: var(--gravure) right bottom / calc(2 * var(--w) + var(--d)) var(--h) no-repeat, linear-gradient(90deg, var(--c1), var(--c3)) !important; filter: brightness(.72); }
.lv-carton--ar .lv-k-chant, .lv-carton--q .lv-k-chant { background-position: left top, 0 0 !important; }
.lv-carton--ar .lv-k-pied, .lv-carton--q .lv-k-pied { background-position: left bottom, 0 0 !important; }
/* A board catches the light on its edge, darker at the corners. */
.lv-avant, .lv-quat > .lv-dos, .lv-livre > .lv-dos { box-shadow: inset 0 0 0 .5px rgba(0,0,0,.18), inset -1px 0 0 rgba(255,255,255,.35); }

/* The text block inside the reader: the leaves and endpapers sit inside the squares. */
.lv-feuille { top: var(--sq); width: calc(var(--w) - var(--sq)); height: calc(var(--h) - 2 * var(--sq)); }
.lv-garde > .lv-page { inset: var(--sq) 0 var(--sq) 4px; }
.lv-quat > .lv-garde--fin .lv-page { inset: var(--sq) 4px var(--sq) 0; }

/* The back: one line, after the prototype (Théo, 28/10). */
.lv-dos { padding: calc(var(--w) * .11) calc(var(--w) * .093); }
.lv-accroche { position: relative; z-index: 2; display: block; font-style: italic; font-size: calc(var(--w) * .072); line-height: 1.15; white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 -.5px 0 rgba(0,0,0,.18); }

/* The end, again (Théo, 28/10): closing the back board over the turned leaves left a book a few pages
   thick. Now the leaves fall back, the cover closes, and the whole book turns round to show its back. */
.lv-livre--lecteur.est-fin .lv-quat { transform: translateZ(calc(var(--d) / -2)); }
.lv-livre--lecteur.est-fin .lv-pages, .lv-livre--lecteur.est-fin .lv-ht, .lv-livre--lecteur.est-fin .lv-bs { opacity: 1; }
.lv-livre--lecteur.est-fin { transform: translateX(calc(var(--w) * -.55)) scale(.8) rotateX(4deg) rotateY(196deg);
  transition: transform 1.3s cubic-bezier(.45,.05,.2,1) .35s; }
.lv-livre--lecteur.est-arrive.est-fin { animation: none; }
@media (max-width: 720px) {
  .lv-livre--lecteur.est-fin.est-seule { transform: translateY(calc(var(--h) * -.3)) scale(.44) rotateX(4deg) rotateY(196deg); }
}

/* ── On the home page's tier cards (Théo, 28/10, after OpenSpaces' box in front of its laptop): the
   book stands left of the demo, opposite the phone, three quarters, the front cover toward you; it
   straddles the bottom edge of the picture's frame, part inside, part below. ── */
.pv-mx-cadre { position: relative; align-self: stretch; flex: none; margin: -2px -2px calc(22px + 7%); container-type: inline-size; }
.pv-mx-cadre > .pv-mx-vue { margin: 0; }
.lv-debout { position: absolute; z-index: 2; left: 6%; bottom: -10cqi; perspective: 1400px; perspective-origin: 80% 30%; pointer-events: none; }
/* 27cqi turned into pixels once, on .lv-debout: left as cqi, the vertical title of the spine
   (writing-mode) measured it against the container's height and came out too large. */
@property --lv-debout-w { syntax: '<length>'; inherits: true; initial-value: 100px; }
.lv-debout { --lv-debout-w: 27cqi; }
.lv-debout .lv-livre { --w: var(--lv-debout-w);
  transform: rotateX(-3deg) rotateY(30deg); transition: transform .9s var(--pv-ressort, ease); }
/* The shadow it casts on the ground. */
.lv-debout::after { content: ""; position: absolute; z-index: -1; left: 4%; right: -14%; bottom: -5%; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.3), transparent); filter: blur(3px); }
@media (hover: hover) { .pv--mix .pv-carte:hover .lv-debout .lv-livre { transform: translateY(-5px) rotateX(-3deg) rotateY(22deg); } }
@media (max-width: 720px) {
  .pv-mx-cadre { margin-bottom: calc(16px + 11%); }
  .lv-debout { left: 5%; }
}
@media (prefers-reduced-motion: reduce) { .lv-debout .lv-livre { transition: none; } }

/* ── Phone (Théo, 28/10, on his iPhone): no double-tap zoom on the page or the buttons, no callout
   or selection under a finger; one page at a time, the turned leaf goes away to the left instead of
   staying as a strip at the edge of the screen. ── */
.lv-lecteur { touch-action: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.lv-lecteur button, .lv-lecteur a { touch-action: manipulation; }
.lv-zoom { touch-action: pinch-zoom; }
.lv-livre--lecteur.est-seule .lv-feuille, .lv-livre--lecteur.est-seule .lv-couv { visibility: visible;
  transition: transform 1.15s cubic-bezier(.45,.05,.2,1), visibility 0s; }
.lv-livre--lecteur.est-seule .lv-feuille.est-tournee, .lv-livre--lecteur.est-seule.est-ouvert .lv-couv { visibility: hidden;
  transition: transform 1.15s cubic-bezier(.45,.05,.2,1), visibility 0s .75s; }

/* WebKit (livres.js sets .lv-webkit): no filter or blend mode inside a face, so each face stays one flat
   layer and Safari cannot slice the cover against its own picture (Théo's iPhone, 28/10). */
.lv-webkit .lv-gravure { filter: none; }
.lv-webkit .lv-holo { display: none; }
.lv-webkit .lv-avant::after, .lv-webkit .lv-tranche::after, .lv-webkit .lv-dos::after { mix-blend-mode: normal; opacity: .12; }
.lv-webkit .lv-carton > i { filter: none; }
.lv-webkit .lv-sym--dos { filter: none; }

/* ── Pass of 28/10, evening (Théo on his iPhone: the cover flickers, only the right page shows) ──
   Safari splits planes that lie too close together: the cover and its endpaper shared a plane, the
   back board and its endpaper too, and the leaves lay half a pixel apart. They now stand apart. */
.lv-garde { transform: rotateY(180deg) translateZ(.6px); }
.lv-quat > .lv-garde--fin { transform: translateZ(.6px); }
.lv-feuille { transform: translateZ(calc(var(--d) / 2 - 1.5px - var(--i) * 1px)); }
.lv-feuille.est-tournee { transform: translateZ(calc(var(--d) / 2 + 1.5px + var(--i) * 1px)) rotateY(-180deg); }
/* No breathing and no will-change on WebKit: an animated transform on a 3D parent made it redraw the
   faces in the wrong order for a frame, the cover vanishing and coming back. */
.lv-webkit .lv-livre--lecteur.est-arrive:not(.est-ouvert) { animation: none; }
.lv-webkit .lv-vol, .lv-webkit .lv-livre--lecteur { will-change: auto; }

/* A phone shows the spread too: the book is half the screen wide; closed, it is drawn larger, and
   it comes down to size as it opens. */
@media (max-width: 720px) {
  .lv-livre--lecteur { --w: min(46vw, calc((100dvh - 170px) / 1.44)); transform: translateY(-4%) scale(1.55) rotateX(4deg) rotateY(-10deg); }
  .lv-livre--lecteur.est-couche { transform: rotateX(-9deg) rotateZ(-90deg) rotateY(90deg); }
  .lv-livre--lecteur.est-ouvert { transform: translateX(calc(var(--w) / 2)) rotateX(2deg); }
  /* At the end the book stands between the buttons at the top and the colophon, never under them. */
  .lv-livre--lecteur.est-fin { transform: translateY(calc(10px - 25dvh)) scale(.78) rotateX(4deg) rotateY(196deg); }
  .lv-colophon { top: calc(50% - 40px); }
  .lv-nav { position: fixed; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); translate: -50% 0; }
  .lv-page { padding: calc(var(--w) * .07) calc(var(--w) * .06) calc(var(--w) * .05); font-size: 9px; overflow: hidden; }
  .lv-page--sommaire ol { margin-top: calc(var(--w) * .04); gap: calc(var(--w) * .025); }
  .lv-s-l { font-size: 1.3em; }
  .lv-s-ligne { margin-top: 1px; }
}

/* ── Safari, for good (Théo's iPhone, 28/10, night): WebKit there hid no face turned away and drew
   the planes in the order of the code, so the back showed through the pages and the cover through
   its endpaper. livres.js now decides, frame by frame, which faces you can see (.lv-cache on the
   others) and stacks the planes itself. A face is one flat sheet: no clip, no rounded corner, which
   made Safari draw a face's picture and lettering as layers apart from the face. ── */
.lv-webkit .lv-livre .lv-cache { visibility: hidden; }
.lv-webkit .lv-livre .lv-f, .lv-webkit .lv-livre .lv-garde { overflow: visible; border-radius: 0; }
.lv-webkit .lv-livre--lecteur .lv-enfoui { visibility: hidden; }
/* What a face holds (picture, lettering, grain) stands a hair in front of it, so Safari cannot
   sort it behind the face's own colour. */
.lv-webkit .lv-livre .lv-f { transform-style: preserve-3d; }
.lv-webkit .lv-livre .lv-f > *, .lv-webkit .lv-livre .lv-f::before, .lv-webkit .lv-livre .lv-f::after { transform: translateZ(.5px); }
/* The home page loads no script for its books, so no .lv-webkit there: the standing book only ever
   shows its front, its spine and its head (three quarters, from a little above), and the faces it
   never shows are hidden outright, in every browser. */
.lv-debout .lv-dos, .lv-debout .lv-pages, .lv-debout .lv-bs { visibility: hidden; }

/* A phone page says less (Théo, 28/10: « chargé sur téléphone »): the contents keep the names and
   the page numbers, a store's opening keeps its name, its line and the way in; the rest waits for a
   wider screen, where the same pages show it. */
@media (max-width: 720px) {
  .lv-page--sommaire .lv-s-ligne, .lv-page--sommaire > .lv-p-bas, .lv-page--titre > .lv-p-bas, .lv-c-home { display: none; }
  .lv-page--sommaire ol { gap: calc(var(--w) * .06); }
}