/* Le Livre de Chrona au chargement du début (Mika, 25 sept. 2026 : « un vrai livre qui s'ouvre avec un zoom à
   l'intérieur », maquette /maquettes/livre.html). Faces 3D en CSS ; couverture, garde et parchemin peints
   (tools/maquette_livre.py). Piloté par public/livre.js. Tout est cantonné à .livre-scene : le Livre des cartes de
   l'Invocation porte aussi la classe .livre et des .page (le 26 sept. 2026, ces règles l'écrasaient à 4 px de large). */
.livre-scene { --W: min(46vw, 230px); --H: calc(var(--W) * 1.5);
  position: fixed; inset: 0; z-index: 100; overflow: hidden; perspective: 1400px; perspective-origin: 50% 38%;
  background: radial-gradient(ellipse at 50% 44%, #2c2336 0%, #17131a 58%, #0c0a0d 100%); }
.livre-scene.part { transition: opacity .8s ease; opacity: 0; pointer-events: none; }
/* le fondu de lumière quand le chargement est fini (Mika, 25 sept. 2026) : on plonge dans une lueur d'ambre, qui
   s'éteint sur le jeu */
.livre-lumiere { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .5s ease-in;
  background: radial-gradient(circle at 50% 45%, #fff7e6 0%, #ffe2a8 35%, rgba(238,154,62,.85) 75%, rgba(200,112,31,.7) 100%); }
.livre-lumiere.on { opacity: 1; }
.livre-scene .halo { position: absolute; left: 50%; top: 44%; width: 150vw; height: 80vw; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(238,154,62,.22), transparent); animation: livre-respirer 2.4s ease-in-out infinite alternate; }
@keyframes livre-respirer { from { opacity: .55; } to { opacity: 1; } }

.livre-camera { position: absolute; inset: 0; transform-origin: 0 0; transform-style: preserve-3d; }
.livre-camera.plonge { transition: transform 1.5s cubic-bezier(.55, 0, .25, 1); }

/* ouvert, deux pages de large ; fermé, décalé d'une demi-largeur pour centrer la couverture */
.livre-scene .livre { position: absolute; left: 50%; top: 44%; width: calc(var(--W) * 2); height: var(--H);
  margin-left: calc(var(--W) * -1); margin-top: calc(var(--H) / -2); transform-style: preserve-3d;
  transform: translateX(calc(var(--W) / -2)) rotateX(16deg) rotateZ(-3deg) translateY(30px) scale(.92); opacity: 0;
  transition: transform 1.1s cubic-bezier(.45, 0, .2, 1), opacity .9s ease; }
.livre-scene .livre.la { opacity: 1; transform: translateX(calc(var(--W) / -2)) rotateX(16deg) rotateZ(-3deg); }
.livre-scene .livre.ouvert { opacity: 1; transform: translateX(0) rotateX(20deg) rotateZ(0deg); }
.livre-scene .livre.a-plat { transform: translateX(0) rotateX(0deg); transition-duration: .7s; }

.livre-scene .livre .page { position: absolute; top: 0; width: var(--W); height: var(--H); box-sizing: border-box;
  background: url(/img/livre/page.webp?v=0922d8d283) center / 100% 100%, linear-gradient(135deg, #f1e6cd, #e2d1ab); color: #3a2b1c;
  font-family: 'EB Garamond', Georgia, serif; }
/* la pliure : l'ombre du dos sur les deux pages */
.livre-scene .livre .page.droite { left: var(--W); border-radius: 0 3px 3px 0; }
.livre-scene .livre .page.droite::before, .livre-scene .livre .recto::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 22%; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, rgba(40,25,10,.38), rgba(40,25,10,.08) 45%, transparent); }
.livre-scene .livre .page.gauche { left: 0; border-radius: 3px 0 0 3px; }
.livre-scene .livre .page.gauche::before, .livre-scene .livre .verso::before { content: ''; position: absolute; inset: 0 0 0 auto; width: 22%; pointer-events: none; z-index: 2;
  background: linear-gradient(270deg, rgba(40,25,10,.38), rgba(40,25,10,.08) 45%, transparent); }
/* fermé, il n'y a rien à gauche du dos */
.livre-scene .livre:not(:has(.couverture.moitie)) > .page.gauche { visibility: hidden; }
/* l'épaisseur : la tranche des pages dessous */
.livre-scene .livre .page.droite { box-shadow: 1px 1px 0 #e3d4b0, 2px 2px 0 #cdb98f, 3px 3px 0 #e3d4b0, 4px 4px 0 #c4ae82, 5px 5px 0 #dccba4,
  6px 6px 0 #bca677, 7px 7px 0 #4a2f3e, 0 18px 30px rgba(0,0,0,.55); }
.livre-scene .livre .page.gauche { box-shadow: -1px 1px 0 #e3d4b0, -2px 2px 0 #cdb98f, -3px 3px 0 #c4ae82, -4px 4px 0 #4a2f3e, 0 18px 30px rgba(0,0,0,.55); }

/* une feuille qui tourne sur le dos du livre ; pas de backface-visibility (Firefox le lit à l'envers ici) :
   les faces s'échangent à mi-course (.moitie) */
.livre-scene .livre .feuille { position: absolute; left: var(--W); top: 0; width: var(--W); height: var(--H); transform-origin: 0 50%;
  transform-style: preserve-3d; transition: transform .75s cubic-bezier(.5, .05, .3, 1); }
.livre-scene .livre .feuille.tournee { transform: rotateY(-180deg); }
.livre-scene .livre .feuille > div { position: absolute; inset: 0; box-sizing: border-box; }
.livre-scene .livre .feuille > .verso { transform: rotateY(180deg); }
.livre-scene .livre .feuille:not(.moitie) > .verso, .livre-scene .livre .feuille.moitie > .recto { visibility: hidden; }
/* la lumière qui glisse sur la feuille pendant qu'elle tourne */
.livre-scene .livre .feuille > div::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 3;
  background: linear-gradient(90deg, rgba(0,0,0,.35), transparent 40%, rgba(255,240,210,.25) 75%, transparent); }
.livre-scene .livre .feuille.tourne > div::after { animation: livre-lustre .75s ease; }
@keyframes livre-lustre { 40%, 60% { opacity: 1; } }
.livre-scene .livre .feuille.vite { transition-duration: .32s; }
.livre-scene .livre .feuille.vite.tourne > div::after { animation-duration: .32s; }

/* la couverture : cuir dehors, garde marbrée dedans, un peu plus grande que les pages */
.livre-scene .livre .couverture { top: -5px; height: calc(var(--H) + 10px); width: calc(var(--W) + 5px); }
.livre-scene .livre .couverture > .recto { background: url(/img/livre/couverture.webp?v=0922d8d283) center / 100% 100%, radial-gradient(circle at 50% 45%, #6b3f63, #2e1a2c);
  border-radius: 2px 6px 6px 2px; box-shadow: inset 3px 0 6px rgba(0,0,0,.6), inset -2px 0 2px rgba(255,220,160,.15); }
.livre-scene .livre .couverture > .recto::before { display: none; }
.livre-scene .livre .couverture > .verso { background: url(/img/livre/garde.webp?v=0922d8d283) left center / 200% 100%, linear-gradient(135deg, #4a3050, #2d3346);
  border-radius: 6px 2px 2px 6px; }
/* la Larme de la couverture bat en attendant */
.livre-scene .livre .larme { position: absolute; left: 52%; top: 62.5%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,212,138,.55), rgba(224,137,47,.18) 55%, transparent);
  mix-blend-mode: screen; animation: livre-respirer 1.2s ease-in-out infinite alternate; }

/* les pages : de l'encre et des icônes, zéro paragraphe */
.livre-scene .livre .chapitre, .livre-scene .livre .titre { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6%; padding: 14% 12%; text-align: center; }
.livre-scene .livre .chapitre img { width: 42%; filter: sepia(.6) contrast(.9) drop-shadow(0 1px 0 rgba(255,255,255,.4)); opacity: .85; }
.livre-scene .livre small { font-size: calc(var(--W) * .05); letter-spacing: .14em; text-transform: uppercase; color: #8a6d3b; white-space: nowrap; }
.livre-scene .livre .chapitre b { font-size: calc(var(--W) * .1); font-weight: 600; line-height: 1.1; }
.livre-scene .livre .titre b { font-size: calc(var(--W) * .115); font-weight: 600; letter-spacing: .06em; }
.livre-scene .livre .titre em { font-size: calc(var(--W) * .07); color: #6b4f2a; }
.livre-scene .livre .titre img { width: 30%; filter: sepia(.5); opacity: .8; }
.livre-scene .livre .filet { display: block; width: 40%; height: 1px; background: linear-gradient(90deg, transparent, #8a6d3b, transparent); }
.livre-scene .livre .ecrit { padding: 16% 14%; }
.livre-scene .livre .ecrit span { display: block; height: calc(var(--W) * .018); margin: calc(var(--W) * .045) 0; border-radius: 2px; background: rgba(58,43,28,.22); }
.livre-scene .livre .ecrit span:nth-child(3n) { width: 78%; } .livre-scene .livre .ecrit span:nth-child(4n) { width: 88%; } .livre-scene .livre .ecrit span:nth-child(7n) { width: 52%; }
/* la fenêtre sur le chemin, où l'on plonge */
.livre-scene .livre .fenetre { position: absolute; inset: 9%; border: 1px solid rgba(138,109,59,.7); outline: 1px solid rgba(138,109,59,.35); outline-offset: 3px;
  background: var(--vue, linear-gradient(#2a3a2a, #1a2418)) center 40% / cover no-repeat; box-shadow: inset 0 0 14px rgba(40,25,10,.45); }
.livre-scene .livre .fenetre::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse, transparent 55%, rgba(239,228,204,.55)); transition: opacity .6s; }
.livre-scene.plonge-fini .fenetre::after { opacity: 0; }

.livre-legende { position: absolute; left: 0; right: 0; bottom: 17%; text-align: center; color: #efe4cc; transition: opacity .4s; }
.livre-legende small { font-style: italic; opacity: .85; font-size: 1rem; }
.livre-legende .barre { display: block; width: 160px; height: 3px; margin: 10px auto 0; border-radius: 2px; background: rgba(239,228,204,.16); overflow: hidden; }
.livre-legende .barre i { display: block; height: 100%; background: linear-gradient(90deg, #c8701f, #ee9a3e); transform-origin: left; transform: scaleX(0); transition: transform .3s; }
.livre-scene.plonge-fini .livre-legende { opacity: 0; }