@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:#c9aa80;--paper:#f3eee4;--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}#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}.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. */










.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;}


/* Quatrième de couverture et petites légendes du livre complet */
.page.back-page {background:linear-gradient(110deg,#182522,#2c3a35 30%,#27342f)!important;color:#e8e0cb!important;}
.backcover-content {height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid #aa8b5e88;padding:clamp(14px,2vw,34px);gap:16px;}
.backcover-content .small-label {color:#c49a6b;}
.back-cover-title {font:500 clamp(27px,2.7vw,49px)/1.08 'Cormorant Garamond',Georgia,serif;color:#f1e8d5;}
.back-cover-title em{font-weight:400;color:#c49a6b;}
.back-photo {width:80%;height:40%;min-height:80px;overflow:hidden;}
.back-photo img {width:100%;height:100%;object-fit:contain;filter:brightness(.82) saturate(.85);}
.backcover-content p {color:#cfcbbd;font-size:11px;letter-spacing:1px;margin:0;}
.back-epilogue{color:#c49a6b;font:italic 22px 'Cormorant Garamond',Georgia,serif;}
.page .small-caption{font-size:clamp(15px,1.1vw,20px);margin:12px 0 4px;flex:0 0 auto;}
.page .duo {flex:1;max-height:calc(100% - 40px);}
@media(max-width:700px){.back-cover-title{font-size:clamp(32px,8vw,46px)}.backcover-content{gap:14px}.page .small-caption{font-size:18px}}

/* Unified 3D scene: no filter/paint containment on the preserve-3d ancestor. */
html,body {width:100%;max-width:100%;overflow-x:hidden;overscroll-behavior-x:none;}
.book {filter:none;box-shadow:0 28px 32px #0008;isolation:auto;touch-action:pan-y pinch-zoom;transition:width .55s;}
.book img {-webkit-user-drag:none;user-select:none;-webkit-user-select:none;}
.cover {transition:transform .55s,opacity .55s;}
.cover.opening.opened {animation:coverOpen .55s ease both;}
.cover.opened:not(.opening) {visibility:hidden;}
@keyframes coverOpen {from {transform:rotateY(0);opacity:1;}to {transform:rotateY(-110deg);opacity:0;}}
.turning,.turning.reverse {display:none;animation:none;overflow:visible;transform-style:preserve-3d;backface-visibility:visible;background:none;}
.turning {left:50%;width:50%;transform-origin:left center;}
.turning.reverse {left:0;transform-origin:right center;}
.turning.ready {display:block;will-change:transform;}
.turn-face {overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:flat;}
.turn-face.front {transform:translateZ(.5px);}
.turn-face.back {transform:rotateY(180deg) translateZ(.5px);}
.turning.animate {animation:pageForward .52s cubic-bezier(.32,.05,.25,1) both;}
.turning.animate.reverse {animation:pageBackward .52s cubic-bezier(.32,.05,.25,1) both;}
.arrow {flex-shrink:0;}
.stage {min-width:0;}
.reader-footer {flex-shrink:0;}
.progress {flex-wrap:wrap;justify-content:center;gap:0;max-width:60%;}
.progress button {position:relative;width:16px;height:18px;background:none;border-radius:0;}
.progress button::after {content:'';position:absolute;width:5px;height:5px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:#55574c;}
.progress button.active {width:20px;border-radius:0;background:none;}
.progress button.active::after {width:14px;border-radius:4px;background:var(--copper);}
@media(max-width:700px) {
  #reader,.stage {width:100%;max-width:100%;overflow:hidden;}
  .stage {gap:2px;justify-content:center;}
  .book,.book.covermode {
    flex:0 0 min(88vw, calc(100vw - 68px));width:min(88vw, calc(100vw - 68px));
    max-width:calc(100vw - 68px);min-width:0;perspective:1300px;
  }
  .turning,.turning.reverse {width:100%;left:0;}
  .turning {transform-origin:left center;}
  .turning.reverse {transform-origin:right center;}
  .reader-footer {max-width:100vw;height:60px;gap:0;}
  .reader-footer>span {flex:0 0 100%;}
  .progress {max-width:100%;}
  .progress button {width:11px;height:20px;}
  .progress button.active {width:17px;}
  .book,.book.covermode {height:calc(100dvh - 190px - env(safe-area-inset-bottom));}
}
@media(max-height:550px) {
  header {height:48px;}
  main {height:calc(100dvh - 72px);}
  footer {height:24px;}
  #chapter {margin:4px 0;font-size:7px;}
  .book,.book.covermode {height:calc(100dvh - 133px);}
  .page {padding:12px 18px;}
  .page h2 {font-size:clamp(20px,6vh,32px);margin:8px 0;}
  .page p {font-size:10px;line-height:1.35;margin:5px 0;}
  .page .folio {bottom:4px;font-size:6px;}
  .page .caption,.page .small-caption {font-size:14px;margin:5px 0 6px;}
  .page .duo {gap:7px;}
  .cover {padding:8px 12px;}
  .cover-frame {padding:6px 12px;}
  .cover-title {margin:5px 0;}
  .cover h1 {font-size:26px;margin:5px 0;}
  .cover-title p {font-size:12px;margin:3px 0;}
  .cover-title>span {font-size:8px;}
  .cover-photo {min-height:0;}
  #open {padding:5px 0;}
  .backcover-content {padding:8px;gap:5px;}
  .back-cover-title {font-size:23px;}
  .back-photo {min-height:0;}
  .back-epilogue {font-size:16px;}
  .end-gallery {padding:8px 10px;margin-top:5px;}
  #gallery {height:calc(100dvh - 72px);}
}

@keyframes pageForward {from {transform:rotateY(0);}to {transform:rotateY(-180deg);}}
@keyframes pageBackward {from {transform:rotateY(0);}to {transform:rotateY(180deg);}}
.turning {position:absolute;top:0;height:100%;z-index:7;pointer-events:none;}
.turn-face {position:absolute;inset:0;box-shadow:0 0 20px #0002;background:var(--paper);}
.turn-face>.page {width:100%;height:100%;border-radius:0;}
@media(max-width:700px) and (min-height:551px) and (max-height:700px) {
  .page h2 {font-size:clamp(29px,8vw,35px);margin:12px 0;}
  .page p {line-height:1.6;margin:8px 0;}
  .end-gallery {padding:10px 12px;margin-top:8px;}
}
/* Keep captions clear of the absolutely positioned folio on compact pages. */
.page .caption {padding-bottom:12px;}

/* Dernière couverture : même largeur de scène, aucun redimensionnement du livre.
   La couverture (une demi-page) reste centrée une fois la rotation terminée. */
.next-text {display:none;}
.stage {position:relative;}
@media(min-width:701px) {
  .stage.final-stage {
    display:flex;align-items:center;justify-content:center;
  }
  .stage.final-stage .book.backcovermode {
    width:min(1900px,91vw);
    flex:0 1 auto;
  }
  .book.backcovermode #left {
    width:50%;flex:0 0 50%;
    transform:translateX(50%);
    transition:none;
  }
  .stage.final-stage #next {
    position:relative;display:grid;place-items:center;
    width:44px;height:44px;min-width:44px;flex:0 0 44px;
    border:1px solid #c49a6b66;border-radius:50%;padding:0;
    color:var(--copper);font-size:22px;
  }
  .stage.final-stage #next .next-text {
    display:block;position:absolute;right:calc(100% + 12px);
    top:50%;transform:translateY(-50%);
    width:clamp(105px,13vw,195px);
    text-align:right;white-space:normal;
    color:var(--copper);font-size:clamp(11px,.9vw,14px);
    line-height:1.5;pointer-events:none;
  }
  .stage.final-stage #next:hover {background:#c49a6b22;}
}
/* Only one finished cover is visible; all other spreads retain their original layout. */
.book.backcovermode #right {display:none;}
@media(max-width:700px) {
  .book.backcovermode #left {width:100%;flex:0 0 100%;transform:none;}
  .stage.final-stage #next {color:var(--copper);}
  .stage.final-stage #next .next-symbol {font-size:23px;}
}


/* Only the last desktop turn shares its 520 ms timeline with scene centering.
   End positions match #left translateX(50%) = one quarter of the full book. */
@media(min-width:701px) {
  .book.backcover-reopening {transform:translateX(25%);}
  .book.backcover-closing {animation:backcoverClose .52s cubic-bezier(.32,.05,.25,1) both;}
  .book.backcover-opening {animation:backcoverOpen .52s cubic-bezier(.32,.05,.25,1) both;}
  .book.backcover-closing,.book.backcover-reopening {will-change:transform;}
  @keyframes backcoverClose {from {transform:translateX(0);}to {transform:translateX(25%);}}
  @keyframes backcoverOpen {from {transform:translateX(25%);}to {transform:translateX(0);}}
}

/* Couverture : cadrage un peu plus large pour montrer davantage l'équipe. */
@media (min-width: 701px) {
  .cover-photo::before {
    content: "";
    position: absolute;
    inset: -16px;
    background: url("assets/photo-01.webp") center / cover no-repeat;
    filter: blur(18px) brightness(.38) saturate(.55);
    pointer-events: none;
  }
  .cover-photo img {
    position: relative;
    z-index: 1;
    object-fit: contain;
    object-position: center;
    transform: scale(1.14);
    transform-origin: center;
  }
  .cover-photo span { z-index: 2; }
}

/* Habillage familial uniquement — navigation, iPhone et feuilletage inchangés. */
body{background-color:#1b1b1b;background-image:radial-gradient(ellipse at 50% 70%,#9f775322,transparent 66%)}
.cover{background:linear-gradient(90deg,#26231f,#463a32 6%,#43372f 80%,#2b251f);border-right-color:#6d5846;border-bottom-color:#1e1915}
.cover-photo img{filter:none;object-position:50% 47%}
.back-photo img{filter:none}
.cover-bottom{color:#d0bda2}
@media(max-width:700px){.cover-title h1{font-size:clamp(38px,10vw,50px)}.cover-title p{font-size:clamp(13px,3.4vw,17px)}}