/* OSONS library: shelf of volumes + page-turning reader (French left, English right). Uses the site tokens of styles.css. */
.lib-page{--lib-page:#fffdf9;--lib-shadow:color-mix(in srgb,var(--ink) 24%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lib-page{--lib-page:#211b40;--lib-shadow:rgba(0,0,0,.55)}}
:root[data-theme="dark"] .lib-page{--lib-page:#211b40;--lib-shadow:rgba(0,0,0,.55)}
.lib-wrap{padding-top:clamp(28px,5vw,56px);padding-bottom:64px}
.lib-wrap > section{padding:0;margin:0}
.lib-head{margin-bottom:26px}
.lib-head h1{font-size:clamp(40px,6vw,72px);max-width:14ch;margin:0 0 12px}
.lib-head .lead{max-width:52ch}
.shelf-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:8px 0 6px}
.shelf-h h2{font-size:clamp(22px,2.4vw,28px)}
.shelf-h p{margin:0;color:var(--muted);font-size:14px}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:22px;padding:18px 0 28px;position:relative}
.shelf::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:12px;border-radius:4px;background:var(--bark);opacity:.5}
.vol{display:flex;flex-direction:column;gap:12px;min-width:0}
.spine{position:relative;aspect-ratio:2/3;max-width:100%;border-radius:4px 14px 14px 4px;padding:20px 18px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
  box-shadow:inset 10px 0 14px -10px rgba(0,0,0,.45),6px 8px 18px -8px var(--lib-shadow);transition:transform .25s}
