/* =====================================================================
   DEIVAR — FEUILLE DE STYLE
   ===================================================================== */

/* ---------- PALETTE & RÉGLAGES VISUELS (personnalisables) ---------- */
:root{
  --void:#080606;          /* noir presque absolu */
  --leather:#301914;       /* cuir ancien */
  --blood-dry:#58100F;     /* sang séché */
  --blood:#8F171B;         /* rouge profond lumineux */
  --copper:#8a5a3a;        /* cuivre terni */
  --gold:#9c8152;          /* or terni */
  --dust:#8d8780;          /* poussière */

  /* Intégration du logo dans le cuir (filtre appliqué à logo.png).
     Mettez "none" pour afficher le logo tel quel. */
  --logo-filter: sepia(.55) saturate(1.5) hue-rotate(-22deg) brightness(.8) contrast(1.08) drop-shadow(0 1px 0 rgba(0,0,0,.9)) drop-shadow(0 0 6px rgba(143,23,27,.6));
  /* Fusion du logo : normal | multiply (logo sombre) | screen (logo clair) */
  --logo-blend: normal;

  /* Intensité des effets d'ambiance */
  --mist-strength:.9;      /* brume rouge (0 à 1) */
  --grain-strength:.28;    /* grain cinématographique (0 à 1) */

  /* Textures (fichiers du dossier textures/) */
  --tex-front:url("../textures/leather-front.jpg");
  --tex-back:url("../textures/leather-back.jpg");
  --tex-spine:url("../textures/leather-spine.jpg");
  --tex-parch:url("../textures/parchment.jpg");
  --tex-edgeV:url("../textures/page-edge-v.jpg");
  --tex-edgeH:url("../textures/page-edge-h.jpg");
  --tex-ink:url("../textures/ink.jpg");
  --tex-dust:url("../textures/dust.png");
  --tex-grain:url("../textures/grain.png");
  --tex-wear:url("../textures/wear.png");

  --f-serif:'Cormorant Garamond',Garamond,'Palatino Linotype',Georgia,serif;
  --f-epi:'Cinzel','Trajan Pro','Palatino Linotype','Times New Roman',serif;
  --f-hand:'IM Fell English','Cormorant Garamond',Georgia,serif;
  --f-unc:'Uncial Antiqua','Cinzel',Georgia,serif;

  /* dimensions du livre (recalculées en JavaScript) */
  --bw:340px;--bh:476px;--bt:58px;--bc:5px;--bd:48px;--ix:7px;--iy:7px;--seamz:26px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--void)}
body{
  color:#b9a58a;font-family:var(--f-serif);overflow:hidden;
  -webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body:not(.fr) .fr,body.fr .la{display:none!important}

/* ---------- Ambiance plein écran ---------- */
#fxBack,#fxFront{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#fxBack{z-index:0}
#fxFront{z-index:3}
#mist{position:fixed;inset:-10%;z-index:1;pointer-events:none;opacity:var(--mist-strength);will-change:transform,opacity;
  background:
    radial-gradient(ellipse 42% 38% at 50% 46%,rgba(88,16,15,.32),transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 70%,rgba(60,10,10,.22),transparent 72%),
    radial-gradient(ellipse 90% 60% at 50% 110%,rgba(48,25,20,.35),transparent 70%);
  animation:breathe 11s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:calc(var(--mist-strength)*.8)}50%{transform:scale(1.06);opacity:var(--mist-strength)}}
/* rais de lumière : dégradés doux, sans filtre de flou (plus léger) */
#beams{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
#beams i{position:absolute;top:-20%;width:22vw;height:120%;opacity:.6;transform-origin:50% 0;will-change:transform;
  background:radial-gradient(ellipse 50% 100% at 50% 0%,rgba(150,40,30,.10),rgba(143,23,27,.035) 55%,transparent 80%);
  animation:sway 24s ease-in-out infinite}
#beams i:nth-child(1){left:24%;rotate:14deg}
#beams i:nth-child(2){left:50%;width:15vw;rotate:-8deg;animation-duration:31s;animation-delay:-9s;opacity:.45}
#beams i:nth-child(3){left:64%;width:11vw;rotate:-20deg;animation-duration:27s;animation-delay:-4s;opacity:.35}
@keyframes sway{0%,100%{transform:rotate(0deg)}50%{transform:rotate(4deg)}}
#darken{position:fixed;inset:0;z-index:1;background:#000;opacity:0;pointer-events:none}
#grain{position:fixed;left:-50%;top:-50%;width:200%;height:200%;z-index:8;pointer-events:none;will-change:transform;
  background-image:var(--tex-grain);opacity:var(--grain-strength);animation:grain 1.1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-3%,2%)}33%{transform:translate(2%,-3%)}50%{transform:translate(-1%,3%)}67%{transform:translate(3%,1%)}83%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}}
