:root{color-scheme:dark;--bg:#080b09;--ink:#f1f3ee;--muted:#b2bcb4;--green:#77bd41;--line:#ffffff18}*{box-sizing:border-box}body{margin:0;color:var(--ink);font:18px/1.55 'Segoe UI',Arial,sans-serif;background:radial-gradient(ellipse at 50% 20%,#23342255,transparent 65%),var(--bg)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:disabled{opacity:.2;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid var(--green);outline-offset:5px}[hidden]{display:none!important}.app{max-width:1420px;margin:auto;padding:0 42px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;height:100px}.brand img{width:118px;height:76px;object-fit:contain;display:block}.intro{color:#b4c1b6;font-size:17px;font-weight:300;letter-spacing:.2px}.outline-button{font-size:16px;border:1px solid #ffffff24;border-radius:30px;background:#ffffff03;padding:10px 20px;display:flex;align-items:center;gap:12px}.outline-button:hover{background:#77bd4112;border-color:#77bd4177}.menu-icon{display:inline-flex;flex-direction:column;gap:5px}.menu-icon i{width:15px;height:1px;background:#b6cfab;display:block}.menu-icon i:last-child{width:10px}.book-area{perspective:2100px;padding-top:18px;position:relative}.book{position:relative;isolation:isolate;max-width:1240px;margin:auto;border-radius:22px;box-shadow:0 35px 95px #0009;perspective:2000px;background:#101810;outline:none}.book:before,.book:after{content:'';position:absolute;inset:8px 5px -7px;border:1px solid #4d5946;border-radius:20px;background:#162017;z-index:-1}.book:after{inset:13px 11px -12px;background:#0f170f;border-color:#35442d;z-index:-2}.spread{display:grid;grid-template-columns:1fr 1fr;min-height:530px;height:min(64vh,680px);border:1px solid #ffffff1c;border-radius:22px;overflow:hidden;position:relative;background:#151c16}.photo-page{min-width:0;position:relative;background:#1b241c;overflow:hidden}.photo{width:100%;height:100%;background-position:center;background-size:cover;background-repeat:no-repeat;position:relative}.photo.sprite{background-image:url('assets/photos-hd-officiel.png');background-size:300% 200%;background-position:var(--x) var(--y);width:100%;height:auto;aspect-ratio:2/3;max-height:100%;margin:auto}.photo-page.document{display:flex;justify-content:center;align-items:center;background:linear-gradient(145deg,#252d25,#111911);padding:24px}.photo-page.document .photo{width:auto;height:100%;aspect-ratio:2/3;max-width:100%;flex-shrink:0;box-shadow:0 15px 45px #0008;background-size:300% 200%}.photo-page:after{content:'';position:absolute;right:0;top:0;bottom:0;width:35px;background:linear-gradient(90deg,transparent,#0005);pointer-events:none}.copy-page{position:relative;display:flex;flex-direction:column;justify-content:center;padding:54px 11%;background:radial-gradient(ellipse at 90% 10%,#20332155,transparent 70%),#151e17;box-shadow:inset 15px 0 25px -22px #000c}.page-label{font-size:17px;color:#9fd37c;margin:0 0 28px;display:flex;align-items:center;gap:14px}.page-label:before{content:'';width:28px;height:2px;background:var(--green)}h1{font-size:clamp(35px,3.7vw,59px);font-weight:400;letter-spacing:-1.7px;line-height:1.12;margin:0 0 28px;max-width:440px}.lead{font-size:clamp(18px,1.55vw,23px);line-height:1.65;font-weight:300;color:#c3cec4;max-width:430px;margin:0}.badge{font-size:18px;color:#d8e8cd;border:1px solid #77bd4138;background:#77bd4108;border-radius:30px;padding:9px 18px;align-self:flex-start;margin-top:27px}.page-number{position:absolute;bottom:24px;right:30px;font-size:16px;color:#6f846f}.zoom{position:absolute;left:18px;top:18px;border:1px solid #ffffff55;backdrop-filter:blur(8px);background:#08110bb3;border-radius:50%;height:43px;width:43px;display:grid;place-items:center;z-index:2}.zoom svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.5}.view-switch{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:3px;background:#071009e0;padding:5px;border:1px solid #ffffff33;border-radius:30px;z-index:2;white-space:nowrap}.view-switch button{font-size:16px;padding:8px 19px;border:0;background:transparent;border-radius:25px;color:#e1e9dd}.view-switch button[aria-pressed=true]{background:var(--green);color:#102008}.navigation{display:flex;justify-content:center;align-items:center;gap:40px;margin:35px auto 10px;max-width:900px}.nav-arrow{border:1px solid #77bd414d;background:#1a291bbb;border-radius:50%;height:64px;width:64px;display:grid;place-items:center;flex-shrink:0;transition:transform .2s,background .2s}.nav-arrow svg{width:27px;height:27px;stroke:var(--ink);fill:none;stroke-width:1.6}.nav-arrow:hover:not(:disabled){background:#77bd4133;transform:translateX(4px)}.nav-arrow.previous:hover:not(:disabled){transform:translateX(-4px)}.nav-arrow.next{background:var(--green);border-color:var(--green)}.nav-arrow.next svg{stroke:#13240b}.nav-arrow.next:hover{background:#91d55b}.nav-center{text-align:center;min-width:280px}.nav-line{display:flex;align-items:center;justify-content:center;gap:18px;font-size:18px}.counter{color:#81a275;font-size:16px}.page-dots{display:flex;justify-content:center;gap:6px;margin-top:14px}.page-dot{width:22px;height:18px;border:0;padding:0;background:transparent;position:relative}.page-dot:before{content:'';display:block;width:6px;height:6px;border-radius:50%;background:#40523f;margin:auto;transition:background .2s,width .2s}.page-dot[aria-current=page]:before{width:22px;background:var(--green);border-radius:5px}.bottom-line{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:18px auto 20px;max-width:1240px;color:#728871}.bottom-line button{background:none;border:0;font-size:15px;color:#9aaf96;padding:8px 0}.bottom-line button:hover{color:white}.bank{display:flex;gap:9px;align-items:center;font-size:14px;color:#71876f}.bank img{width:24px;border-radius:5px}.gesture{font-size:15px;color:#7b9177}.turn-leaf{position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d;z-index:5;pointer-events:none}.leaf-front,.leaf-back{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;background:#151e17}.leaf-front>.copy-page,.leaf-back>.copy-page,.leaf-front>.photo-page,.leaf-back>.photo-page{height:100%;width:100%}.leaf-front:after{content:'';position:absolute;inset:0;box-shadow:inset 25px 0 45px -25px #000b;background:linear-gradient(90deg,#0002,transparent 40%);pointer-events:none}.leaf-back{transform:rotateY(180deg)}.turn-leaf.forward{left:50%;transform-origin:left center;animation:turn-forward .85s cubic-bezier(.4,.05,.2,1) both}.turn-leaf.backward{left:0;transform-origin:right center;animation:turn-backward .85s cubic-bezier(.4,.05,.2,1) both}.static-page{position:absolute;top:0;width:50%;height:100%;z-index:3;pointer-events:none;overflow:hidden}.static-page.left{left:0;border-radius:22px 0 0 22px}.static-page.right{left:50%;border-radius:0 22px 22px 0}.static-page>.copy-page,.static-page>.photo-page{height:100%;width:100%}.book.turning .spread{pointer-events:none}.turn-single{position:absolute;inset:0;transform-origin:left center;z-index:5;pointer-events:none;animation:turn-mobile .65s cubic-bezier(.4,.05,.2,1) both;backface-visibility:hidden}.turn-single.backward{transform-origin:right center;animation-name:turn-mobile-back}.book.ready .copy-page>*:not(.page-number){animation:word-in .6s .1s ease both}.book.ready .copy-page .lead{animation-delay:.18s}.book.ready .copy-page .badge{animation-delay:.26s}.book:not(.ready) .copy-page>*{animation:none}.image-enter .photo{animation:photo-depth .7s ease both}@keyframes turn-forward{from{transform:rotateY(0)}to{transform:rotateY(-180deg)}}@keyframes turn-backward{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}@keyframes turn-mobile{0%{transform:rotateY(0);opacity:1}70%{opacity:.9}100%{transform:rotateY(-105deg);opacity:0}}@keyframes turn-mobile-back{0%{transform:rotateY(0);opacity:1}70%{opacity:.9}100%{transform:rotateY(105deg);opacity:0}}@keyframes word-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes photo-depth{from{opacity:.4;transform:scale(1.025)}to{opacity:1;transform:none}}dialog{border:1px solid #ffffff2b;border-radius:22px;background:#121d15;color:var(--ink);padding:36px;width:min(920px,94vw);max-height:90vh;overflow:auto}dialog::backdrop{background:#020704dd;backdrop-filter:blur(14px)}dialog h2{font-size:32px;font-weight:400;letter-spacing:-.6px;line-height:1.2;margin:5px 50px 26px 0}.close{position:absolute;right:22px;top:21px;width:40px;height:40px;border:1px solid #ffffff25;border-radius:50%;background:#1d2d20;font-size:25px;z-index:5}.contents-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.contents-item{display:flex;align-items:center;text-align:left;gap:17px;border:1px solid #ffffff18;background:#ffffff03;padding:20px;border-radius:13px;font-size:20px}.contents-item span{color:#78ac5d;font-size:17px}.contents-item:hover,.contents-item[aria-current=page]{border-color:#77bd4188;background:#77bd4111}.image-info p{font-size:18px;color:#b7c7b9;line-height:1.7}.image-info strong{color:var(--ink);font-weight:500}.lightbox{width:min(1180px,95vw);padding:18px}.large-photo{background-repeat:no-repeat;background-position:center;background-size:contain;aspect-ratio:4/3;max-height:78vh;border-radius:10px}.large-photo.sprite{background-image:url('assets/photos-hd-officiel.png');background-size:300% 200%;background-position:var(--x) var(--y);aspect-ratio:2/3;max-width:50vh;margin:auto}.lightbox p{font-size:15px;color:#92a68e;text-align:center;margin:15px 0 0}
@media(min-width:1500px){.topbar{height:120px}.book-area{padding-top:30px}.spread{height:min(67vh,730px)}.navigation{margin-top:40px}}
@media(max-width:1050px) and (min-width:801px){.app{padding:0 25px}.copy-page{padding:35px 10%}h1{font-size:38px}.lead{font-size:18px}.spread{min-height:500px}.intro{font-size:15px}}
@media(max-width:800px){.app{padding:0 17px}.topbar{height:80px;gap:12px}.brand img{width:92px;height:64px}.intro{display:none}.outline-button{font-size:15px;padding:9px 15px}.book-area{padding-top:10px;perspective:1400px}.book{border-radius:18px}.spread{display:flex;flex-direction:column;min-height:0;height:auto;border-radius:18px}.photo-page{height:clamp(230px,35svh,370px);flex-shrink:0}.photo{height:100%;background-position:center}.photo-page:after{top:auto;left:0;bottom:0;height:22px;width:100%;background:linear-gradient(transparent,#0004)}.photo-page.document{padding:14px}.photo-page.document .photo{height:100%;width:auto;max-width:100%;aspect-ratio:2/3}.copy-page{padding:25px 27px 35px;min-height:245px}.page-label{font-size:16px;margin-bottom:16px;gap:11px}.page-label:before{width:22px}h1{font-size:clamp(32px,6.5vw,42px);line-height:1.1;letter-spacing:-1.1px;margin-bottom:16px;max-width:470px}.lead{font-size:18px;line-height:1.55;max-width:550px}.badge{font-size:16px;padding:6px 14px;margin-top:18px}.page-number{display:none}.zoom{height:38px;width:38px;left:13px;top:13px}.view-switch{bottom:12px;padding:3px}.view-switch button{font-size:15px;padding:6px 16px}.navigation{gap:18px;margin:28px auto 8px}.nav-arrow{height:55px;width:55px}.nav-arrow svg{width:25px;height:25px}.nav-center{min-width:0;flex:1;max-width:280px}.nav-line{font-size:17px;gap:12px}.counter{font-size:15px}.page-dots{gap:3px;margin-top:8px}.page-dot{width:20px}.page-dot[aria-current=page]:before{width:18px}.bottom-line{margin:13px auto 16px;gap:10px}.gesture{display:none}.bank{font-size:13px;gap:7px}.bank img{width:22px}.bottom-line button{font-size:15px}dialog{padding:27px 20px;border-radius:18px}dialog h2{font-size:28px;margin-bottom:24px}.contents-grid{grid-template-columns:1fr}.contents-item{font-size:19px;padding:15px 18px}.contents-item span{font-size:16px}.large-photo{max-height:75vh}.lightbox p{font-size:14px}.image-info p{font-size:17px}.book:before{border-radius:17px}.book:after{border-radius:16px}}
@media(max-width:380px){.app{padding:0 12px}.copy-page{padding:22px 22px 29px}.lead{font-size:17px}.photo-page{height:220px}.navigation{gap:12px}.nav-arrow{height:48px;width:48px}.page-dot{width:17px}.nav-line{font-size:16px}.page-label{font-size:15px}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.photo{background-size:contain;background-color:#111a13}.photo-page{background:#111a13}
@media(max-width:800px){.photo-page{height:clamp(270px,43svh,380px)}.photo-page:not(.document) .photo{background-size:cover}.navigation{position:sticky;bottom:9px;z-index:8;background:#0c150fee;backdrop-filter:blur(16px);border:1px solid #ffffff13;border-radius:45px;padding:10px 11px;gap:14px}.nav-arrow{height:50px;width:50px}.nav-center{min-width:0}}
.comparison{position:absolute;inset:0;overflow:hidden;background:#101811;--split:50%;touch-action:pan-y}.compare-viewport{position:absolute;width:100%;aspect-ratio:4/3;top:50%;transform:translateY(-50%)}.compare-image{position:absolute;inset:0;background-size:100% 100%;background-position:center;background-repeat:no-repeat}.compare-drawing{clip-path:inset(0 calc(100% - var(--split)) 0 0)}.compare-divider{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:#dcf6cd;transform:translateX(-1px);box-shadow:0 0 15px #0007;pointer-events:none;z-index:2}.compare-divider span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:48px;width:48px;border-radius:50%;background:#77bd41;color:#122409;font-size:24px;display:flex;align-items:center;justify-content:center;letter-spacing:3px;padding-left:3px;border:2px solid #edffe4;box-shadow:0 4px 20px #0006}.compare-labels{position:absolute;left:18px;right:18px;bottom:19px;display:flex;justify-content:space-between;pointer-events:none;z-index:2}.compare-labels span{font-size:15px;padding:6px 11px;border-radius:30px;color:#edf8e8;background:#0a160de3;border:1px solid #ffffff25;backdrop-filter:blur(8px)}.compare-range{appearance:none;-webkit-appearance:none;position:absolute;inset:0;z-index:3;opacity:0;width:100%;height:100%;margin:0;cursor:ew-resize;background:transparent;touch-action:pan-y}.compare-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:44px;height:650px;background:transparent;cursor:ew-resize}.compare-range::-moz-range-thumb{width:44px;height:650px;background:transparent;border:0;cursor:ew-resize}.comparison:focus-within{outline:3px solid var(--green);outline-offset:-4px}.compare-page .zoom{z-index:4}.interaction-hint{display:flex;align-items:center;gap:12px;font-size:17px;color:#a7d789;margin-top:26px}.interaction-hint span{font-size:26px}.project-link{font-size:17px;color:#ccefb4;border-bottom:1px solid #77bd4155;padding:12px 0;display:flex;justify-content:space-between;gap:22px;margin-top:22px;align-self:flex-start}.project-link span{font-size:23px;transition:transform .2s}.project-link:hover span{transform:translateX(5px)}.copy-page.with-details{padding:34px 9%}.copy-page.with-details h1{font-size:clamp(32px,3.3vw,50px);margin-bottom:20px}.copy-page.with-details .lead{font-size:19px;line-height:1.55}.quality-controls{display:flex;gap:7px;margin-top:24px;flex-wrap:wrap}.quality-controls button{font-size:15px;padding:9px 12px;border:1px solid #ffffff22;border-radius:25px;background:none;transition:background .25s,border-color .25s}.quality-controls button[aria-pressed=true]{background:#77bd4122;border-color:#77bd4188;color:#c7efa9}.quality-note{font-size:17px;color:#aabdac;line-height:1.6;margin:18px 0 0;min-height:82px}.detail-photo .photo{transition:transform .9s cubic-bezier(.2,.8,.2,1);transform-origin:var(--focus-x,50%) var(--focus-y,50%)}.detail-photo.detail-zoomed .photo{transform:scale(1.22)}.quality-markers{position:absolute;inset:0;z-index:2;pointer-events:none}.quality-marker{position:absolute;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;border:1px solid #e7fbdf;background:#102611c9;backdrop-filter:blur(4px);font-size:25px;line-height:1;display:grid;place-items:center;pointer-events:auto;box-shadow:0 2px 15px #0005}.quality-marker[aria-pressed=true]{background:var(--green);color:#12240b;border-color:#e6ffd4}.quality-marker:after{content:'';position:absolute;inset:-6px;border:1px solid #d6fbc47a;border-radius:50%;opacity:0}.book.ready .quality-marker:after{animation:point-pulse 1.4s ease 3}.detail-zoomed .quality-marker:not([aria-pressed=true]){opacity:.25}.quality-marker:hover{opacity:1!important;background:var(--green);color:#152b0b}@keyframes point-pulse{0%{opacity:.7;transform:scale(.7)}100%{opacity:0;transform:scale(1.3)}}
@media(max-width:800px){.copy-page.with-details{padding:25px 27px 28px}.copy-page.with-details h1{font-size:34px}.copy-page.with-details .lead{font-size:18px}.quality-controls{margin-top:20px}.quality-controls button{font-size:15px;padding:9px 12px}.quality-note{font-size:17px;min-height:70px;margin-top:15px}.compare-labels{left:12px;right:12px;bottom:12px}.compare-labels span{font-size:14px;padding:5px 9px}.compare-divider span{height:44px;width:44px}.interaction-hint{font-size:16px;margin-top:19px}.quality-marker{width:33px;height:33px;font-size:23px}.project-link{font-size:16px;margin-top:16px;padding-bottom:8px}.page-dots{gap:1px}.page-dot{width:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
