:root{--brand:#0187A0;--brand-light:#27b2c5;--ink:#09151e;--paper:#f5f3ed;--page-w:486px;--page-h:687px;--text:#e9f0f3;--muted:#8d9ca4;--desktop-h:100dvh}
*,*:before,*:after{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:#07121b;color:var(--text)}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,a{font:inherit;touch-action:manipulation}
button{cursor:pointer}
a{color:inherit}
button:focus-visible,a:focus-visible{outline:2px solid #7de4f4;outline-offset:3px}
.app-shell{position:relative;display:flex;flex-direction:column;min-height:100svh;height:100dvh;overflow:hidden;background:radial-gradient(ellipse 47% 42% at 50% 43%,#133344 0%,#0a1a26 58%,#07121b 100%)}
.topbar{height:76px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,3.5vw,56px);border-bottom:1px solid rgba(233,240,243,.08);background:rgba(5,15,24,.62);position:relative;z-index:3}
.brand-wrap{display:flex;flex-direction:column;gap:3px}
.brand{font-size:clamp(19px,2.2vw,26px);font-weight:850;white-space:nowrap;line-height:1;letter-spacing:-.075em;color:#f3f0e9}
.brand span{color:var(--brand-light)}
.brand-sub{font-size:8px;color:#8fa2aa;letter-spacing:.22em;font-weight:750}
.issue-wrap{display:flex;gap:18px;align-items:center;font-size:10px;letter-spacing:.15em;font-weight:780;color:#a9b9c1;white-space:nowrap}
.edition{color:#d9e4e7}
.edition-mark{height:18px;width:3px;border-radius:9px;background:var(--brand);box-shadow:0 0 12px rgba(1,135,160,.52)}
.issue-separator{width:1px;height:16px;background:#33454d}
.issue-date{font-weight:600;letter-spacing:.09em;color:#748d98}
.reader{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:8px 8px 0}
.reader-glow{position:absolute;inset:10% 4% 0;pointer-events:none;background:radial-gradient(ellipse 41% 44% at 50% 43%,rgba(1,135,160,.13),transparent 76%)}
.stage{width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;perspective:2600px;perspective-origin:50% 42%;position:relative;isolation:isolate;overflow:hidden;touch-action:none;overscroll-behavior:contain;user-select:none;-webkit-user-select:none;cursor:auto}
.spread-book{position:relative;transform-style:preserve-3d;width:calc(var(--page-w)*2);height:var(--page-h);flex-shrink:0;transform:translateX(calc(-1 * var(--page-w) / 2));transition:transform 790ms cubic-bezier(.36,.08,.21,.99);filter:drop-shadow(1px 23px 26px rgba(0,0,0,.38));will-change:transform}
.spread-book.is-open{transform:translateX(0)}
.book-paper{background:var(--paper);box-shadow:0 0 1px rgba(15,24,28,.2);user-select:none;-webkit-user-select:none}
.book-paper img,.mobile-book>img{width:100%;height:100%;display:block;object-fit:fill;pointer-events:none}
.right-paper{position:absolute;left:var(--page-w);top:0;width:var(--page-w);height:var(--page-h);overflow:hidden;z-index:0;backface-visibility:hidden}
.right-paper .paper-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(12,23,29,.17),transparent 8%);opacity:0;transition:opacity 650ms}
.spread-book.is-open .right-paper .paper-shade{opacity:1}
.turning-leaf{position:absolute;left:var(--page-w);top:0;width:var(--page-w);height:var(--page-h);transform-origin:0 50%;transform-style:preserve-3d;z-index:4;transform:rotateY(0);transition:transform 790ms cubic-bezier(.45,.02,.2,.99);will-change:transform}
.spread-book.is-open .turning-leaf{transform:rotateY(-180deg)}
.paper-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;border-radius:1.5px}
.front-face{transform:rotateY(0deg)}
.back-face{transform:rotateY(180deg)}
.leaf-highlight{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.21),rgba(255,255,255,.13) 20%,transparent 58%);opacity:0;transition:opacity 550ms}
.spread-book.is-open .leaf-highlight{opacity:.42}
.center-shadow{position:absolute;z-index:9;pointer-events:none;left:calc(var(--page-w) - 6px);top:0;width:12px;height:100%;background:linear-gradient(90deg,transparent,rgba(0,0,0,.16) 49%,rgba(255,255,255,.15) 51%,transparent);opacity:0;transition:opacity 650ms}
.spread-book.is-open .center-shadow{opacity:1}
.paper-face::after{position:absolute;inset:0;content:"";box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);pointer-events:none}
.pdf-hotspots{position:absolute;inset:0;pointer-events:none}
.pdf-hotspots a{position:absolute;display:block;pointer-events:auto;border-radius:3px;cursor:pointer;transition:background .15s}
.pdf-hotspots a:focus-visible{outline:2px solid var(--brand);background:rgba(1,135,160,.18)}
.pdf-hotspots a:hover{background:rgba(1,135,160,.1)}
.cover-targets{position:absolute;left:0;bottom:0;right:0;height:11.8%;display:grid;grid-template-columns:repeat(3,1fr);pointer-events:none}
.cover-target{background:none;border:0;pointer-events:auto;opacity:0}
.cover-target:focus-visible{opacity:1;outline:2px solid #17d3f5;outline-offset:-2px}
.mobile-book{display:none;position:relative;width:var(--page-w);height:var(--page-h);background:#f5f3ed;overflow:visible;box-shadow:0 23px 42px rgba(0,0,0,.55);touch-action:pan-y;perspective:1400px;user-select:none;-webkit-user-select:none}
.mobile-book>img{position:absolute;inset:0}
.mobile-turn{position:absolute;inset:0;z-index:10;transform-style:preserve-3d;transform-origin:left center;overflow:hidden;background:var(--paper);box-shadow:6px 4px 12px rgba(0,0,0,.3);backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:none}
.mobile-turn img{width:100%;height:100%;object-fit:fill;display:block}
.mobile-turn::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 70%);pointer-events:none}
.mobile-turn.forward{animation:mobile-forward 590ms cubic-bezier(.46,.05,.24,.97) both}
.mobile-turn.reverse{animation:mobile-reverse 590ms cubic-bezier(.46,.05,.24,.97) both}
@keyframes mobile-forward{0%{transform:rotateY(0deg);opacity:1}100%{transform:rotateY(-100deg);opacity:.8}}
@keyframes mobile-reverse{0%{transform:rotateY(-100deg);opacity:.8}100%{transform:rotateY(0deg);opacity:1}}
.gesture-hint{height:25px;flex:0 0 auto;margin:0;color:#79919c;font-size:9px;letter-spacing:.1em;display:flex;align-items:center;gap:13px;white-space:nowrap}
.hint-line{display:block;width:26px;height:1px;background:#2a4650}
.toolbar{position:relative;z-index:3;flex-shrink:0;min-height:82px;padding:0 clamp(16px,3.5vw,52px);background:rgba(5,14,21,.9);border-top:1px solid rgba(210,233,242,.1);display:grid;grid-template-columns:minmax(230px,1fr) auto minmax(230px,1fr);gap:15px;align-items:center}
.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:8px}
.toolbar-right{justify-content:flex-end}
button,.pdf-button{transition:border-color .2s,background .2s,opacity .2s,transform .2s}
.tool-secondary{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid transparent;color:#b3c3ca;padding:10px;border-radius:8px;font-size:11px;letter-spacing:.015em;font-weight:650}
.tool-secondary:hover{background:#102630;border-color:#254653;color:#e6f1f5}
.tool-secondary svg,.pdf-button svg,.nav-circle svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px;flex-shrink:0}
.page-controls{display:flex;align-items:center;justify-content:center;gap:19px}
.nav-circle{width:42px;height:42px;border:1px solid #28434d;background:#11242d;display:grid;place-items:center;color:#ebf0f1;border-radius:50%}
.nav-circle:hover:enabled{background:#20404c;transform:translateY(-1px)}
.nav-circle:disabled{opacity:.25;cursor:default}
.nav-primary{border-color:var(--brand);background:var(--brand);color:white}
.nav-primary:hover:enabled{background:#1496af}
.page-count{text-align:center;min-width:112px;display:flex;flex-direction:column;gap:4px}
.page-count span{font-size:14px;color:#ecf5f5;font-weight:780;letter-spacing:.07em}
.page-count small{font-size:9px;color:#78909a;letter-spacing:.13em;font-weight:720}
.pdf-button{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:#fff;background:#076e81;padding:12px 15px;border:1px solid #1f8b9f;border-radius:9px;font-size:12px;font-weight:800;letter-spacing:.03em}
.pdf-button:hover{background:#098aa1}
.bottom-line{height:2px;background:#102b34;flex:0 0 auto}
.bottom-line span{display:block;background:#1cb3c6;height:2px;width:33%;transition:width 500ms}
.overlay-dialog{border:1px solid rgba(194,223,228,.15);border-radius:18px;padding:0;background:#0b1b25;color:#e9f2f4;box-shadow:0 30px 100px #000b;max-width:calc(100vw - 24px)}
.overlay-dialog::backdrop{background:rgba(0,10,16,.86);backdrop-filter:blur(8px)}
.dialog-top{padding:23px 26px 18px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid #29404a}
.dialog-top h2{margin:5px 0 0;font-size:26px;letter-spacing:-.05em;font-weight:750}
.dialog-eyebrow{color:#3cc0d0;font-weight:800;letter-spacing:.16em;font-size:10px}
.close-button{border:1px solid #314b55;color:#f0f7f7;background:#172b35;width:35px;height:35px;border-radius:50%;font-size:27px;line-height:1}
.close-button:hover{background:#2a4650}
.toc-dialog{width:min(720px,96vw)}
.toc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:22px 27px 30px}
.toc-item{background:transparent;border:1px solid #2a424d;border-radius:11px;padding:8px;display:flex;flex-direction:column;gap:11px;text-align:left;color:inherit;min-width:0}
.toc-item:hover,.toc-item:focus-visible{border-color:#1baac0;background:#102934}
.toc-item img{width:100%;height:auto;aspect-ratio:210/297;object-fit:contain;border-radius:3px;box-shadow:0 4px 13px #0005}
.toc-item span{font-size:11px;font-weight:650;padding:0 3px 5px;line-height:1.3}
.toc-item b{font-size:9px;color:#55cbdc;letter-spacing:.12em;display:block;margin-bottom:3px}
@media(max-width:840px){
  .topbar{height:68px;padding-inline:20px}
  .issue-date{display:none}
  .toolbar{min-height:76px;grid-template-columns:1fr auto 1fr;padding-inline:12px;gap:6px}
  .tool-secondary{padding:7px}
  .tool-secondary span{display:none}
  .toolbar-left,.toolbar-right{gap:1px}
  .pdf-button{padding:11px 12px}
}
@media(max-width:700px){
  .topbar{height:63px;padding-inline:17px}
  .brand{font-size:21px}
  .brand-sub{font-size:7px;letter-spacing:.17em}
  .issue-wrap{gap:9px;font-size:9px}
  .issue-separator,.issue-number{display:none}
  .reader{padding:8px 5px 0}
  .spread-book{display:none}
  .mobile-book{display:block}
  .gesture-hint{height:26px;font-size:8px;letter-spacing:.01em}
  .hint-line{width:10px}
  .toolbar{min-height:75px;grid-template-columns:1fr auto 1fr;padding-inline:10px;gap:2px}
  .page-controls{gap:7px}
  .page-count{min-width:74px}
  .page-count span{font-size:12px}
  .page-count small{font-size:7px}
  .nav-circle{width:37px;height:37px}
  .toolbar-right .tool-secondary{display:none}
  .pdf-button span{font-size:11px}
  .toc-grid{gap:10px;padding:15px}
  .toc-item{gap:7px;padding:5px}
  .toc-item span{font-size:9px}
  .dialog-top{padding:16px}
  .dialog-top h2{font-size:21px}
}
@media(max-width:360px){.toolbar-left .tool-secondary{padding:3px}.toolbar-left .tool-secondary:nth-child(2){display:inline-flex}.toolbar-left,.toolbar-right{gap:0}.page-controls{gap:3px}.page-count{min-width:68px}.pdf-button span{display:none}.edition-mark{display:none}}
@media(prefers-reduced-motion:reduce){.spread-book,.turning-leaf,.bottom-line span,.right-paper .paper-shade,.center-shadow{transition:none!important}.mobile-turn{animation-duration:.01ms!important}}

/* V3 — zoom directement dans le magazine, sans second lecteur modal. */
.zoom-surface{width:calc(var(--page-w) * 2);height:var(--page-h);flex:0 0 auto;position:relative;transform-origin:center center;transform-style:preserve-3d;will-change:transform}
.stage.is-zoomed{cursor:grab}
.stage.is-panning{cursor:grabbing}
.stage.is-zoomed .zoom-surface{transition:none}
.stage.is-zoomed .cover-targets,.stage.is-zoomed .cover-target{pointer-events:none}
.inline-zoom{display:flex;align-items:center;gap:3px;border:1px solid #28434d;background:#0d2530;border-radius:9px;padding:3px 5px;flex:0 0 auto}
.inline-zoom button{min-width:28px;height:30px;padding:0;border:0;background:transparent;color:#eaf5f7;border-radius:6px;font-size:19px;font-weight:650;line-height:1}
.inline-zoom button:enabled:hover{background:#20414d}
.inline-zoom button:disabled{opacity:.3;cursor:default}
.inline-zoom output{width:45px;text-align:center;color:#bad9e0;font-size:10px;letter-spacing:.02em;white-space:nowrap;tab-size:2;font-variant-numeric:tabular-nums}
.stage.is-zoomed .mobile-book{touch-action:none}
@media(max-width:700px){
  .zoom-surface{width:var(--page-w)}
  .inline-zoom{gap:1px;padding:2px}
  .inline-zoom button{min-width:25px;height:28px}
  .inline-zoom output{width:38px;font-size:9px}
}
@media(max-width:360px){
  .inline-zoom output{width:32px;font-size:8px}
  .inline-zoom button{min-width:22px}
  .toolbar-left{gap:2px}
}