.vol.ready .spine{background:var(--deep);color:#fff;cursor:pointer}
.vol.ready .spine:hover{transform:translateY(-4px) rotate(-1deg)}
.vol.soon .spine{background:repeating-linear-gradient(135deg,var(--card) 0 12px,var(--paper-2) 12px 24px);color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line)}
.spine .s-series{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.spine .s-title{font:500 23px/1.12 var(--display);margin:0 0 6px;text-wrap:balance}
.spine .s-author{font-size:13px;font-weight:600;opacity:.85;margin:0}
.spine svg{width:62%;margin:0 auto;height:auto}
.vol-meta{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.vol-meta .btn-primary{width:100%}
.vol-meta .tag{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.04em}
.buy{display:flex;gap:8px;flex-wrap:wrap}
.buy .btn[disabled]{opacity:.7;cursor:not-allowed}
.buy small{font-weight:600;color:var(--muted)}
.vol-meta .note{font-size:12.5px;color:var(--muted);margin:0}

.reader{margin-top:28px;scroll-margin-top:96px}
.reader-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.reader-h h2{font-size:clamp(20px,2.2vw,26px)}
.ml{display:none;border-radius:999px;padding:3px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.ml button{border:0;background:none;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:700;color:var(--muted)}
.ml button[aria-pressed="true"]{background:var(--forest);color:var(--paper)}
.viewport{position:relative;perspective:2800px;padding:6px 0 26px;overflow-x:clip;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.viewport:focus{outline:none}
.viewport:focus-visible{outline:2px solid color-mix(in srgb,var(--forest) 45%,transparent);outline-offset:6px;border-radius:18px}
.viewport::after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:40px;background:radial-gradient(ellipse at center,var(--lib-shadow),transparent 70%);pointer-events:none;z-index:-1}
.book{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:1080px;margin:0 auto;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.2,1);cursor:pointer;touch-action:pan-y}
.book[data-k="0"]{transform:translateX(-25%)}
.book[data-k="last"]{transform:translateX(25%)}
.leaf{grid-area:1/2;display:grid;position:relative;transform-origin:left center;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.45,.05,.2,1)}
.leaf.flipped{transform:rotateY(-180deg)}
.leaf.turning{z-index:200!important}
.face{grid-area:1/1;position:relative;min-width:0;display:flex;flex-direction:column;background:var(--lib-page);padding:34px 38px 54px;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:3px 14px 14px 3px;
  box-shadow:inset 18px 0 22px -18px var(--lib-shadow),1px 1px 0 var(--line),3px 3px 0 var(--lib-page),4px 4px 0 var(--line),12px 14px 34px -12px var(--lib-shadow)}
.face.back{transform:rotateY(180deg);border-radius:14px 3px 3px 14px;box-shadow:inset -18px 0 22px -18px var(--lib-shadow),-1px 1px 0 var(--line),-3px 3px 0 var(--lib-page),-4px 4px 0 var(--line),-12px 14px 34px -12px var(--lib-shadow)}
.face .run{display:flex;justify-content:space-between;gap:10px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:9px;margin:0 0 18px}
.face .lang-chip{color:var(--forest)}
.face .part{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--lime-deep);margin:0 0 6px}
.face .chap{display:flex;align-items:baseline;gap:10px;margin:0 0 10px}
.face .chap b{font:italic 400 30px/1 var(--display);color:var(--forest)}
.face .chap h3{font-size:clamp(20px,1.9vw,25px);line-height:1.15;text-wrap:balance}
.face .art{display:flex;justify-content:center;margin:2px 0 10px}
.face .art svg{width:min(210px,62%);height:auto;overflow:visible}
.face p.t{margin:0 0 10px;font:400 16px/1.62 var(--display);color:var(--ink);hyphens:auto}
.face p.t.q{font-style:italic;color:var(--ink-soft);padding-left:12px;border-left:2px solid var(--forest)}
.face p.t.todo{font:600 13.5px/1.5 var(--ui);color:var(--lime-ink);border:1.5px dashed var(--lime-deep);border-radius:10px;padding:8px 10px}
.face .kid{margin:auto 0 0;padding:10px 12px;border-radius:12px;background:var(--lavender);font-size:13.5px;line-height:1.45;color:var(--ink)}
.face .kid span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--forest);margin-bottom:2px}
.face .folio{position:absolute;bottom:18px;font:italic 400 14px var(--display);color:var(--muted)}
.face.front .folio{right:38px}.face.back .folio{left:38px}
.face.cover,.face.backcover{background:var(--deep);color:#fff;align-items:center;justify-content:center;text-align:center;gap:10px}
.face.cover{border-radius:5px 18px 18px 5px}.face.backcover{border-radius:18px 5px 5px 18px}
.cover p{margin:0}
.cover .c-series{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#d9d3ff}
.cover .c-title{font-size:clamp(30px,3.4vw,46px);line-height:1.05;margin:4px 0 0;color:#fff;text-wrap:balance}
.cover .c-title2{font:italic 400 clamp(18px,1.8vw,22px)/1.3 var(--display);color:#e6e1ff}
.cover .c-sub{font-size:13.5px;line-height:1.5;color:#e6e1ff;max-width:34ch;margin-top:6px}
.cover svg{width:min(230px,62%);height:auto;margin:10px 0}
.cover .c-author{font-size:15px;font-weight:700;letter-spacing:.06em}
.cover .c-ed{font-size:12px;color:#d9d3ff}
.cover .c-hint{margin-top:12px;font-size:12.5px;font-weight:700;color:var(--lime);animation:libHint 2.4s ease-in-out infinite}
@keyframes libHint{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.backcover p{color:#e6e1ff;max-width:42ch;margin:0;font:400 15.5px/1.6 var(--display)}
.backcover .b-rule{width:44px;height:2px;background:var(--lime);margin:4px auto}
.backcover .b-free{font:600 13px var(--ui);color:var(--lime)}
.backcover button{border:0;border-radius:999px;padding:9px 16px;background:rgba(255,255,255,.14);color:#fff;font-size:13px;font-weight:650;margin-top:8px}
.lib-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:6px}
.lib-nav button{width:46px;height:46px;border-radius:50%;border:0;background:var(--card);color:var(--forest);font-size:18px;box-shadow:inset 0 0 0 1.5px var(--line)}
.lib-nav button:disabled{opacity:.35;cursor:default}
.lib-nav .count{margin:0;min-width:11ch;text-align:center;font-size:14px;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums}
.guard{margin:10px auto 0;text-align:center;font-size:12.5px;color:var(--muted);max-width:60ch}

.a-ink{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.a-soft{fill:none;stroke:var(--muted);stroke-width:1.2;stroke-dasharray:2 5;stroke-linecap:round}
.a-leaf{fill:var(--leaf)}.a-bark{fill:var(--bark)}.a-seed{fill:var(--forest)}.a-fruit{fill:var(--lime-deep)}.a-sun{fill:var(--lime)}
.a-root{fill:none;stroke:var(--forest);stroke-width:2;stroke-linecap:round}
.a-sprout{fill:none;stroke:var(--leaf);stroke-width:2.2;stroke-linecap:round}
.a-tint{fill:var(--lavender)}
.a-paper{fill:var(--lib-page);stroke:var(--ink);stroke-width:1.6}
.a-big{font:500 34px var(--display);fill:var(--forest)}
.a-txt{font:600 10px var(--ui);fill:var(--muted);letter-spacing:.08em}
.cover .a-ink,.spine .a-ink{stroke:#fff}.cover .a-root,.spine .a-root{stroke:#b6a8ff}.cover .a-tint,.spine .a-tint{fill:rgba(255,255,255,.1)}

@media (max-width:780px){
  .ml{display:flex}
  .viewport{overflow:hidden;perspective:1800px;padding-bottom:14px}
  .book{width:200%;max-width:none;transform:translateX(-50%)}
  .book[data-side="left"]{transform:translateX(0)}
  .book[data-k="0"]{transform:translateX(-50%)}
  .book[data-k="last"]{transform:translateX(0)}
  .face{padding:26px 20px 50px}
  .face.front .folio{right:20px}.face.back .folio{left:20px}
}
@media (prefers-reduced-motion:reduce){.book,.leaf,.spine{transition:none}.cover .c-hint{animation:none}}
@media print{.lib-page *{visibility:hidden!important}.lib-page::after{content:"Lecture en ligne seulement · Online reading only";visibility:visible;display:block;padding:40px;font:600 20px sans-serif}}