@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600&display=swap');
:root{--copper:#c49a6b;--paper:#eee9df;--ink:#34372f}*{box-sizing:border-box}body{margin:0;background:#171916;color:#e7e6df;font:12px Inter,Arial,sans-serif;height:100dvh;overflow:hidden;background-image:radial-gradient(ellipse at 50% 75%,#59442b25,transparent 60%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}button:focus-visible,a:focus-visible{outline:2px solid var(--copper);outline-offset:5px}header{height:92px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff0c}header a{color:#eee9df;text-decoration:none;letter-spacing:4px;font-size:20px;font-weight:600}header a span{display:block;font-size:7px;letter-spacing:2.5px;margin-top:7px;color:#aaa99c}.date{font-size:9px;letter-spacing:2px;color:#9e9f93}.date i{color:var(--copper);margin:0 16px}header button{border:1px solid #ffffff25;padding:12px 17px;border-radius:4px;font-size:11px}main{height:calc(100dvh - 138px);display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative}.ambient{position:absolute;font:360px Georgia;opacity:.018;pointer-events:none}.eyebrow{font-size:9px;letter-spacing:3px;color:var(--copper)}#chapter{margin:18px 0 22px}.stage{display:flex;align-items:center;justify-content:center;gap:38px;width:100%;min-height:0;flex:1}.book{width:min(1000px,78vw);height:min(590px,calc(100dvh - 250px));display:flex;position:relative;perspective:2000px;filter:drop-shadow(0 28px 22px #0008);transition:width .8s}.book.covermode{width:min(460px,64vw)}.page{width:50%;height:100%;background:var(--paper);color:var(--ink);padding:30px;position:relative;display:flex;flex-direction:column;justify-content:center;border-bottom:4px solid #c4bcae}.page:first-child{border-radius:3px 0 0 3px;background:linear-gradient(90deg,var(--paper) 93%,#b7b0a2)}.page:nth-child(2){border-radius:0 3px 3px 0;background:linear-gradient(90deg,#c6beb0, var(--paper) 8%)}.covermode .page{visibility:hidden}.page img{width:100%;height:100%;object-fit:contain;min-height:0}.page .photo{min-height:0;flex:1;overflow:hidden}.page .caption{font:italic 18px 'Cormorant Garamond',Georgia;margin-top:16px}.page .folio{position:absolute;bottom:12px;font-size:8px;color:#858174;letter-spacing:1px}.page .duo{display:grid;grid-template-rows:1fr 1fr;gap:18px;min-height:0;height:100%}.page .detail{position:absolute;width:36%;height:31%;bottom:50px;right:18px;background:var(--paper);padding:7px;box-shadow:0 5px 15px #0003;transform:rotate(5deg)}.page h2{font:42px/1.05 'Cormorant Garamond',Georgia;font-weight:400;margin:25px 0}.page p{line-height:1.9;color:#77786e;font-size:11px}.page .small-label{letter-spacing:2px;font-size:8px;color:#9b7753}.cover{position:absolute;inset:0;background:linear-gradient(90deg,#0e1717,#263130 5%,#283331 80%,#1c2827);border-radius:3px 7px 7px 3px;border-right:5px solid #40504a;border-bottom:5px solid #0d1514;box-shadow:inset 9px 0 12px #0008,inset 12px 0 1px #ffffff12;transform-origin:left center;transition:transform 1.1s,opacity .7s;z-index:5;padding:22px 23px 22px 30px}.cover:after{content:'';position:absolute;inset:0;opacity:.025;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M0 0h1v4H0zM0 0h4v1H0z' fill='%23fff'/%3E%3C/svg%3E")}.cover-frame{border:1px solid #b99a6355;height:100%;padding:20px 30px;display:flex;align-items:center;flex-direction:column;position:relative}.edition{font-size:7px;letter-spacing:2px;color:#c6b18a}.cover-title{text-align:center;margin:24px 0 17px}.cover-title>span{font-size:11px;letter-spacing:5px;color:#dac9a7}h1{font:500 clamp(35px,5vh,56px)/.95 'Cormorant Garamond',Georgia;color:#ede5d2;margin:14px 0 9px}h1 em{font-weight:400;color:#c99e6e}.cover-title p{font:italic 17px 'Cormorant Garamond',Georgia;color:#c3c4b2;margin:10px 0}.cover-photo{width:100%;flex:1;min-height:60px;position:relative;overflow:hidden}.cover-photo img{width:100%;height:100%;object-fit:cover;filter:brightness(.65) saturate(.7)}.cover-photo span{position:absolute;bottom:12px;left:0;width:100%;text-align:center;letter-spacing:4px;font-size:8px;color:#fff}#open{display:flex;justify-content:space-between;align-items:center;width:100%;padding:17px 0 12px;color:#dec39c;font-size:10px}#open span{font-size:18px}.cover-bottom{font-size:5px;letter-spacing:1.5px;color:#9eaa98}.cover.opened{transform:rotateY(-110deg);opacity:0;pointer-events:none}.arrow{border:1px solid #ffffff20;border-radius:50%;width:44px;height:44px;color:#b5b1a2;font-size:21px}.arrow:hover{background:#c49a6b22;border-color:var(--copper)}.arrow:disabled{opacity:.15;cursor:default}.reader-footer{width:min(1000px,80vw);display:flex;justify-content:space-between;align-items:center;height:65px;color:#999a8c;font-size:10px}.reader-footer>span{font:italic 15px 'Cormorant Garamond',Georgia}.progress{display:flex;gap:7px}.progress button{width:5px;height:5px;border-radius:50%;background:#55574c;padding:0}.progress button.active{background:var(--copper);width:18px;border-radius:4px}#motion{font-size:10px;color:#9b9c8e}footer{height:46px;display:flex;justify-content:space-between;align-items:center;margin:0 4%;border-top:1px solid #ffffff0d;font-size:8px;color:#777b70;letter-spacing:1px}footer i{padding:0 6px}.demo{font-size:7px}.turning{position:absolute;left:50%;top:0;width:50%;height:100%;z-index:4;transform-origin:left center;backface-visibility:hidden;pointer-events:none;display:none;background:var(--paper);box-shadow:-15px 0 25px #0003}.turning .page{width:100%}.turning.animate{display:block;animation:flip .85s ease-in-out}.turning.reverse{left:0;transform-origin:right center;animation:flipback .85s ease-in-out}@keyframes flip{0%{transform:rotateY(0)}100%{transform:rotateY(-180deg)}}@keyframes flipback{0%{transform:rotateY(0)}100%{transform:rotateY(180deg)}}#gallery{height:calc(100dvh - 138px);overflow:auto;padding:42px 7%}.gallery-heading{display:flex;justify-content:space-between;align-items:center}h2{font:44px 'Cormorant Garamond',Georgia;margin:12px 0}.gallery-heading p{color:#969b8c;font-size:11px}.gallery-heading button,.gallery-tools button,dialog button{border:1px solid #ffffff25;padding:12px 17px;border-radius:3px}.gallery-tools{margin:30px 0 20px;display:flex;gap:12px;align-items:center;color:#a7aa9e}.gallery-tools>span{margin-right:auto}#downloadSelection{background:#c49a6b;color:#1c211b;border:0}#grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.tile{position:relative}.tile>button{padding:0;width:100%}.tile img{width:100%;height:210px;object-fit:cover}.tile label{position:absolute;top:10px;right:10px;background:#17191699;padding:7px;border-radius:3px}.tile input{accent-color:var(--copper)}.tile p{color:#a9ac9f;font-size:10px}dialog{background:#171916;color:#eee;border:1px solid #ffffff30;max-width:90vw;padding:25px}dialog::backdrop{background:#000d}dialog img{max-height:73dvh;max-width:80vw;object-fit:contain}dialog>div{display:flex;justify-content:space-between;gap:25px;align-items:center;margin-top:15px}#closeLight{position:absolute;right:5px;top:5px;font-size:25px;background:#171916aa;padding:2px 10px}#toast{position:fixed;bottom:65px;left:50%;transform:translateX(-50%);background:#e6ddcc;color:#222;padding:15px 25px;border-radius:5px;z-index:20;display:none;box-shadow:0 8px 30px #0006}body.reduced *{animation-duration:.01ms!important;transition-duration:.01ms!important}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}@media(max-height:760px) and (min-width:701px){.cover-title{margin:12px 0}.cover-frame{padding:14px 25px}.cover-title p{margin:5px 0}.edition{font-size:6px}.cover{padding:16px 20px 16px 25px}}@media(max-width:700px){header{height:74px;padding:0 6%}header a{font-size:16px}header a span{font-size:6px}.date{display:none}header button{padding:9px;font-size:10px}main{height:calc(100dvh - 120px - env(safe-area-inset-bottom))}#chapter{font-size:7px;letter-spacing:2px;margin:18px 0}.stage{gap:5px}.book,.book.covermode{width:79vw;height:min(590px,calc(100dvh - 250px))}.page{width:100%;padding:24px}.page:nth-child(2){display:none}.arrow{width:27px;height:35px;font-size:16px;border:0}.cover{padding:18px 17px 18px 23px}.cover-frame{padding:17px 22px}.cover-title{margin:25px 0 20px}h1{font-size:48px}.cover-title>span{font-size:9px}.cover-photo{min-height:40px}.edition{font-size:6px}.reader-footer{width:80vw;height:60px;flex-wrap:wrap;justify-content:center;gap:10px;padding-top:15px}.reader-footer>span{width:100%;text-align:center;font-size:13px}#motion{position:absolute;right:12px;bottom:19px}#motion span{display:none}footer{font-size:7px;height:46px;padding-bottom:env(safe-area-inset-bottom)}footer>span:nth-child(2){display:none}.demo{font-size:6px}.turning,.turning.reverse{left:0;width:100%;transform-origin:left center}.page h2{font-size:35px}#gallery{height:calc(100dvh - 120px);padding:25px 6%}.gallery-heading{display:block}.gallery-heading h2{font-size:34px}.gallery-heading button{margin-top:15px}.gallery-tools{flex-wrap:wrap;font-size:9px}.gallery-tools>span{width:100%}.gallery-tools button{font-size:9px;padding:10px}#grid{grid-template-columns:repeat(2,1fr);gap:14px}.tile img{height:160px}dialog{padding:15px}dialog>div{display:block}dialog button{margin-top:10px}#toast{width:85%;font-size:11px;text-align:center}}@media(max-height:700px) and (max-width:700px){.cover-title{margin:12px 0}h1{font-size:36px}.cover-frame{padding:12px 20px}.cover-title p{font-size:14px}.cover-bottom{font-size:4px}#open{padding:10px 0}}

/* Ajustement 31 octobre 2026 : livre plus grand, sans modifier le feuilletage. */
@media (min-width: 701px) {
  .book {
    width: min(1320px, calc(100vw - 170px));
    height: min(760px, calc(100dvh - 190px));
  }
  .book.covermode { width: min(580px, calc(100vw - 170px)); }
  .stage { gap: 20px; }
  .reader-footer { width: min(1320px, 90vw); height: 52px; }
  #chapter { margin: 10px 0; }
  .page { padding: clamp(24px, 2.6vw, 40px); }
}
@media (max-width: 700px) {
  .book, .book.covermode {
    width: 86vw;
    height: min(700px, calc(100dvh - 180px));
  }
  .stage { gap: 2px; }
  .reader-footer { width: 88vw; }
}

/* VERSION 2 : le livre est prioritaire sur les espaces noirs, y compris sur 27 pouces. */
@media (min-width: 701px) {
  header {height:64px;padding:0 3.2%;}
  header a {font-size:19px;letter-spacing:3px;}
  header a span {margin-top:5px;}
  header button {padding:10px 14px;}
  main {height:calc(100dvh - 96px);}
  #chapter {margin:7px 0 6px;}
  .stage {gap:12px;padding:0 18px;}
  .book {width:min(1900px, 91vw);height:min(1040px, calc(100dvh - 155px));max-width:none;}
  .book.covermode {width:min(740px, 49vw);}
  .page {padding:clamp(26px,2.1vw,48px);}
  .page h2 {font-size:clamp(44px,3.35vw,68px);line-height:1.06;}
  .page p {font-size:clamp(12px,0.9vw,16px);line-height:1.75;}
  .page .small-label {font-size:clamp(8px,0.75vw,11px);}
  .page .caption {font-size:clamp(17px,1.25vw,25px);}
  .cover-title {margin:clamp(14px,2.3vh,28px) 0 15px;}
  .cover-title>span {font-size:clamp(9px,0.68vw,12px);}
  .cover h1 {font-size:clamp(50px,5.0vh,82px);}
  .cover-title p {font-size:clamp(17px,1.4vw,23px);}
  .cover-frame {padding:clamp(15px,1.8vw,32px);}
  .cover-photo img {filter:brightness(.82) saturate(.9);}
  .reader-footer {width:min(1900px,89vw);height:36px;}
  footer {height:32px;margin:0 3.2%;}
  .arrow {flex:0 0 42px;}
}
@media (max-width: 700px) {
  header {height:68px;}
  main {height:calc(100dvh - 98px - env(safe-area-inset-bottom));}
  #chapter {margin:10px 0 8px;}
  .stage {gap:2px;padding:0 3px;}
  .book, .book.covermode {width:88vw;height:calc(100dvh - 170px - env(safe-area-inset-bottom));max-height:820px;}
  .page {padding:clamp(16px,4vw,26px);}
  .reader-footer {height:38px;padding:0;width:88vw;}
  .reader-footer>span {font-size:12px;}
  footer {height:30px;}
  .cover-title {margin:14px 0 10px;}
  .cover-title p {margin:5px 0;}
  .cover-frame {padding:12px 15px;}
  .cover {padding:15px 13px 15px 19px;}
  .cover h1 {font-size:clamp(36px,10vw,52px);}
  .cover-photo img {filter:brightness(.82) saturate(.9);}
  .page .caption {margin-top:9px;}
  .page h2 {font-size:clamp(33px,9vw,43px);}
  .page p {font-size:11px;}
  #motion {right:6px;bottom:8px;}
  #gallery {height:calc(100dvh - 98px);}
}
/* Face visible et verso distinct pour un retour arrière crédible. */
.turning {display:none;overflow:visible;transform-style:preserve-3d;box-shadow:none;z-index:7;}
.turning.animate {display:block;animation:pageForward .78s cubic-bezier(.36,.06,.22,1) both;}
.turning.animate.reverse {animation:pageBackward .78s cubic-bezier(.36,.06,.22,1) both;}
.turn-face {position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;box-shadow:0 0 20px #0002;background:var(--paper);}
.turn-face.back {transform:rotateY(180deg);}
.turn-face>.page {width:100%;height:100%;border-radius:0;}
.turning.reverse {left:0;transform-origin:right center;}
@keyframes pageForward {from {transform:rotateY(0)}to {transform:rotateY(-180deg)}}
@keyframes pageBackward {from {transform:rotateY(0)}to {transform:rotateY(180deg)}}
@media (max-width:700px) {
  .turning {left:0;width:100%;transform-origin:left center;}
  .turning.reverse {left:0;transform-origin:right center;}
}
.end-gallery {background:#343e33;color:#eee;padding:14px 18px;margin-top:14px;border-radius:3px;text-align:left;align-self:flex-start;}
.end-gallery:hover {background:#586450;}
.missing-photo {height:100%;display:grid;place-items:center;padding:20px;font:italic 18px 'Cormorant Garamond',Georgia;color:#7a786f;text-align:center;}
.turning {backface-visibility:visible;}