/* Thème etagere : étagère en bambou, livres, matières, pupitre. Scène de l'accueil (/blog/) et des pages de rayon (classe home),
   livres et couvertures des archives. */
/* Unite de mise en page : 1rem = 10 px de la maquette 1280 x 720. Au-dela de 1024 px, la scene suit l'ecran :
   --sw rem de large (128), --sh rem de haut (67,2 : meuble, pupitre et 5rem pour les objets poses dessus) entre l'en-tete et le plancher
   (en-tete et pied restent en px). shelf.js agrandit --sw et --sh quand un rayon a trop de livres. */
@media (min-width: 1024px) { html.home { font-size: min(100vw / var(--sw, 128), (100dvh - var(--head-h) - var(--foot-h)) / var(--sh, 67.2)); } }
/* Le soir, le mur et le plancher gardent leur teinte : seule la lumière change (calque --light en multiply). */
html.home.dark { --wall: #e4d9c4; --floor: #6a4a32; --bar-bg: #4a382a; }
html.home body { background: var(--lime), var(--wall); }
/* Lumiere de la piece : jour par la gauche, lampe le soir. */
html.home body::after { content: ''; position: fixed; inset: 0; z-index: 5; pointer-events: none; mix-blend-mode: multiply; background: var(--light); }
/* Soir : la lampe posee sur le meuble eclaire la piece. shelf.js donne la position de sa flamme (--lx, --ly) en ecran large ;
   sinon la lumiere reste au-dessus du pupitre. */
html.home.dark { --light: linear-gradient(180deg, rgba(30, 18, 10, .5) 0, rgba(30, 18, 10, 0) 9rem), radial-gradient(ellipse 86% 112% at var(--lx, 86%) var(--ly, 52%), #fff0d2 0%, #f0cc96 20%, #c9a073 46%, #a3815f 74%, #8a6b50 100%); }

/* position: relative : la fiche flottante est placee dans main (books.js). */
.room { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2.4rem; padding: 2rem 2.4rem 4rem; }

/* Chaume de bambou vertical : noeuds (anneaux) a intervalle --p decale de --o, volume rond, fibres, teinte --bc. */
.pole, .post, .leg { background:
    linear-gradient(180deg, transparent 0 calc(100% - .9rem), rgba(70, 45, 15, .14) calc(100% - .6rem), rgba(60, 38, 12, .5) calc(100% - .32rem), rgba(255, 244, 214, .55) calc(100% - .2rem), rgba(70, 45, 15, .28) calc(100% - .02rem), transparent 100%) 0 var(--o, 3rem) / 100% var(--p, 16rem) repeat-y,
    linear-gradient(90deg, rgba(45, 28, 8, .55) 0, rgba(45, 28, 8, .12) 14%, rgba(255, 247, 222, .5) 32%, rgba(255, 247, 222, .12) 46%, transparent 60%, rgba(45, 28, 8, .22) 82%, rgba(45, 28, 8, .6) 100%),
    var(--fib-v), var(--bc, #c9a066); }
/* Chaume horizontal : meme dessin tourne. */
.rail::before, .xbar, .ledge { background:
    linear-gradient(90deg, transparent 0 calc(100% - .9rem), rgba(70, 45, 15, .14) calc(100% - .6rem), rgba(60, 38, 12, .5) calc(100% - .32rem), rgba(255, 244, 214, .55) calc(100% - .2rem), rgba(70, 45, 15, .28) calc(100% - .02rem), transparent 100%) var(--o, 3rem) 0 / var(--p, 16rem) 100% repeat-x,
    linear-gradient(180deg, rgba(45, 28, 8, .5) 0, rgba(45, 28, 8, .1) 14%, rgba(255, 247, 222, .52) 30%, rgba(255, 247, 222, .12) 46%, transparent 60%, rgba(45, 28, 8, .24) 82%, rgba(45, 28, 8, .62) 100%),
    var(--fib-h), var(--bc, #c9a066); }
/* Ligature en raphia : tours croises sur le croisement de deux chaumes. */
.lash, .post::before, .post::after { content: ''; position: absolute; z-index: 3; border-radius: .35rem; background:
    linear-gradient(90deg, rgba(40, 25, 8, .35), transparent 25%, rgba(255, 248, 225, .25) 45%, transparent 65%, rgba(40, 25, 8, .4)),
    repeating-linear-gradient(52deg, transparent 0 .22rem, rgba(90, 64, 28, .55) .22rem .3rem, transparent .3rem .5rem),
    repeating-linear-gradient(-52deg, #dccb98 0 .22rem, #b49a62 .22rem .3rem, #e6d6a8 .3rem .5rem);
  box-shadow: 0 1px 2px rgba(30, 18, 6, .45); }

/* Meuble : montants pleine hauteur, traverses (chaume + lattes de bambou fendu), fond tresse. */
.case { --ov: .8rem; --pw: 2.6rem; position: relative; flex: none; width: min(56rem, 100%); padding: 1.2rem 0 2.8rem; }
.pole { position: absolute; z-index: 1; top: 0; bottom: 0; width: var(--pw); border-radius: .4rem .4rem .2rem .2rem; filter: drop-shadow(calc(var(--sx) * .8rem) .6rem .6rem rgba(40, 24, 8, calc(var(--drop) * .7))); }
.pole.l { left: var(--ov); }
.pole.r { right: var(--ov); }
/* Bout coupe du chaume : creux sombre, bord clair. */
.pole::before { content: ''; position: absolute; left: 0; right: 0; top: -.3rem; height: .8rem; border-radius: 50%; background: radial-gradient(ellipse 50% 50% at 50% 55%, #2a1c0e 0 52%, #6d4d27 66%, transparent 70%), linear-gradient(180deg, #f0dcac, #b48d55); }
.back { position: absolute; left: calc(var(--ov) + var(--pw) / 2); right: calc(var(--ov) + var(--pw) / 2); top: 2.4rem; bottom: 4.4rem;
  background: var(--twill) 0 0 / 2.4rem 2.4rem, var(--fine), var(--weave);
  box-shadow: calc(var(--sx) * 1.6rem) 1.4rem 2.6rem -.6rem rgba(50, 32, 14, calc(var(--drop) * .75)); }
.rail { position: relative; height: 3.2rem; }
.rail.top { height: 2.4rem; }
.rail::before { content: ''; position: absolute; z-index: 2; left: 0; right: 0; top: 1rem; bottom: 0; border-radius: .9rem / 1.1rem; filter: drop-shadow(calc(var(--sx) * .4rem) .5rem .4rem rgba(40, 24, 8, calc(var(--drop) * .7))); }
.rail.top::before { top: 0; }
/* Lattes de bambou fendu vues par-dessus, entre les montants. */
.rail::after { content: ''; position: absolute; z-index: 0; left: calc(var(--ov) + var(--pw)); right: calc(var(--ov) + var(--pw)); top: 0; height: 1.1rem;
  background: linear-gradient(180deg, rgba(40, 24, 8, .55) 0, rgba(40, 24, 8, .15) 1px, rgba(255, 244, 214, .3) .25rem, rgba(40, 24, 8, .4) .38rem, rgba(255, 244, 214, .25) .45rem, rgba(40, 24, 8, .35) .72rem, rgba(255, 244, 214, .3) .78rem, transparent 1rem), var(--fib-h), #c19a5f; }
.rail.top::after { display: none; }
.lash { left: calc(var(--ov) - .25rem); top: .85rem; width: calc(var(--pw) + .5rem); height: 2.5rem; }
.lash.r { left: auto; right: calc(var(--ov) - .25rem); }
.rail.top .lash { top: -.15rem; height: 2.7rem; }
.level { position: relative; display: flex; height: 23.8rem; padding: 0 calc(var(--ov) + var(--pw)); }
/* Montant intermediaire entre deux cases, ligature en haut et en bas. */
.post { position: relative; z-index: 1; flex: none; width: 2.2rem; margin: -1rem 0 -3rem; }
.post::before, .post::after { left: -.25rem; right: -.25rem; height: 2.3rem; }
.post::before { top: -1.15rem; }
.post::after { bottom: -.15rem; }

/* Case : ombre de la traverse du dessus, ombres laterales, assombrissement au pied. */
.shelf { position: relative; flex: var(--g, 1) 1 0; min-width: 0; display: flex; background:
    linear-gradient(180deg, rgba(20, 12, 4, var(--cast)) 0, rgba(20, 12, 4, calc(var(--cast) / 2)) 1.6rem, rgba(20, 12, 4, calc(var(--cast) / 6)) 7rem, transparent 55%, rgba(20, 12, 4, calc(var(--cast) / 2.5)) 100%),
    linear-gradient(90deg, rgba(20, 12, 4, var(--side)) 0, transparent 3rem, transparent calc(100% - 3rem), rgba(20, 12, 4, var(--side)) 100%); }
.row { list-style: none; flex: 1; display: flex; align-items: flex-end; gap: .3rem; padding-left: .2rem; }
.row > li { display: flex; align-items: flex-end; flex: none; }
.row > .set { gap: 1px; }
.gap { flex: none; width: calc(var(--w) * .1rem); }

/* Etiquette en papier kraft, nouee au raphia sur la traverse. */
.shelf h2 { position: absolute; z-index: 4; left: 1.6rem; bottom: -2.95rem; display: flex; align-items: center; height: 1.9rem; padding: 0 .9rem 0 1.9rem; font: 700 1.1rem/1 'Courier Prime', 'Courier New', monospace; letter-spacing: .14em; text-transform: uppercase; color: #3a2b1c;
  background: radial-gradient(circle at .85rem 50%, #3b2a18 0 .2rem, #f3e6c6 .22rem .38rem, transparent .4rem), linear-gradient(180deg, rgba(255, 250, 235, .3), transparent 40%, rgba(80, 55, 25, .12)), var(--paper), #e2cfa5;
  clip-path: polygon(.6rem 0, 100% 0, 100% 100%, .6rem 100%, 0 calc(100% - .6rem), 0 .6rem); filter: drop-shadow(0 1px 1px rgba(30, 18, 6, .5)); }
.shelf h2 a { text-decoration: none; }
.shelf h2 a:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Brin de raphia passe dans l'oeillet et autour du chaume. */
.shelf h2::before { content: ''; position: absolute; left: .7rem; top: -.9rem; width: .3rem; height: 1.6rem; border-radius: .2rem; transform: rotate(-24deg); background: linear-gradient(90deg, #b9a06a, #e8d9ac 50%, #a88c55); }

/* Etiquette en papier kraft plus grande : nom du rayon (h1) sur la traverse du haut, titre des archives et des tags. */
.kraft { position: relative; display: inline-flex; align-items: center; height: 2.8rem; padding: 0 1.4rem 0 2.8rem; font: 700 1.5rem/1 'Courier Prime', 'Courier New', monospace; letter-spacing: .14em; text-transform: uppercase; color: #3a2b1c;
  background: radial-gradient(circle at 1.2rem 50%, #3b2a18 0 .28rem, #f3e6c6 .3rem .5rem, transparent .52rem), linear-gradient(180deg, rgba(255, 250, 235, .3), transparent 40%, rgba(80, 55, 25, .12)), var(--paper), #e2cfa5;
  clip-path: polygon(.9rem 0, 100% 0, 100% 100%, .9rem 100%, 0 calc(100% - .9rem), 0 .9rem); filter: drop-shadow(0 1px 1px rgba(30, 18, 6, .5)); }
/* Page de rayon : fil d'Ariane sur la traverse du haut, etiquette de retour a l'etagere puis nom du rayon. */
.case > .crumb { position: absolute; z-index: 4; top: 1rem; left: 50%; translate: -50% 0; display: flex; gap: .5rem; white-space: nowrap; }
.kraft.up { padding-right: 1.2rem; text-decoration: none; }
.kraft.up span { margin-right: .5rem; }
.kraft.up:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Serre-livres : fagot de trois troncons de bambou lies au raphia. */
.end { position: relative; width: 3.9rem; height: 10.6rem; margin-left: .1rem; border-radius: .3rem .3rem .1rem .1rem;
  background:
    linear-gradient(180deg, transparent 0 26%, rgba(60, 40, 15, .4) 26% calc(26% + 1px), transparent calc(26% + 1px) calc(34% - 1px), rgba(60, 40, 15, .4) calc(34% - 1px) 34%, transparent 34% 70%, rgba(60, 40, 15, .4) 70% calc(70% + 1px), transparent calc(70% + 1px) calc(78% - 1px), rgba(60, 40, 15, .4) calc(78% - 1px) 78%, transparent 78%),
    linear-gradient(180deg, transparent 0 26%, #d9c690 26% 34%, transparent 34% 70%, #d9c690 70% 78%, transparent 78%),
    linear-gradient(180deg, transparent 0 51%, rgba(60, 38, 12, .5) 51% 52%, rgba(255, 244, 214, .5) 52% 53%, transparent 53%),
    repeating-linear-gradient(90deg, rgba(45, 28, 8, .55) 0, rgba(255, 247, 222, .45) .4rem, transparent .7rem, rgba(45, 28, 8, .55) 1.3rem),
    var(--fib-v),
    linear-gradient(90deg, #cfae6e 0 1.3rem, #b48a4c 1.3rem 2.6rem, #c8b27c 2.6rem);
  filter: drop-shadow(calc(var(--sx) * .6rem) .3rem .7rem rgba(0, 0, 0, var(--drop))); }
.end::before { content: ''; position: absolute; left: 0; right: 0; top: -.25rem; height: .6rem; background: radial-gradient(ellipse .65rem .3rem at .65rem 50%, #2a1c0e 0 55%, #e8d3a2 65%, transparent 72%), radial-gradient(ellipse .65rem .3rem at 1.95rem 50%, #2a1c0e 0 55%, #d9bc85 65%, transparent 72%), radial-gradient(ellipse .65rem .3rem at 3.25rem 50%, #2a1c0e 0 55%, #e3cf9c 65%, transparent 72%); }

/* Livre : a.book garde sa place, .lift sort du rayon, .v porte le dos (dessine a plat puis tourne). */
.book { position: relative; display: block; flex: none; width: calc(var(--w) * .1rem); height: calc(var(--h) * .1rem); text-decoration: none; outline: none; -webkit-tap-highlight-color: transparent; }
.book.on { z-index: 3; }
.lift { position: absolute; inset: 0; transform-origin: 50% 100%; transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease;
  box-shadow: calc(var(--sx) * -1px) 0 1px rgba(0, 0, 0, .3), calc(var(--sx) * .6rem) .3rem 1.3rem -1px rgba(0, 0, 0, var(--drop)); }
.lift::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .2), transparent 22%, transparent 88%, rgba(0, 0, 0, .18)); }
.on .lift { transform: translateY(-1rem) scale(1.03); box-shadow: 0 1.6rem 2rem -.8rem rgba(0, 0, 0, .6), calc(var(--sx) * .8rem) .6rem 2.2rem rgba(0, 0, 0, .4); }
.book:focus-visible .lift, .book:focus-visible .cover { outline: 2px solid var(--focus); outline-offset: 3px; }
.v { position: absolute; left: 0; top: 0; width: calc(var(--h) * .1rem); height: calc(var(--w) * .1rem); transform-origin: 0 0; transform: translateY(calc(var(--h) * .1rem)) rotate(-90deg); }
.spine { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; background-color: var(--c); color: #efe5cf; font-size: 1.3rem; line-height: 1; }
.spine::before, .spine::after { content: ''; position: absolute; top: 0; bottom: 0; pointer-events: none; }
.t { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; padding: 2px 0; }
.vol { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 2.4rem; align-self: stretch; font-size: 1.1rem; letter-spacing: .04em; }
.vol b { display: block; font-weight: inherit; transform: rotate(90deg); font-size: min(1em, calc(var(--w) * .03rem)); letter-spacing: 0; } /* tome lisible sur un dos fin */
/* Tranche des pages, visible sur le livre sorti. */
.pages { position: absolute; left: 100%; top: 0; bottom: 0; width: .8rem; transform-origin: 0 50%; transform: scaleX(0); transition: transform .28s cubic-bezier(.2, .7, .2, 1); clip-path: polygon(0 0, 100% 2px, 100% calc(100% - 2px), 0 100%);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .28)), linear-gradient(180deg, var(--c) 0 2px, transparent 2px calc(100% - 2px), var(--c) calc(100% - 2px)), repeating-linear-gradient(180deg, #f6eedd 0 1px, #d8caae 1px 2px); }
.on .pages { transform: scaleX(1); }
/* Signet en soie pour les articles recents. */
.rib { position: absolute; z-index: 1; left: calc(100% - 3px); top: 56%; width: 1.6rem; height: .5rem; background: linear-gradient(180deg, #a5392c, #7d241c); clip-path: polygon(0 0, 100% 0, 74% 50%, 100% 100%, 0 100%); transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
.on .rib { transform: translateX(.6rem); }

/* Cuir : grain fin, dos arrondi, nerfs, filets et titre dores, piece de titre noire pour le tome. */
.m-leather .spine { padding: 0 2.4rem 0 2.3rem; color: #d9b96f; background-image:
    linear-gradient(90deg, rgba(255, 228, 190, .2), transparent 3px, transparent calc(100% - 3px), rgba(255, 228, 190, .2)),
    linear-gradient(180deg, rgba(0, 0, 0, .5) 0, rgba(255, 238, 215, .2) 27%, rgba(255, 238, 215, .06) 45%, rgba(0, 0, 0, .1) 72%, rgba(0, 0, 0, .55) 100%),
    var(--fine); }
.m-leather .spine::before, .m-leather .spine::after { width: 1.6rem; background: linear-gradient(90deg, rgba(0, 0, 0, .5) 0, rgba(255, 238, 215, .28) .15rem, rgba(0, 0, 0, .04) .3rem, rgba(0, 0, 0, .55) .45rem, transparent .45rem .75rem, rgba(217, 185, 111, .85) .75rem .85rem, transparent .85rem 1.05rem, rgba(217, 185, 111, .85) 1.05rem 1.15rem, transparent 1.15rem); }
.m-leather .spine::before { left: .5rem; }
.m-leather .spine::after { right: .5rem; transform: scaleX(-1); }
.m-leather .t { font-weight: 600; font-size: 1.25rem; letter-spacing: .05em; text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.m-leather .vol { margin-right: .4rem; background: linear-gradient(180deg, rgba(255, 255, 255, .1), transparent 40%, rgba(0, 0, 0, .3)), #1d1916; box-shadow: inset 1px 0 0 rgba(217, 185, 111, .8), inset -1px 0 0 rgba(217, 185, 111, .8); font-weight: 600; }

/* Toile teinte : trame, bande lamba au pied, filet au sommet, titre imprime. */
.m-cloth .spine { padding: 0 1.6rem 0 3.2rem; background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .1) 0 1px, transparent 1px 2px),
    linear-gradient(180deg, rgba(0, 0, 0, .32), rgba(255, 255, 255, .08) 30%, transparent 55%, rgba(0, 0, 0, .34)),
    var(--fine); }
.m-cloth .spine::before { left: 1rem; width: 1.6rem; background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 2px),
    linear-gradient(180deg, rgba(0, 0, 0, .3), transparent 35%, transparent 60%, rgba(0, 0, 0, .3)),
    linear-gradient(90deg, var(--s1) 0 .3rem, #e6d8b8 .3rem .4rem, var(--s2) .4rem .7rem, #e6d8b8 .7rem .8rem, var(--s1) .8rem 1.1rem, #e6d8b8 1.1rem 1.2rem, var(--s2) 1.2rem 1.4rem, #e6d8b8 1.4rem 1.5rem, var(--s1) 1.5rem 1.6rem); }
.m-cloth .spine::after { right: .8rem; width: .5rem; background: linear-gradient(90deg, var(--s1) 0 .2rem, #e6d8b8 .2rem .3rem, var(--s1) .3rem .5rem); opacity: .9; }
.m-cloth .t { font-style: italic; opacity: .92; }
.m-cloth .vol { margin-right: .4rem; font-variant: small-caps; opacity: .92; }

/* Cartonnage : dos plat, aretes nettes, etiquette papier collee pres de la tete. */
.m-board .spine { padding: 0 1.2rem 0 1rem; background-image:
    linear-gradient(90deg, rgba(255, 240, 220, .16), transparent 3px, transparent calc(100% - 3px), rgba(255, 240, 220, .16)),
    linear-gradient(180deg, rgba(0, 0, 0, .45) 0 1.5px, rgba(255, 255, 255, .12) 1.5px 3px, transparent 3px calc(100% - 3px), rgba(0, 0, 0, .35) calc(100% - 3px)),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .1)),
    var(--fine); }
.m-board .t, .m-board .vol { align-self: stretch; margin: .5rem 0; display: flex; align-items: center; justify-content: center; color: #2a241e; font: 400 1.2rem/1 'Courier Prime', 'Courier New', monospace;
  background: linear-gradient(90deg, rgba(150, 110, 50, .12), transparent 30%, transparent 70%, rgba(150, 110, 50, .14)), #ebe3cf var(--paper);
  box-shadow: inset 0 0 0 2px #ebe3cf, inset 0 0 0 2.6px rgba(70, 50, 30, .45), 0 1px 1px rgba(0, 0, 0, .3); }
.m-board .t { flex: 0 1 auto; margin-left: auto; padding: 0 .8rem; display: block; line-height: calc(var(--w) * .1rem - 1rem); }
.m-board .vol { width: 2.2rem; font-weight: 700; font-size: 1.1rem; }

/* Kraft cousu : fibres, point avant en fil de lin le long des deux aretes du dos. */
.m-kraft .spine { padding: 0 1.2rem; color: rgba(38, 28, 18, .86); background-image:
    linear-gradient(90deg, rgba(255, 240, 210, .18), transparent 3px, transparent calc(100% - 3px), rgba(255, 240, 210, .18)),
    linear-gradient(180deg, rgba(0, 0, 0, .25) 0, rgba(255, 245, 225, .14) 18%, transparent 40%, rgba(0, 0, 0, .05) 80%, rgba(0, 0, 0, .3)),
    var(--fiber); }
.m-kraft .spine::before, .m-kraft .spine::after { left: .5rem; right: .5rem; top: .35rem; bottom: auto; height: 2px; background: repeating-linear-gradient(90deg, #f1e6cc 0 .5rem, transparent .5rem .85rem); box-shadow: 0 1px 0 rgba(60, 40, 20, .25); border-radius: 1px; }
.m-kraft .spine::after { top: auto; bottom: .35rem; }
.m-kraft .t { font: 700 1.25rem/1 'Courier Prime', 'Courier New', monospace; letter-spacing: .02em; text-shadow: 0 0 .5px rgba(38, 28, 18, .6); }
.m-kraft .vol { width: 2rem; margin: .55rem .5rem .55rem 0; font: 700 1.1rem/1 'Courier Prime', 'Courier New', monospace; box-shadow: inset 0 0 0 1px rgba(38, 28, 18, .55); }
html.dark .m-leather .spine { color: #f2d68e; }
html.dark .m-cloth .spine { color: #fff4de; }

/* Pupitre en bambou, vu strictement de face : deux pieds, traverse haute (appui du livre), rebord avant, traverse basse. */
.desk { position: relative; flex: none; width: 26.8rem; }
.lectern { position: relative; isolation: isolate; height: 41rem; }
.leg { position: absolute; z-index: 1; bottom: 0; height: 37rem; width: 2.4rem; border-radius: .4rem .4rem .2rem .2rem; filter: drop-shadow(calc(var(--sx) * .6rem) .5rem .6rem rgba(40, 24, 8, calc(var(--drop) * .7))); }
.leg.l { left: 2rem; }
.leg.r { right: 2rem; }
.leg::before { content: ''; position: absolute; left: 0; right: 0; top: -.3rem; height: .8rem; border-radius: 50%; background: radial-gradient(ellipse 50% 50% at 50% 55%, #2a1c0e 0 52%, #6d4d27 66%, transparent 70%), linear-gradient(180deg, #f0dcac, #b48d55); }
.xbar, .ledge { position: absolute; z-index: 2; border-radius: .9rem / 1rem; filter: drop-shadow(calc(var(--sx) * .3rem) .4rem .4rem rgba(40, 24, 8, calc(var(--drop) * .7))); }
.xbar.hi { left: 1.2rem; right: 1.2rem; bottom: 31rem; height: 1.8rem; }
.xbar.lo { left: 1.4rem; right: 1.4rem; bottom: 4.6rem; height: 1.6rem; }
/* Rebord avant : le pied du livre passe derriere. */
.ledge { z-index: 4; left: -.2rem; right: -.2rem; bottom: 15rem; height: 2.2rem; }
.xbar .lash, .ledge .lash { top: -.25rem; width: 2.9rem; height: calc(100% + .5rem); }
.xbar.hi .lash.l, .xbar.lo .lash.l { left: .55rem; }
.xbar.hi .lash.r, .xbar.lo .lash.r { left: auto; right: .55rem; }
.xbar.lo .lash.l { left: .35rem; }
.xbar.lo .lash.r { right: .35rem; }
.ledge .lash.l { left: 2.05rem; }
.ledge .lash.r { left: auto; right: 2.05rem; }
/* Tsihy pose au sol sous le pupitre : bord avant visible, bandes teintes, franges aux deux bouts. */
.tsihy { position: absolute; z-index: 0; left: -.8rem; right: -.8rem; bottom: -1.3rem; height: 1.9rem; border-radius: 1px;
  background:
    linear-gradient(180deg, transparent calc(100% - .35rem), rgba(60, 38, 12, .45) calc(100% - .35rem)),
    repeating-linear-gradient(90deg, rgba(60, 38, 12, .16) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(180deg, rgba(255, 246, 220, .14) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, transparent 0 5%, #3a281a 5% 6%, #8b3b27 6% 8.5%, #3a281a 8.5% 9.5%, transparent 9.5% 11%, #8b3b27 11% 12%, transparent 12% 88%, #8b3b27 88% 89%, transparent 89% 90.5%, #3a281a 90.5% 91.5%, #8b3b27 91.5% 94%, #3a281a 94% 95%, transparent 95%),
    #d4b981;
  box-shadow: 0 .3rem .4rem -.1rem rgba(30, 18, 6, .4); }
.tsihy::before, .tsihy::after { content: ''; position: absolute; top: .2rem; bottom: .3rem; width: 1rem; background: repeating-linear-gradient(180deg, #cdb178 0 .16rem, transparent .16rem .36rem); }
.tsihy::before { right: 100%; }
.tsihy::after { left: 100%; }
.desk::after { content: ''; position: absolute; z-index: -1; left: -1rem; right: -1rem; bottom: -.8rem; height: 2rem; background: radial-gradient(ellipse 50% 50% at calc(50% + var(--sx) * 2rem) 50%, rgba(30, 18, 6, calc(var(--drop) * .8)), transparent 75%); }

/* Livre debout sur le rebord, couverture face a nous, appuye sur la traverse haute. */
.book.front { position: absolute; z-index: 3; left: calc(50% - var(--h) * .04rem); bottom: 16rem; width: calc(var(--h) * .08rem); height: calc(var(--h) * .11rem); }
.book.front.on { z-index: 3; }
/* Tranche de tete des pages, a peine visible : meme leger regard d'en haut que sur les lattes des rayons. */
.book.front::before { content: ''; position: absolute; left: .25rem; right: .15rem; top: -.35rem; height: .35rem; border-radius: .1rem .1rem 0 0; background: linear-gradient(90deg, var(--c) 0 .4rem, transparent .4rem), repeating-linear-gradient(180deg, #f3ead6 0 1px, #d6c7aa 1px 2px); transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
.book.front.on::before { transform: translateY(-.5rem); }
.cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2rem; padding: 2rem 1.6rem 2.6rem 2.4rem; border-radius: .2rem .4rem .4rem .2rem; background-color: var(--c); transition: transform .28s cubic-bezier(.2, .7, .2, 1), filter .28s ease;
  box-shadow: inset .5rem 0 .6rem -.3rem rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .15), calc(var(--sx) * .6rem) .6rem 1.2rem rgba(30, 18, 6, .45); }
.book.front.on .cover { filter: brightness(1.06); transform: translateY(-.5rem); box-shadow: inset .5rem 0 .6rem -.3rem rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .15), calc(var(--sx) * .9rem) 1rem 1.6rem rgba(30, 18, 6, .55); }
.cover .ct { text-align: center; font-size: 2.4rem; line-height: 1.1; }
/* Etiquette du cartonnage en ombre portee (pas de demi-ligne dans la marge). */
.book.front.m-board .ct { padding: 0 .3rem; box-shadow: 0 0 0 .5rem #ebe3cf, 0 0 0 calc(.5rem + .6px) rgba(70, 50, 30, .45); }
.cpic { width: 100%; padding: .4rem; background: #fffefa; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.cpic[hidden] { display: none; }
.cpic img { display: block; width: 100%; height: 7rem; object-fit: contain; }
.cpic.photo img, .cpic.tall img { height: 9rem; object-fit: cover; }
.cpic.logo { padding: 1rem 1.2rem; }
.m-kraft .cover::before { content: ''; position: absolute; left: 1rem; top: .6rem; bottom: .6rem; width: 2px; background: repeating-linear-gradient(180deg, #f1e6cc 0 .5rem, transparent .5rem .85rem); }
.m-kraft .cover { color: rgba(38, 28, 18, .88); background-image: linear-gradient(180deg, rgba(255, 245, 225, .14), transparent 40%, rgba(0, 0, 0, .12)), var(--fiber); }
.m-kraft .ct { font: 700 2.4rem/1.1 'Courier Prime', 'Courier New', monospace; }
.m-leather .cover { color: #d9b96f; background-image: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent 1.4rem), var(--fine); box-shadow: inset 0 0 0 .7rem transparent, inset 0 0 0 .8rem rgba(217, 185, 111, .7); }
.m-leather .ct { font-weight: 600; letter-spacing: .04em; }
.m-cloth .cover { color: #f3ead6; background-image: linear-gradient(0deg, var(--s1) 0 .4rem, #e6d8b8 .4rem .5rem, var(--s2) .5rem 1rem, #e6d8b8 1rem 1.1rem, var(--s1) 1.1rem 1.5rem, transparent 1.5rem), repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 2px), var(--fine); }
.m-cloth .ct { font-style: italic; }
.m-board .cover { background-image: var(--fine); }
.m-board .ct { padding: .5rem .8rem; color: #2a241e; font: 400 2rem/1.15 'Courier Prime', 'Courier New', monospace; background: #ebe3cf var(--paper); box-shadow: inset 0 0 0 2px #ebe3cf, inset 0 0 0 2.6px rgba(70, 50, 30, .45); }
/* Signet en soie : sort au pied du livre et pend devant le rebord. */
.cord { position: absolute; z-index: 5; left: 34%; top: calc(100% - 1.2rem); width: .6rem; height: 5.6rem; background: linear-gradient(90deg, #7d241c, #a5392c 50%, #7d241c); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); }
/* Titre de couverture (pupitre, vue Covers) : jamais coupe. books.js (fitCover) reduit sa taille, puis l'image, jusqu'a ce que tout tienne.
   Partie secondaire du titre (apres « : », « - », ou entre parentheses finales) en sous-titre plus petit. */
:is(.book, .cov) .cover > span.ct { flex: none; display: block; overflow: visible; -webkit-line-clamp: none; overflow-wrap: normal; hyphens: auto; }
.ct small { display: block; margin-top: .45em; font-size: max(.62em, 1.1rem); font-style: italic; font-weight: 400; letter-spacing: .02em; line-height: 1.2; }

/* Objets poses sur la traverse du haut (scene.ejs), vus de face. Pied des objets a 1,7rem du haut du meuble : sur le dessus du chaume.
   Deux groupes : boussole et sobika a gauche, boite a fiches et lampe a droite ; le milieu reste libre pour le nom du rayon. */
.props { position: absolute; z-index: 4; left: calc(var(--ov) + var(--pw) + 2rem); right: calc(var(--ov) + var(--pw) + 1.4rem); bottom: calc(100% - 1.7rem); display: flex; align-items: flex-end; gap: 2.6rem; pointer-events: none; }
.props > :nth-child(2) { margin-right: auto; }
.obj { position: relative; display: block; flex: none; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; pointer-events: auto; outline: none; -webkit-tap-highlight-color: transparent; }
.art { position: relative; display: block; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.art > svg { display: block; width: 6.6rem; height: 8rem; }
.sobika svg { width: 9.2rem; height: 7.8rem; }
.box svg { width: 10.2rem; height: 6.4rem; }
.lamp svg { width: 5.2rem; height: 6.7rem; }
/* Ombre de contact sur le chaume et ombre douce sur le mur (cote oppose a la lumiere). Aucun filtre : l'objet bouge au survol. */
.obj::before, .obj::after { content: ''; position: absolute; z-index: -1; pointer-events: none; transition: opacity .25s ease; }
.obj::before { left: 6%; right: 6%; bottom: -.45rem; height: .9rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(30, 18, 6, .55), rgba(30, 18, 6, 0)); }
.obj::after { left: 10%; right: 10%; top: 25%; bottom: .3rem; translate: calc(var(--sx) * 1.3rem) .5rem; border-radius: 40%; background: radial-gradient(closest-side, rgba(40, 24, 8, calc(var(--drop) * .5)), rgba(40, 24, 8, 0)); }
.obj:hover .art, .obj:focus-visible .art { transform: translateY(-.5rem); }
.obj:hover::before, .obj:focus-visible::before { opacity: .5; }
.obj:focus-visible .art { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: .2rem; }
/* Etiquette kraft du nom de la page, pendue au chaume sous l'objet (meme dessin que les etiquettes de rayon), au survol ou au focus. */
.lbl { position: absolute; left: 50%; top: calc(100% + .2rem); translate: -50% 0; display: flex; align-items: center; height: 1.9rem; padding: 0 .9rem 0 1.9rem; white-space: nowrap; font: 700 1.1rem/1 'Courier Prime', 'Courier New', monospace; letter-spacing: .14em; text-transform: uppercase; color: #3a2b1c;
  background: radial-gradient(circle at .85rem 50%, #3b2a18 0 .2rem, #f3e6c6 .22rem .38rem, transparent .4rem), linear-gradient(180deg, rgba(255, 250, 235, .3), transparent 40%, rgba(80, 55, 25, .12)), var(--paper), #e2cfa5;
  clip-path: polygon(.6rem 0, 100% 0, 100% 100%, .6rem 100%, 0 calc(100% - .6rem), 0 .6rem); opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.obj:hover .lbl, .obj:focus-visible .lbl { opacity: 1; }
/* Lampe : libelle selon le mode (le nom accessible suit aussi, par les spans .sr). */
html.dark .to-dark, html:not(.dark) .to-light { display: none; }
/* Pendulette en palissandre (ecran large seulement) : au milieu de la traverse, centree sur le meuble (.props a 0,6rem de plus a gauche).
   Pas un lien : pas de soulevement. Cadran en papier Antemoro (classe commune, sans filtre). Aiguilles tournees par alive.css ;
   --hd et --md (angles, shelf.js) servent quand le mouvement est reduit. */
.clock { position: absolute; left: calc(50% - .3rem); bottom: 0; translate: -50% 0; cursor: default; }
.clock svg { width: 7.2rem; height: 7.6rem; }
.clock:hover .art { transform: none; }
.clock:hover::before { opacity: 1; }
.clock .dial { position: absolute; left: 1.7rem; top: 1.5rem; width: 3.8rem; height: 3.8rem; border-radius: 50%; overflow: hidden; --ant-pulp: #efe3c6; --ant-shadow: none; }
.clock .dial > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hand { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; background: #2a2119; }
.hand.h { width: .36rem; height: 1.05rem; margin-left: -.18rem; transform: rotate(var(--hd, 0deg)); clip-path: polygon(50% 0, 100% 22%, 72% 100%, 28% 100%, 0 22%); }
.hand.m { width: .26rem; height: 1.55rem; margin-left: -.13rem; transform: rotate(var(--md, 0deg)); clip-path: polygon(50% 0, 100% 16%, 70% 100%, 30% 100%, 0 16%); }
.hand.s { width: .08rem; height: 2.05rem; margin: 0 0 -.45rem -.04rem; transform-origin: 50% calc(100% - .45rem); background: #9c2f22; }
.clock .pin { position: absolute; left: 50%; top: 50%; width: .36rem; height: .36rem; margin: -.18rem; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f3dc98, #8a6a2c); }
@media not all and (min-width: 1024px) { .clock { display: none; } }
/* Page de rayon en ecran large : le fil d'Ariane descend sous les pieds de la pendulette ; l'etiquette de la pendulette passe au-dessus d'elle. */
@media (min-width: 1024px) {
  .case > .crumb { top: 1.8rem; }
  .crumb ~ .props .clock .lbl { top: auto; bottom: calc(100% + .2rem); }
}
/* Boussole : aiguille posee sur le pivot, au centre du cadran (alive.css la fait osciller). */
.needle { position: absolute; left: 3.3rem; top: 4.1rem; width: .6rem; height: 3rem; margin: -1.5rem 0 0 -.3rem; }
.needle i, .needle svg { display: block; width: 100%; height: 100%; }
/* Flamme au-dessus de la meche, lueur chaude autour (sous les objets, sur le meuble). Jour : meche eteinte. */
.flame { position: absolute; left: 2.27rem; top: -1.9rem; width: 1.4rem; height: 3rem; margin-left: -.7rem; transform-origin: 50% 100%; opacity: 0; transition: opacity .4s ease; }
.flame i { display: block; height: 100%; transform-origin: 50% 100%; }
.flame svg { display: block; width: 100%; height: 100%; }
.glow { position: absolute; z-index: -1; left: 2.27rem; bottom: 7.1rem; width: 64rem; height: 64rem; translate: -50% 50%; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.glow i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 205, 130, .26), rgba(255, 180, 100, .1) 30%, rgba(255, 170, 90, .03) 65%, rgba(255, 170, 90, 0)); }
html.dark .flame, html.dark .glow { opacity: 1; }


/* Ecran large : toute la scene tient dans main, sans defilement. Meuble et pupitre poses sur le plancher (pied commun), un peu dedans. */
@media (min-width: 1024px) {
  html.home body > main { overflow: visible; }
  .room { flex-direction: row; align-items: flex-end; justify-content: center; gap: 2.2rem; padding: 0; }
  .room > .case, .room > .desk { margin-bottom: -.6rem; }
  .case { width: 94.2rem; }
  .desk { order: 2; }
}

/* Sous 1024 px, le pupitre est au-dessus du meuble : place pour les objets entre les deux. */
@media not all and (min-width: 1024px) { .case { margin-top: 5.6rem; } }

/* Mobile : chaque rayon devient une pile de livres couches. */
@media not all and (min-width: 720px) {
  .room { padding: 1rem 1.6rem 3rem; }
  .case { width: 100%; --ov: .4rem; --pw: 1.6rem; padding: .8rem 0 1.8rem; }
  .back { top: 1.6rem; bottom: 3.2rem; }
  .level { height: auto; }
  .post { display: none; }
  .row { flex-direction: column-reverse; align-items: stretch; gap: 0; padding: 2.8rem 0 0; }
  .row > li, .row > .set { flex-direction: column-reverse; align-items: flex-start; gap: 0; }
  .row > .end, .gap { display: none; }
  .m-board .t { line-height: calc(var(--mh) * .1rem - 1rem); }
  .spine { font-size: 1.3rem; }
  .m-leather .t { font-size: 1.25rem; }
  .m-board .t, .m-kraft .t { font-size: 1.2rem; }
  .book { width: calc(var(--len) * 1%); height: calc(var(--mh) * .1rem); margin-left: calc(var(--ml) * .1rem); }
  .lift { box-shadow: 0 2px 3px -1px rgba(0, 0, 0, .5); transform-origin: 0 50%; }
  .lift::after { display: none; }
  .on .lift { transform: translateX(1.2rem); box-shadow: 0 .5rem .8rem -.3rem rgba(0, 0, 0, .6); }
  .v { width: 100%; height: 100%; transform: none; }
  .vol b { transform: none; }
  .pages { display: none; }
  .shelf h2 { left: .8rem; }
  .kraft { height: 2.4rem; font-size: 1.3rem; }
  .slot { width: 100%; padding: .8rem 0 1rem; }
  .card, .card.show { position: relative; width: auto; transition: none; }
  .desk { zoom: .74; }
  /* Objets en rangee compacte sur la traverse du haut, au-dessus des piles. */
  .case { margin-top: 3.4rem; }
  .props { zoom: .76; left: 2.6rem; right: 2.6rem; bottom: calc(100% - 1.4rem); gap: 1.4rem; }
  /* Pas de lueur locale (elle deborderait de l'ecran) : la lumiere du soir reste celle de la piece. */
  .glow { display: none; }
}