#vignette{position:fixed;inset:0;z-index:7;pointer-events:none;
  background:radial-gradient(ellipse 75% 70% at 50% 45%,transparent 40%,rgba(0,0,0,.55) 72%,rgba(0,0,0,.94) 100%)}
#veil{position:fixed;inset:0;z-index:50;background:#000;display:grid;place-items:center;transition:opacity 2s ease}
#veil span{font-family:var(--f-epi);letter-spacing:.9em;text-indent:.9em;font-size:11px;color:#4a1714;animation:veil 2.2s ease-in-out infinite}
@keyframes veil{0%,100%{opacity:.25}50%{opacity:.9}}
body.ready #veil{opacity:0;pointer-events:none}

/* ---------- Mise en page ---------- */
#app{position:relative;z-index:2;height:100vh;height:100svh;min-height:460px;display:flex;flex-direction:column;overflow:hidden;overflow:clip}
#scene{position:relative;flex:1;min-height:0;perspective:1800px;touch-action:pan-y}
#aura,#shadow{position:absolute;left:0;top:0;width:100px;height:100px;margin:-50px 0 0 -50px;pointer-events:none;will-change:transform}
#aura i{position:absolute;inset:-70%;border-radius:50%;display:block}
#aura .a1{background:radial-gradient(closest-side,rgba(143,23,27,.30),rgba(88,16,15,.16) 45%,transparent 100%);animation:aura 7s ease-in-out infinite}
#aura .a2{inset:-55%;background:radial-gradient(closest-side,rgba(190,30,30,.42),rgba(143,23,27,.22) 50%,transparent 100%);opacity:0}
#aura .a3{inset:-45%;background:radial-gradient(closest-side,rgba(220,30,25,.5),rgba(143,23,27,.25) 50%,transparent 100%);opacity:0}
@keyframes aura{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
#shadow{background:radial-gradient(closest-side,rgba(0,0,0,.92),rgba(0,0,0,.5) 55%,transparent 100%)}
#rig{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
#shaker{position:absolute;left:calc(var(--bw)/-2);top:calc(var(--bh)/-2);width:var(--bw);height:var(--bh);transform-style:preserve-3d}
#shaker.shake{animation:shake .62s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{
  10%,90%{transform:translate3d(-2px,0,0) rotateZ(-.4deg)}
  20%,80%{transform:translate3d(4px,1px,0) rotateZ(.6deg)}
  30%,50%,70%{transform:translate3d(-7px,-1px,0) rotateZ(-.9deg)}
  40%,60%{transform:translate3d(7px,1px,0) rotateZ(.9deg)}}

/* =====================================================================
   LE LIVRE — objet CSS 3D (faces, tranches, reliure, pages)
   ===================================================================== */
#book{position:absolute;left:0;top:0;width:var(--bw);height:var(--bh);transform-style:preserve-3d;will-change:transform;
  --surge:0;--wrath:0;--edge:0;--seam:0;cursor:grab}
