/* A. Accueil et livre signature
   Une seule ouverture de 700 ms, au premier défilement ou au clic sur la couverture.
   La page défile toujours librement, rien n'est fixé ni bloqué. */

.hero{display:grid;grid-template-columns:.86fr 1.14fr;align-items:center;gap:48px;padding-block:64px 80px;min-height:min(700px,calc(100svh - 160px))}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 50% 60% at 72% 48%,rgba(160,82,104,.22),transparent 70%)}
.hero{position:relative;isolation:isolate}
.hero-copy h1{font-size:clamp(46px,6.2vw,90px);line-height:.96;letter-spacing:-.02em;margin-bottom:28px}
.hero-copy h1 em{color:var(--gold);font-weight:400}
.hero-lead{font-size:18px;line-height:1.65;color:var(--on-wine-muted);max-width:440px;margin-bottom:36px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}

/* Le livre */
.hero-book{min-width:0}
.book-stage{perspective:2000px;padding:24px 0 40px}
.book{--open-ms:700ms;position:relative;width:100%;aspect-ratio:2;transform-style:preserve-3d;transform:translateX(-25%) rotate(-3deg);transition:transform var(--open-ms) var(--ease)}
.book.is-open{transform:translateX(0) rotate(-1.2deg)}

.book-page{position:absolute;top:0;bottom:0;width:50%;margin:0;background:#f8f1e4;color:#7a5848}
.book-page-left{left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:9% 7%;background:linear-gradient(90deg,#f3eadb 82%,#ddcdb3);box-shadow:-3px 4px 0 #d9cab0,-5px 7px 0 #6c4352,0 22px 40px rgba(18,6,12,.4)}
.page-running{font:italic 15px var(--serif);letter-spacing:.02em}
.book-page-left svg{width:34%;height:30%;margin:9% 0;color:#a07a55}
.book-page-left p{font:italic 500 clamp(18px,2vw,28px)/1.2 var(--serif);color:#6b3a48}
.page-folio{margin-top:auto;font:italic 13px var(--serif);opacity:.7}

.book-page-right{right:0;display:flex;flex-direction:column;justify-content:center;padding:7% 6% 5%;background:linear-gradient(90deg,#dccbb0,#faf5ea 6%);box-shadow:3px 4px 0 #d9cab0,5px 7px 0 #6c4352,0 22px 40px rgba(18,6,12,.4)}
.book-page-right img{width:100%;aspect-ratio:1;border:1px solid #d5c6ad;background:#fff;mix-blend-mode:multiply}
.book-page-right figcaption{text-align:center;font:14px/1.3 var(--serif);color:#7a5848;margin-top:5%}
.book-page-right figcaption i{font-size:16px}

/* Couverture : recto cuir, verso = page de garde (la page de gauche) */
.book-cover{position:absolute;top:0;bottom:0;left:50%;width:50%;z-index:3;border:0;padding:0;background:none;transform-origin:left center;transform-style:preserve-3d;transition:transform var(--open-ms) var(--ease);cursor:pointer}
.book.is-open .book-cover{transform:rotateY(-180deg);cursor:default}
.cover-front,.cover-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cover-front{display:flex;flex-direction:column;align-items:center;text-align:center;padding:14% 10% 11%;border-radius:1px 5px 5px 1px;color:var(--gold);background:linear-gradient(90deg,#24101a,#743e52 3.5%,#43202f 7%,#4d2536 60%,#47212f 96%,#2c1520);box-shadow:4px 5px 0 #e2d2b5,6px 8px 0 #6c4352,0 24px 44px rgba(18,6,12,.5);transform:translateZ(1px)}
.cover-front::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.14;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cover-frame{position:absolute;inset:6% 7% 6% 10%;border:1px solid rgba(199,171,117,.55);outline:1px solid rgba(199,171,117,.2);outline-offset:-6px;pointer-events:none}
.cover-kicker{font:600 12px var(--sans);letter-spacing:.14em;text-transform:uppercase}
.cover-title{font:500 clamp(34px,3.9vw,56px)/.92 var(--serif);letter-spacing:-.01em;margin-top:12%;color:#e3cb98}
.cover-title i{font-weight:400}
.book-cover .cover-front svg{width:30%;height:26%;margin:auto 0}
.cover-sub{font:italic 15px var(--serif)}
.cover-back{transform:rotateY(180deg);background:linear-gradient(90deg,#f3eadb 82%,#ddcdb3)}
.book-cover:hover:not([aria-expanded="true"]) .cover-front{box-shadow:4px 5px 0 #e2d2b5,6px 8px 0 #6c4352,0 30px 54px rgba(18,6,12,.55)}
.book:not(.is-open) .book-cover:hover{transform:rotateY(-8deg)}
.book-ribbon{position:absolute;right:16%;bottom:-38px;width:14px;height:60px;background:#9b3a52;clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);transform:translateZ(-2px);z-index:-1}

/* La page de gauche n'apparaît qu'à travers la couverture ouverte */
.book-page-left{opacity:0;transition:opacity 120ms linear calc(var(--open-ms) * .55)}
.book.is-open .book-page-left{opacity:1}
.book.is-open .cover-back{opacity:0;transition:opacity 120ms linear calc(var(--open-ms) * .6)}

.book-hint{text-align:center;font:italic 18px var(--serif);color:var(--on-wine-muted);min-height:1.4em}

/* Tablette */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr;gap:8px;padding-block:56px 72px;min-height:0}
  .hero-copy{max-width:640px}
  .hero-book{max-width:640px;width:100%;justify-self:center}
}

/* Mobile : une page à la fois, le dessin reste grand */
@media (max-width:700px){
  .hero{padding-block:40px 56px}
  .hero-copy h1{font-size:clamp(44px,13vw,60px);margin-bottom:20px}
  .hero-lead{font-size:17px;margin-bottom:28px}
  .hero-actions .button{width:100%}
  .hero-book{margin-inline:calc(-1 * var(--gutter));width:auto;max-width:none;justify-self:stretch}
  .book-stage{--p:min(76vw,340px);overflow:hidden;padding:28px 0 52px}
  .book{width:calc(var(--p) * 2);aspect-ratio:auto;height:var(--p);margin-left:calc(50% - var(--p) * 1.5);transform:none}
  .book.is-open{transform:none}
  .book-page-right{padding:7% 6% 5%}
  .book-page-right figcaption{font-size:13px}
  .cover-title{font-size:clamp(34px,11vw,46px)}
  .cover-kicker{font-size:12px;letter-spacing:.1em}
  .book:not(.is-open) .book-cover:hover{transform:none}
  .book-hint{font-size:17px;padding:0 var(--gutter)}
}

@media (prefers-reduced-motion:reduce){
  .book{--open-ms:0ms}
  .book,.book-cover,.book-page-left,.cover-back{transition:none!important}
}

/* Couverture illustrée (format carré du cahier) */
.cover-front-img{padding:0;overflow:hidden;background:#3a1622}
.cover-front-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover-front-img::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(255,255,255,.18) 2.5%,rgba(0,0,0,.12) 5%,transparent 9%)}
.cover-front-img::after{display:none}
.book-page-right{padding:5% 8% 4%}
.book-page-right img{width:84%;align-self:center}
.book-page-right figcaption{margin-top:3%}
.book-page-left{padding:6% 7%}
.book-page-left svg{margin:5% 0}
@media (max-width:700px){.book-page-right{padding:5% 7% 4%}.book-page-right img{width:82%}}