body.grabbing #book{cursor:grabbing}
.board{position:absolute;inset:0;transform-style:preserve-3d}
.board.front{transform-origin:0 50%}
.board.back{transform:translateZ(calc(var(--bc)/2 - var(--bt)/2))}
.face,.edge,.spine,.b-fore,.b-top,.b-bottom,.page,.seam{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face{inset:0;overflow:hidden;border-radius:2px 6px 6px 2px}
.front .outer{transform:translateZ(calc(var(--bc)/2))}
.front .inner{transform:translateZ(calc(var(--bc)/-2)) rotateY(180deg)}
.back .outer{transform:translateZ(calc(var(--bc)/-2)) rotateY(180deg);border-radius:6px 2px 2px 6px}
.edge{display:block;background:linear-gradient(90deg,#0b0504,#331a13 45%,#22100c 60%,#0b0504)}
.e-right{width:var(--bc);height:100%;top:0;left:calc(var(--bw) - var(--bc)/2);transform:rotateY(90deg)}
.e-top{height:var(--bc);width:100%;left:0;top:calc(var(--bc)/-2);transform:rotateX(90deg)}
.e-bottom{height:var(--bc);width:100%;left:0;top:calc(var(--bh) - var(--bc)/2);transform:rotateX(-90deg)}

/* cuir */
.leather{background-color:#2a1511;background-size:100% 100%;
  box-shadow:inset 0 0 calc(var(--bw)*.07) rgba(0,0,0,.85),inset 0 0 2px rgba(0,0,0,.95)}
.front-outer,.leather-inner{background-image:var(--tex-front)}
.back-outer{background-image:var(--tex-back)}
/* reflet : dégradé fixe déplacé par transform (aucun repeint) */
.sheen{position:absolute;left:-50%;top:-50%;width:200%;height:200%;pointer-events:none;will-change:transform;
  background:radial-gradient(circle at 50% 50%,rgba(255,195,160,.085),rgba(255,195,160,.03) 16%,transparent 32%)}
.dustlayer{position:absolute;inset:0;pointer-events:none;background-image:var(--tex-dust);background-size:100% 100%;opacity:.28}
.frame{position:absolute;inset:6.5% 7%;border:1px solid rgba(0,0,0,.6);pointer-events:none;
  box-shadow:0 1px 0 rgba(255,175,135,.06),inset 0 1px 0 rgba(255,175,135,.05),inset 0 0 0 calc(var(--bw)*.012) rgba(0,0,0,.08)}
.frame::before{content:'';position:absolute;inset:calc(var(--bw)*.018);border:1px solid rgba(0,0,0,.5);box-shadow:0 1px 0 rgba(255,175,135,.05)}
.marks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* coins métalliques */
.corner{position:absolute;width:15%;aspect-ratio:1;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.95)) drop-shadow(0 0 4px rgba(0,0,0,.6))}
.corner i{position:absolute;inset:0;display:block;
  clip-path:polygon(0 0,100% 0,97% 8%,70% 14%,54% 21%,41% 29%,29% 41%,21% 54%,14% 70%,8% 97%,0 100%);
  background:
    radial-gradient(circle at 16% 16%,#c09868 0 2.4%,#3e2c1b 3.4% 5.4%,transparent 6.4%),
    radial-gradient(circle at 60% 8.5%,#a8845a 0 1.9%,#3b2a1a 2.9% 4.4%,transparent 5.4%),
    radial-gradient(circle at 8.5% 60%,#a8845a 0 1.9%,#3b2a1a 2.9% 4.4%,transparent 5.4%),
    radial-gradient(ellipse 38% 26% at 34% 38%,rgba(72,108,88,.42),transparent 72%),
    radial-gradient(ellipse 26% 40% at 72% 12%,rgba(30,18,10,.75),transparent 70%),
    linear-gradient(135deg,#7c5f3b,#3c2b1a 28%,#6b4f30 47%,#2b1e12 68%,#56412a)}
.corner.tl{top:-.4%;left:-.4%}
.corner.tr{top:-.4%;right:-.4%;transform:scaleX(-1)}
.corner.bl{bottom:-.4%;left:-.4%;transform:scaleY(-1)}
.corner.br{bottom:-.4%;right:-.4%;transform:scale(-1,-1)}

/* titre gravé */
.cv-liber{position:absolute;top:11.5%;left:0;right:0;text-align:center;font:600 calc(var(--bw)*.04)/1 var(--f-epi);
  letter-spacing:.75em;text-indent:.75em;color:#160907;text-shadow:0 1px 0 rgba(255,175,135,.09),0 -1px 0 rgba(0,0,0,.85)}
.cv-title{position:absolute;top:15.5%;left:0;right:0;text-align:center;font:700 calc(var(--bw)*.152)/1 var(--f-epi);letter-spacing:.09em;text-indent:.09em}
.cv-title span{display:block}
.cv-title .deb{color:#120605;text-shadow:0 calc(var(--bw)*.003) 0 rgba(255,170,130,.11),0 calc(var(--bw)*-.003) 1px rgba(0,0,0,.95)}
.cv-title .gilt,.cv-title .glow{position:absolute;inset:0}
.cv-title .gilt{background:linear-gradient(176deg,#4a361e 12%,#a5844f 34%,#5f482a 50%,#b29360 63%,#57412a 82%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;opacity:.82;
  -webkit-mask-image:var(--tex-wear);mask-image:var(--tex-wear);-webkit-mask-size:100% 100%;mask-size:100% 100%}
.cv-title .glow{color:#a0181c;filter:blur(calc(var(--bw)*.014));opacity:calc(var(--surge)*.7 + var(--wrath)*.8)}
.cv-rule{position:absolute;top:33%;left:30%;right:30%;height:1px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.7),transparent);box-shadow:0 1px 0 rgba(255,170,130,.06)}
.cv-rule i{position:absolute;left:50%;top:50%;width:calc(var(--bw)*.022);height:calc(var(--bw)*.022);transform:translate(-50%,-50%) rotate(45deg);background:#1a0b08;box-shadow:inset 0 0 0 1px rgba(0,0,0,.7),0 1px 0 rgba(255,170,130,.08)}

/* sceau du logo */
.seal{position:absolute;left:50%;top:60%;width:42%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(0,0,0,.18),rgba(0,0,0,.32) 68%,rgba(0,0,0,.05) 71%,transparent 73%);
  box-shadow:inset 0 calc(var(--bw)*.009) calc(var(--bw)*.022) rgba(0,0,0,.92),inset 0 -1px 1px rgba(255,170,130,.08),0 1px 0 rgba(255,170,130,.07),0 -1px 0 rgba(0,0,0,.6)}
.seal::before{content:'';position:absolute;inset:4.5%;border-radius:50%;
  background:repeating-conic-gradient(rgba(0,0,0,.6) 0 2.2deg,transparent 2.2deg 7.5deg);
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 64.5% 69%,transparent 70.5%);mask:radial-gradient(circle,transparent 63%,#000 64.5% 69%,transparent 70.5%)}
.seal-glow{position:absolute;inset:-16%;border-radius:50%;pointer-events:none;will-change:transform;
  background:radial-gradient(closest-side,rgba(160,25,28,.45),rgba(88,16,15,.18) 45%,transparent 100%);
  opacity:calc(.4 + var(--surge)*.6 + var(--wrath)*.9);animation:sealbreath 6.5s ease-in-out infinite}
@keyframes sealbreath{0%,100%{transform:scale(.94)}50%{transform:scale(1.05)}}
.seal .logo{position:absolute;left:50%;top:50%;width:70%;height:70%;transform:translate(-50%,-50%);object-fit:contain;
  filter:var(--logo-filter);mix-blend-mode:var(--logo-blend);opacity:.93;pointer-events:none}
.seal-patina{position:absolute;inset:12%;border-radius:50%;pointer-events:none;background-image:var(--tex-dust);background-size:cover;opacity:.15}
.seal.nologo::after{content:'';position:absolute;inset:26%;border-radius:50%;box-shadow:inset 0 1px 4px rgba(0,0,0,.85),0 1px 0 rgba(255,170,130,.06)}

/* coulures de sang */
.drips{position:absolute;inset:0;pointer-events:none}
.drip{position:absolute;top:0;width:calc(var(--bw)*.011*var(--w,1));margin-left:calc(var(--bw)*-.0055*var(--w,1));transform-origin:top center}
.drip .trail{position:absolute;inset:0;display:block;border-radius:0 0 50% 50%/0 0 calc(var(--bw)*.01) calc(var(--bw)*.01);
  background:linear-gradient(180deg,#1c0202,#3f0605 35%,#560c0b 80%,#6a1212);transform-origin:top;
  box-shadow:inset calc(var(--bw)*.002) 0 0 rgba(220,90,80,.12);animation:ooze 19s ease-in-out infinite alternate;animation-delay:var(--del)}
.drip .drop{position:absolute;left:50%;top:100%;display:block;width:230%;aspect-ratio:.8;border-radius:50% 50% 50% 50%/62% 62% 40% 40%;
  background:radial-gradient(circle at 36% 30%,rgba(255,130,120,.38),transparent 24%),radial-gradient(circle at 50% 62%,#6c1311,#300303 75%);
  transform:translate(-50%,-55%) scale(.6);animation:fall var(--d) cubic-bezier(.55,0,.85,.5) infinite;animation-delay:var(--del)}
@keyframes ooze{0%{transform:scaleY(.86)}100%{transform:scaleY(1)}}
@keyframes fall{0%,66%{transform:translate(-50%,-55%) scale(.55);opacity:1}
  80%{transform:translate(-50%,-38%) scale(1,1.2);opacity:1}
  100%{transform:translate(-50%,calc(var(--bh)*.55)) scale(.75,1.5);opacity:0}}
#book.agitate .drip .trail{animation:shiver .14s linear infinite}
@keyframes shiver{0%,100%{transform:scaleY(1) translateX(0)}50%{transform:scaleY(1.04) translateX(.4px)}}

/* dos de reliure */
.spine{width:var(--bt);height:var(--bh);left:calc(var(--bt)/-2);top:0;transform:rotateY(-90deg);overflow:hidden;border-radius:calc(var(--bt)*.14);
  background-color:#24110d;background-image:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.12) 22%,rgba(255,190,150,.07) 50%,rgba(0,0,0,.12) 78%,rgba(0,0,0,.82)),var(--tex-spine);
  background-size:100% 100%,100% 100%}
.band{position:absolute;left:0;right:0;height:2.3%;
  background:linear-gradient(180deg,rgba(0,0,0,.9),rgba(120,66,48,.4) 32%,rgba(64,32,24,.45) 58%,rgba(0,0,0,.92));
  box-shadow:0 3px 4px rgba(0,0,0,.6),0 -2px 3px rgba(0,0,0,.45)}
.spine-title{position:absolute;top:31%;left:50%;transform:translateX(-50%);writing-mode:vertical-rl;
  font:700 calc(var(--bt)*.4)/1 var(--f-epi);letter-spacing:.32em;
  background:linear-gradient(90deg,#4a361e,#a5844f 40%,#5a4428 70%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.9));opacity:.85}
.spine-mark{position:absolute;left:50%;width:42%;aspect-ratio:1;transform:translateX(-50%) rotate(45deg);border:1px solid rgba(0,0,0,.6);box-shadow:0 1px 0 rgba(255,170,130,.06)}

/* tranches des pages */
.b-fore{width:var(--bd);height:calc(var(--bh) - 2*var(--iy));top:var(--iy);left:calc(var(--bw) - var(--ix) - var(--bd)/2);transform:rotateY(90deg);
  background-color:#7d6648;background-image:var(--tex-edgeV);background-size:100% 100%;overflow:hidden}
.b-top,.b-bottom{width:calc(var(--bw) - var(--ix) - 2px);height:var(--bd);left:2px;
  background-color:#7d6648;background-image:var(--tex-edgeH);background-size:100% 100%;overflow:hidden}
.b-top{top:calc(var(--iy) - var(--bd)/2);transform:rotateX(90deg)}
.b-bottom{top:calc(var(--bh) - var(--iy) - var(--bd)/2);transform:rotateX(-90deg)}
/* lumière rouge qui traverse les pages (animée uniquement pendant l'ouverture) */
.b-fore::after,.b-top::after{content:'';position:absolute;inset:0;opacity:var(--edge);pointer-events:none}
.b-fore::after{background:linear-gradient(180deg,transparent 0%,rgba(255,60,40,.75) 45%,rgba(143,23,27,.65) 55%,transparent 100%);background-size:100% 240%}
.b-top::after{background:linear-gradient(90deg,transparent 0%,rgba(255,60,40,.75) 45%,rgba(143,23,27,.65) 55%,transparent 100%);background-size:240% 100%}
#book.edge-on .b-fore::after{animation:sweepV 1.6s linear infinite}
#book.edge-on .b-top::after{animation:sweepH 1.6s linear infinite}
@keyframes sweepV{0%{background-position:0 100%}100%{background-position:0 0}}
@keyframes sweepH{0%{background-position:100% 0}100%{background-position:0 0}}
.seam{left:2px;top:var(--iy);width:calc(var(--bw) - var(--ix) - 2px);height:calc(var(--bh) - 2*var(--iy));pointer-events:none;
  transform:translateZ(var(--seamz));opacity:var(--seam);
  background:radial-gradient(ellipse 70% 60% at 100% 50%,rgba(255,70,45,.75),rgba(143,23,27,.45) 35%,transparent 75%)}

/* =====================================================================
   PAGES — parchemin
   ===================================================================== */
.parch{background-color:#7d6545;background-image:var(--tex-parch);background-size:100% 100%}
.leaf{position:absolute;left:2px;top:var(--iy);width:calc(var(--bw) - var(--ix) - 2px);height:calc(var(--bh) - 2*var(--iy));transform-origin:0 50%;transform-style:preserve-3d}
.page{inset:0;overflow:hidden;color:#2d1a0d}
.leaf .verso{transform:rotateY(180deg)}
.endpage{inset:auto;left:2px;top:var(--iy);width:calc(var(--bw) - var(--ix) - 2px);height:calc(var(--bh) - 2*var(--iy));transform:translateZ(calc(var(--bt)/2 - var(--bc)))}
.page::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;box-shadow:inset 0 0 calc(var(--bw)*.05) rgba(40,20,8,.55)}
.recto::before,.verso::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:3}
.recto::before{background:linear-gradient(90deg,rgba(22,9,3,.62),rgba(22,9,3,.2) 4%,transparent 13%)}
.verso::before{background:linear-gradient(270deg,rgba(22,9,3,.62),rgba(22,9,3,.2) 4%,transparent 13%)}
.shade{position:absolute;inset:0;background:#000;opacity:0;z-index:5;pointer-events:none}
.pcontent{position:absolute;top:8%;bottom:7.5%;left:13%;right:9%;overflow:hidden;display:flex;flex-direction:column}
.verso .pcontent{left:9%;right:13%}
.reveal{-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 60%);mask-image:linear-gradient(180deg,#000 40%,transparent 60%);
  -webkit-mask-size:100% 260%;mask-size:100% 260%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:0 100%;mask-position:0 100%;transition:-webkit-mask-position 3.4s cubic-bezier(.4,0,.2,1),mask-position 3.4s cubic-bezier(.4,0,.2,1)}
#book.inked .reveal{-webkit-mask-position:0 0;mask-position:0 0}
.stain{position:absolute;border-radius:50%;pointer-events:none;z-index:1}
.folnum{position:absolute;bottom:3.2%;font:italic calc(var(--bw)*.026)/1 var(--f-hand);color:#4b3220;opacity:.75;z-index:2}
.recto .folnum{right:9%}.verso .folnum{left:9%}

/* encre de sang absorbée par la fibre */
.blood{color:#4a0a09;background-color:#4a0a09;background-image:var(--tex-ink);background-size:100% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ph{font:400 calc(var(--bw)*.05*var(--fit,1))/1.1 var(--f-unc);text-align:center;letter-spacing:.08em;margin:0 0 .7em}
.ph::after{content:'';display:block;width:34%;height:1px;margin:.45em auto 0;background:#4a0a09;opacity:.55}
.txt p{font-family:var(--f-hand);font-size:calc(var(--bw)*.0352*var(--fit,1));line-height:1.52;margin:0 0 .62em;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.txt .fr p{font-size:calc(var(--bw)*.0335*var(--fit,1))}
.initial{float:left;font-family:var(--f-unc);font-size:3.05em;line-height:.8;margin:.07em .1em 0 0}
.gloss{position:absolute;right:9%;bottom:2.4%;z-index:6;background:none;border:0;cursor:pointer;padding:.4em .2em;
  font:italic calc(var(--bw)*.027)/1 var(--f-hand);color:#5a3a22;letter-spacing:.06em;opacity:.8;transition:color .4s,opacity .4s}
.gloss:hover,.gloss:focus-visible{color:#7a1512;opacity:1;outline:none}

.paste{position:absolute;inset:4.5% 4% 4.5% 5%;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 calc(var(--bw)*.02) rgba(0,0,0,.7)}
.paste::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 calc(var(--bw)*.06) rgba(30,14,6,.7);pointer-events:none}
.art{position:absolute;inset:0;width:100%;height:100%}

.blade-wrap{position:absolute;inset:6% 8% 15% 8%}
.blade-cap{position:absolute;left:9%;right:13%;bottom:7.5%;text-align:center;font:italic calc(var(--bw)*.036)/1.3 var(--f-hand);color:#3a2414}
.blade-cap .lat{display:block;font:400 calc(var(--bw)*.046)/1.2 var(--f-unc);color:#4a0a09;margin-bottom:.15em}

.sigil{width:38%;margin:0 auto .8em;display:block;flex:none}
.leges{list-style:none}
.leges li{display:flex;gap:.7em;align-items:baseline;margin:0 0 .95em;font-family:var(--f-hand);font-size:calc(var(--bw)*.037*var(--fit,1));line-height:1.45}
.leges .num{font:400 1.6em/1 var(--f-unc);min-width:1.4em;text-align:center}

.ig{font-family:var(--f-hand);font-style:italic;font-size:calc(var(--bw)*.039*var(--fit,1));line-height:1.32;white-space:nowrap;color:#4a0a09;transform-origin:left center}
.ig.struck span{text-decoration:line-through;text-decoration-thickness:.09em}
.ig.last{font:400 calc(var(--bw)*.075*var(--fit,1))/1.1 var(--f-unc);margin-top:.35em;font-style:normal;transform:rotate(-4deg)}
#ignosce{padding-top:4%}

.finis{align-items:center;justify-content:center;gap:4%}
.blood-seal{position:relative;width:62%;aspect-ratio:1;flex:none}
.blood-seal svg{position:absolute;inset:0;width:100%;height:100%}
.blood-seal .logo{position:absolute;left:50%;top:50%;width:42%;height:42%;transform:translate(-50%,-50%);object-fit:contain;
  filter:grayscale(1) brightness(.35) sepia(1) hue-rotate(-30deg) saturate(3);mix-blend-mode:multiply;opacity:.75}
.finis-word{font:600 calc(var(--bw)*.06)/1 var(--f-epi);letter-spacing:.5em;text-indent:.5em;color:#3d0807;opacity:.85}
.finis-sub{font:italic calc(var(--bw)*.032)/1.3 var(--f-hand);color:#4a2c18;text-align:center}

/* couverture arrière */
.back-seal{position:absolute;left:50%;top:15%;width:30%;aspect-ratio:1;transform:translateX(-50%)}
.back-seal svg{width:100%;height:100%;display:block;filter:drop-shadow(0 -1px 0 rgba(0,0,0,.9)) drop-shadow(0 1px 0 rgba(255,170,130,.1));opacity:.9}
.back-text{position:absolute;left:12%;right:12%;top:43%;text-align:center}
/* sang séché dans les rainures du cuir */
.carved{color:#7d1915;
  text-shadow:0 -1px 0 rgba(0,0,0,.95),0 1px 0 rgba(255,170,130,.13),0 0 calc(var(--bw)*.02) rgba(143,23,27,.45)}
.back-text .la p{font:600 calc(var(--bw)*.034)/1.75 var(--f-epi);letter-spacing:.13em;text-indent:.13em}
.back-text .fr p{font:500 italic calc(var(--bw)*.041)/1.5 var(--f-serif);letter-spacing:.02em}
.back-text .rule{display:block;width:22%;height:1px;margin:.9em auto;background:linear-gradient(90deg,transparent,rgba(0,0,0,.75),transparent);box-shadow:0 1px 0 rgba(255,170,130,.07)}

/* =====================================================================
   INTERFACE — incantation, commandes, curseur
   ===================================================================== */
#incantation{position:absolute;left:50%;bottom:max(6px,1vh);transform:translateX(-50%);width:min(92vw,520px);text-align:center;z-index:5;
  transition:opacity .9s ease,transform .9s ease,visibility 0s linear .9s}
body:not(.phase-closed) #incantation{opacity:0;visibility:hidden;transform:translate(-50%,16px);pointer-events:none}
body.phase-closed #incantation{visibility:visible;transition-delay:0s}
.formula{font:600 clamp(10px,1.35vw,13px)/1 var(--f-epi);letter-spacing:.6em;text-indent:.6em;color:#7c2620;text-shadow:0 0 14px rgba(143,23,27,.55)}
.instr{font-style:italic;font-size:clamp(14px,1.7vw,17px);color:#8a7762;margin:.55em 0 .9em;min-height:1.3em}
.instr .unl{display:none}
body.unlocked .instr .loc{display:none}
body.unlocked .instr .unl{display:inline}
.plaque{position:relative;display:flex;align-items:stretch;margin:0 auto;max-width:420px;
  background:
    radial-gradient(circle at 12px 50%,#7a5c3a 0 1.6px,#2a1d12 2.6px 3.6px,transparent 4.6px),
    radial-gradient(circle at calc(100% - 12px) 50%,#7a5c3a 0 1.6px,#2a1d12 2.6px 3.6px,transparent 4.6px),
    linear-gradient(180deg,#24170f,#140c08 55%,#1b110b);
  clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.8),inset 0 2px 8px rgba(0,0,0,.9),inset 0 -1px 0 rgba(255,175,120,.06)}
.plaque::before{content:'';position:absolute;inset:4px;pointer-events:none;
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px);
  box-shadow:inset 0 0 0 1px rgba(150,100,60,.14);background-image:var(--tex-grain);background-size:110px;opacity:.6}
#word{flex:1;min-width:0;background:transparent;border:0;outline:none;padding:14px 10px 14px 30px;text-align:center;
  font:500 clamp(19px,2.3vw,23px)/1 var(--f-serif);letter-spacing:.24em;color:#c9a079;caret-color:#b3261e;
  text-shadow:0 -1px 0 rgba(0,0,0,.9),0 1px 0 rgba(255,180,130,.08);user-select:text;-webkit-user-select:text}
#word::placeholder{color:#4e3b2b;font-style:italic;letter-spacing:.12em}
#word:focus{text-shadow:0 -1px 0 rgba(0,0,0,.9),0 0 12px rgba(143,23,27,.55)}
body.unlocked #word{display:none}
.aperire{flex:none;background:none;border:0;border-left:1px solid rgba(0,0,0,.75);box-shadow:-1px 0 0 rgba(255,170,120,.06);cursor:pointer;
  padding:0 24px 0 18px;font:600 12px/1 var(--f-epi);letter-spacing:.38em;text-indent:.38em;color:#9c6b4a;transition:color .4s,text-shadow .4s}
.aperire:hover,.aperire:focus-visible{color:#e0a27a;text-shadow:0 0 12px rgba(143,23,27,.9);outline:none}
body.unlocked .plaque{max-width:220px}
body.unlocked .aperire{flex:1;border:0;box-shadow:none;padding:15px 20px}
.plaque.shake{animation:pshake .5s ease}
@keyframes pshake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
#oracle{min-height:1.5em;margin-top:.6em;font-style:italic;font-size:clamp(13px,1.5vw,15px);color:#a5352c;text-shadow:0 0 10px rgba(143,23,27,.5);transition:opacity .6s}

#bar{flex:none;height:58px;display:flex;align-items:center;justify-content:center;gap:clamp(6px,2.4vw,26px);position:relative;z-index:6;padding:0 10px}
#bar .grp{display:flex;align-items:center;gap:clamp(4px,1.6vw,18px)}
#bar button{background:none;border:0;cursor:pointer;padding:12px 6px;font:600 clamp(10px,1.1vw,11.5px)/1 var(--f-epi);letter-spacing:.3em;text-indent:.3em;
  color:#7a6150;text-shadow:0 1px 0 #000;transition:color .4s,text-shadow .4s,opacity .4s}
#bar button:hover,#bar button:focus-visible,#bar button[aria-current="true"],#bar button[aria-pressed="true"]{color:#cf946a;text-shadow:0 0 12px rgba(143,23,27,.85);outline:none}
#bar button:disabled{opacity:.25;cursor:default}
#bar .dot{color:#3d2a20;font-size:10px}
#bar .arrow{font:400 26px/1 var(--f-serif);letter-spacing:0;text-indent:0;padding:4px 12px;color:#a77d5e}
#folio{font:italic 15px/1 var(--f-hand);color:#8a6d55;min-width:5.5em;text-align:center}
body:not(.phase-closed) .g-closed,body:not(.phase-open) .g-open{display:none!important}
body.phase-opening #bar .g-vulg,body.phase-closing #bar .g-vulg{opacity:0;pointer-events:none}

#sound{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));z-index:20;background:none;border:0;cursor:pointer;
  display:flex;align-items:center;gap:9px;padding:8px;font:600 10px/1 var(--f-epi);letter-spacing:.32em;color:#6a5243;transition:color .4s}
#sound:hover,#sound:focus-visible{color:#cf946a;outline:none}
#sound .bars{display:flex;align-items:flex-end;gap:2px;height:12px}
#sound .bars i{display:block;width:2px;background:currentColor;height:30%;transition:height .4s}
#sound[aria-pressed="true"] .bars i{animation:bars 1.2s ease-in-out infinite}
#sound[aria-pressed="true"] .bars i:nth-child(2){animation-delay:-.4s}
#sound[aria-pressed="true"] .bars i:nth-child(3){animation-delay:-.8s}
#sound[aria-pressed="true"]{color:#b98563}
@keyframes bars{0%,100%{height:25%}50%{height:100%}}

#hint{position:absolute;left:50%;top:max(16px,2.4vh);transform:translate(-50%,-6px);width:min(88vw,620px);text-align:center;z-index:5;pointer-events:none;
  font:italic clamp(13px,1.45vw,15px)/1.4 var(--f-serif);color:#8f7a64;opacity:0;transition:opacity 1.2s ease,transform 1.2s ease;text-shadow:0 1px 2px #000}
#hint.on{opacity:.9;transform:translate(-50%,0)}

#cursor{position:fixed;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border:1px solid rgba(190,125,95,.5);border-radius:50%;
  pointer-events:none;z-index:60;opacity:0;will-change:transform;transition:width .35s,height .35s,margin .35s,border-color .35s,opacity .4s}
#cursor::after{content:'';position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px;border-radius:50%;background:#c42a20;box-shadow:0 0 8px 1px rgba(143,23,27,.9)}
body.has-cursor #cursor.on{opacity:1}
#cursor.hover{width:46px;height:46px;margin:-23px 0 0 -23px;border-color:rgba(160,30,30,.7)}
#cursor.text{opacity:0!important}
body.has-cursor,body.has-cursor *{cursor:none!important}
body.has-cursor #word{cursor:text!important}

:focus-visible{outline:1px solid rgba(190,120,80,.6);outline-offset:3px}

/* qualité réduite (mobile, appareils modestes, ou baisse automatique) */
body.q-low #grain{animation:none}
body.q-low #beams{display:none}
body.q-low #mist{animation:none}
body.q-low .seal-glow{animation:none}
body.q-min #grain,body.q-min .drip .drop{display:none}

/* préférences de réduction des animations */
@media (prefers-reduced-motion:reduce){
  #mist,#beams i,#grain,#aura .a1,.seal-glow,.drip .trail,.drip .drop,#sound .bars i,#book.edge-on .b-fore::after,#book.edge-on .b-top::after{animation:none!important}
  .drip .drop{opacity:0}
  .reveal{transition-duration:.8s}
}
@media (max-width:520px){
  #bar{gap:4px;padding:0 4px}
  #bar .grp{gap:2px}
  #bar .dot{display:none}
  #bar button{letter-spacing:.16em;text-indent:.16em;padding:12px 7px;font-size:10px}
  #bar .arrow{padding:4px 14px}
  #folio{min-width:4.6em;font-size:14px}
  #hint{top:54px}
  .txt p{font-size:calc(var(--bw)*.041*var(--fit,1))}
  .txt .fr p{font-size:calc(var(--bw)*.039*var(--fit,1))}
  .leges li{font-size:calc(var(--bw)*.043*var(--fit,1))}
}
@media (max-height:560px){
  .instr{margin:.3em 0 .5em}
  #word{padding:10px 10px 10px 26px}
  #bar{height:48px}
}