:root {
  --violet-profond: #160b29;
  --aubergine: #2c1750;
  --or: #c9a64a;
  --or-clair: #e7c66b;
  --or-fonce: #8a6a1f;          /* titres/filets lisibles sur crème */
  --parchemin: #efe7cf;
  --encre: #3a2a18;             /* texte sur parchemin */
  --encre-pale: #6a5436;
  --pivoine: #e58fb1;
  --pivoine-fonce: #b5527d;     /* accent lisible sur crème */
  --lilas: #c8b6e8;
  --cuir1: #5a2e12;
  --cuir2: #341607;
  --cuir3: #200d04;
  --font-titre: 'Cinzel', serif;
  --font-corps: 'EB Garamond', Georgia, serif;
  --font-main: 'Caveat', cursive;
  --measure: 30rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-corps);
  font-size: clamp(15px, 2.4vw, 18px);
  line-height: 1.6;
  background: radial-gradient(ellipse at 50% 26%, var(--aubergine), var(--violet-profond) 74%);
  color: var(--parchemin);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
#grimoire { position: relative; width: 100%; height: 100%; overflow: hidden; }

/* ---------- Fond féerique derrière le livre ---------- */
.backdrop { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: center/cover no-repeat url("assets/img/backdrop.png");
  opacity: .55; filter: saturate(.95) brightness(.6); }

/* ---------- Ambiance bougie + vignette ---------- */
.ambiance { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 44%, transparent 42%, rgba(8,3,18,.55) 100%); }
.candle   { position: absolute; inset: 0; background: radial-gradient(circle at 50% 38%, rgba(255,196,120,.12), transparent 56%); animation: flicker 5s ease-in-out infinite; }
@keyframes flicker { 0%,100% { opacity: .8; } 20% { opacity: 1; } 45% { opacity: .62; } 65% { opacity: .96; } 80% { opacity: .72; } }

/* ---------- Décor : particules (autour du livre) ---------- */
.decor { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.petal, .fairy { position: absolute; top: -6vh; will-change: transform; }
.petal svg { width: 20px; height: 22px; display: block; }
.fairy { filter: drop-shadow(0 0 5px var(--or-clair)); }
.fairy svg { width: 26px; height: 26px; display: block; }
.petal { animation: fall linear forwards; }
.fairy { animation: drift linear forwards; }
@keyframes fall { to { transform: translateY(118vh) rotate(360deg); opacity: .2; } }
@keyframes drift { to { transform: translate(var(--dx, 10vw), 118vh); opacity: 0; } }
.ember { position: absolute; bottom: -2vh; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, #f0d987, rgba(240,217,135,0) 70%);
  box-shadow: 0 0 6px #f0d987; opacity: 0; animation: emberRise linear forwards; }
@keyframes emberRise { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--ex, 2vw), -112vh); } }

/* ============================================================ */
/* LE LIVRE 3D                                                  */
/* ============================================================ */
.scene { position: absolute; inset: 0; display: grid; place-items: center; z-index: 10;
  perspective: 2800px; perspective-origin: 50% 44%; }

.book {
  position: relative; width: 370px; height: 552px;
  transform-style: preserve-3d;
  transform: translateX(0);
  transition: transform 1.1s ease;
}
.book.opened { transform: translateX(50%); }  /* desktop : recentre le dos */

/* Bloc d'épaisseur (tranche) + 4e de couverture */
.block {
  position: absolute; top: 0; left: 0; right: -9px; bottom: -7px; border-radius: 4px 7px 7px 4px;
  background: linear-gradient(135deg, #efe6cc, #e2d4ad);
  box-shadow: 0 22px 44px rgba(0,0,0,.5);
  transform: translateZ(-2px);
}
.block::after { content: ''; position: absolute; top: 2px; bottom: 0; right: 0; width: 9px;
  background: repeating-linear-gradient(to right, #e9dcbe 0 1px, #d4c39a 1px 2px); border-radius: 0 6px 6px 0; }
.block::before { content: ''; position: absolute; left: 2px; right: 0; bottom: 0; height: 7px;
  background: repeating-linear-gradient(to bottom, #e9dcbe 0 1px, #d4c39a 1px 2px); border-radius: 0 0 6px 6px; }

/* Dos (spine) à gauche */
.spine { position: absolute; top: -4px; bottom: -4px; left: -10px; width: 24px;
  background: linear-gradient(90deg, var(--cuir3), var(--cuir1) 60%, var(--cuir2));
  border-radius: 7px 2px 2px 7px;
  box-shadow: inset -2px 0 4px rgba(0,0,0,.5), -3px 0 10px rgba(0,0,0,.4);
  transform: translateZ(-1px); z-index: 0; }

/* Zone de retour (page de gauche cliquable) + coin qui se soulève */
.left-zone { position: absolute; top: 0; bottom: 0; right: 100%; width: 100%; z-index: 40; cursor: pointer; display: none; }
.book.canprev .left-zone { display: block; }
.left-zone::after { content: ''; position: absolute; left: 24px; bottom: 8px; width: 30px; height: 30px;
  background: linear-gradient(225deg, rgba(0,0,0,0) 46%, #cdbb8e 47%, #efe6cc 72%);
  border-bottom-left-radius: 5px; box-shadow: 6px -6px 12px rgba(90,60,20,.22); opacity: .65;
  transition: width .28s ease, height .28s ease, opacity .28s ease, box-shadow .28s ease; }
.left-zone:hover::after { width: 58px; height: 58px; opacity: 1; box-shadow: 9px -9px 20px rgba(90,60,20,.4); }

/* Feuillets reliés au dos (bord gauche) */
.leaf {
  position: absolute; inset: 0;
  transform-origin: left center; transform-style: preserve-3d;
  transition: transform 1.15s cubic-bezier(.4,.08,.2,1);
  transform: rotateY(0deg);
}
.leaf.turned { transform: rotateY(-162deg); }
.face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  /* Firefox n'honore backface-visibility QUE si la face est un élément
     transformé en 3D. La face avant n'avait aucun transform → son dos
     s'affichait en miroir sous FF. translateZ(0.01px) reste une matrice
     3D (non simplifiée en 2D, contrairement à rotateY(0deg)) et est
     totalement invisible. (.face.back garde rotateY(180deg) ci-dessous.) */
  transform: translateZ(0.01px);
  border-radius: 4px 9px 9px 4px; overflow: hidden;
  /* NB : PAS d'overflow:hidden ici — sous Firefox, overflow sur une face
     en backface-visibility:hidden aplatit le rendu et fait transparaître
     le dos en miroir. Le clipping nécessaire est fait via border-radius. */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 30px 26px; text-align: center;
}
.face.back { transform: rotateY(180deg); }

/* ---------- Couverture cuir (= sceau) ---------- */
.cover-front {
  background:
    radial-gradient(ellipse at 38% 28%, rgba(255,210,150,.10), transparent 60%),
    linear-gradient(135deg, var(--cuir1), var(--cuir2) 55%, var(--cuir3));
  box-shadow: inset 0 0 0 2px rgba(201,166,74,.55), inset 0 0 0 7px rgba(201,166,74,.10), inset 0 0 60px rgba(0,0,0,.5);
  color: var(--or-clair);
}
.cnr { position: absolute; width: 46px; height: 46px; opacity: .85; }
.cnr svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 3px rgba(231,198,107,.5)); }
.c-tl { top: 12px; left: 12px; } .c-tr { top: 12px; right: 12px; transform: rotate(90deg); }
.c-br { bottom: 12px; right: 12px; transform: rotate(180deg); } .c-bl { bottom: 12px; left: 12px; transform: rotate(270deg); }
.seal-emblem { width: 92px; height: 92px; filter: drop-shadow(0 0 10px rgba(231,198,107,.5)); margin-bottom: 10px; animation: pulse 4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.cover-title { font-family: var(--font-titre); font-weight: 700; font-size: 1.95rem; line-height: 1.15; letter-spacing: .03em;
  text-shadow: 0 2px 4px rgba(0,0,0,.6), 0 0 16px rgba(231,198,107,.25); }
.cover-hint { font-family: var(--font-main); font-size: 1.35rem; color: var(--parchemin); margin: 14px 0 6px; }
.seal-form { display: flex; flex-direction: column; gap: .6rem; width: 84%; max-width: 17rem; }
.seal-input { font-family: var(--font-corps); font-size: 1.05rem; padding: .55rem .8rem; border-radius: .35rem; border: 1px solid var(--or); background: rgba(243,231,201,.95); color: var(--encre); text-align: center; }
.seal-submit { font-family: var(--font-titre); font-size: .95rem; padding: .55rem .8rem; border-radius: .35rem; border: none; background: var(--or); color: var(--cuir3); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.seal-submit:hover { background: var(--or-clair); box-shadow: 0 0 16px rgba(240,217,135,.6); }
.seal-error { color: var(--pivoine); font-family: var(--font-main); font-size: 1.2rem; min-height: 1.4rem; margin-top: .6rem; }

/* ---------- Pages parchemin ---------- */
.page--chapter, .page--verso {
  color: var(--encre);
  box-shadow: inset 0 0 34px rgba(120,86,36,.28), inset 0 0 3px rgba(60,40,16,.4), inset 22px 0 26px rgba(120,86,36,.16);
}
.page--chapter { background: radial-gradient(ellipse at 50% 38%, #f6eed6, #efe3c2 62%, #e2d0a6); }
.page--verso  { background: radial-gradient(ellipse at 50% 40%, #f1e8cf, #e6d8b4 70%, #d8c79c); }
.page--chapter::after, .page--verso::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: multiply;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.verso-mark { width: 96px; height: 96px; opacity: .18; }

/* ---------- Chapitres : texte encre ---------- */
.chapter-label { font-family: var(--font-titre); color: var(--or-fonce); letter-spacing: .24em; text-transform: uppercase; font-size: .72rem; font-weight: 700; margin-bottom: 1.1rem; }
.chapter-label::after { content: ''; display: block; width: 3rem; height: 1px; margin: .6rem auto 0; background: linear-gradient(90deg, transparent, var(--or-fonce), transparent); }
.chapter-body { font-size: 1.08rem; line-height: 1.7; margin-bottom: .85rem; color: var(--encre); max-width: var(--measure); }
.chapter-body em { color: var(--pivoine-fonce); font-style: italic; }
.chapter-body strong, .heart-line strong { color: var(--pivoine-fonce); font-weight: 600; }
.dropcap {
  float: left; font-family: var(--font-titre); font-weight: 700; font-size: 3rem; line-height: .72;
  margin: .1rem .5rem 0 0; padding: .16rem .3rem; color: var(--or-fonce);
  background: radial-gradient(circle at 32% 28%, rgba(181,82,125,.18), rgba(138,106,31,.14) 68%, transparent);
  border: 1px solid rgba(138,106,31,.55); border-radius: .25rem; text-shadow: 0 1px 2px rgba(120,86,36,.45);
}

/* Révélations quand la page est affichée (.showing) ; visibles par défaut sans JS */
.page--chapter.showing .chapter-label { animation: fadeUp .6s ease .1s both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page--chapter:not(.page--heart).showing .chapter-body { animation: scribe .85s ease both; }
.page--chapter:not(.page--heart).showing .chapter-body:nth-of-type(2) { animation-delay: .5s; }
.page--chapter:not(.page--heart).showing .chapter-body:nth-of-type(3) { animation-delay: 1.1s; }
.page--chapter:not(.page--heart).showing .chapter-body:nth-of-type(4) { animation-delay: 1.7s; }
@keyframes scribe { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.page--chapter.showing .dropcap { animation: capGlow 3.2s ease-in-out infinite; }
@keyframes capGlow { 0%,100% { text-shadow: 0 1px 2px rgba(120,86,36,.4); } 50% { text-shadow: 0 0 12px rgba(231,198,107,.7); } }

/* ---------- Planche illustrée (cadre doré) ---------- */
/* Illustration fondue dans le parchemin (bords dissipés + teinte manuscrit + grain) */
.plate { position: relative; max-width: 54%; margin-bottom: .7rem; align-self: center;
  -webkit-mask-image: radial-gradient(ellipse 75% 77% at 50% 46%, #000 48%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(ellipse 75% 77% at 50% 46%, #000 48%, rgba(0,0,0,0) 100%); }
.plate img { display: block; width: 100%; filter: sepia(.18) saturate(.88) brightness(1.04) contrast(.95); }
.plate::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.plate--verso { max-width: 64%; margin-bottom: 0; }
.plate--mobileonly { display: none; }   /* illustration affichée seulement sur mobile (le verso la porte sur ordi) */

/* Apparition « qui se développe » (flou -> net) quand la page s'affiche */
.page--chapter.showing .plate img { animation: plateDevelop 1.2s ease both; }
@keyframes plateDevelop {
  from { opacity: 0; filter: sepia(.18) saturate(.88) brightness(1.04) contrast(.95) blur(9px); }
  to   { opacity: 1; filter: sepia(.18) saturate(.88) brightness(1.04) contrast(.95) blur(0); }
}

/* ---------- Potion ---------- */
.cauldron { position: relative; margin: .6rem 0; transition: transform .3s; }
.cauldron img { width: 84px; height: 84px; display: block; margin: 0 auto; filter: drop-shadow(0 0 8px rgba(212,175,55,.4)); }
.cauldron.bubbling { animation: bubble .6s ease; }
@keyframes bubble { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.08); } }
.ingredients { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: .6rem 0; }
.ingredient { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-corps); font-size: .95rem; padding: .42rem .7rem; border-radius: 2rem; border: 1px solid var(--or-fonce); background: rgba(138,106,31,.08); color: var(--encre); cursor: pointer; transition: all .2s; }
.ingredient:hover { background: rgba(138,106,31,.18); box-shadow: 0 0 10px rgba(201,166,74,.4); }
.ingredient.used { opacity: .4; text-decoration: line-through; cursor: default; }
.ic { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
.potion-result { font-family: var(--font-main); font-size: 1.5rem; color: var(--pivoine-fonce); min-height: 1.8rem; margin-top: .6rem; opacity: 0; transition: opacity .6s; }
.potion-result.show { opacity: 1; }
.smoke { position: absolute; width: 16px; height: 16px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(228,135,176,.5), rgba(228,135,176,0) 70%); animation: smokeRise 2.8s ease-out forwards; }
@keyframes smokeRise { 0% { opacity: 0; transform: translateY(0) scale(.6); } 22% { opacity: .7; } 100% { opacity: 0; transform: translateY(-58px) scale(1.7); } }

/* Fines volutes aux narines du bébé dragon */
.dragon-plate { position: relative; }
.dragon-smoke { position: absolute; top: 48%; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; opacity: 0; z-index: 2; filter: blur(1.5px);
  background: radial-gradient(circle, rgba(250,248,255,.92), rgba(250,248,255,0) 70%); animation: dragonNostril 3.4s ease-out forwards; }
@keyframes dragonNostril { 0% { opacity: 0; transform: translate(-50%, 0) scale(.4); } 15% { opacity: .85; } 55% { opacity: .5; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 3px)), -46px) scale(2.7); } }

/* ---------- Le cœur ---------- */
.heart-line { font-size: 1.12rem; line-height: 1.75; margin-bottom: .7rem; max-width: var(--measure); }
.page--heart.showing .heart-line { opacity: 0; transform: translateY(10px); animation: rise .9s ease forwards; }
.page--heart.showing .heart-line:nth-of-type(2) { animation-delay: .2s; }
.page--heart.showing .heart-line:nth-of-type(3) { animation-delay: 1.0s; }
.page--heart.showing .heart-line:nth-of-type(4) { animation-delay: 1.8s; }
.page--heart.showing .heart-line:nth-of-type(5) { animation-delay: 2.6s; }
.page--heart.showing .heart-line:nth-of-type(6) { animation-delay: 3.4s; }
.page--heart.showing .heart-line:nth-of-type(7) { animation-delay: 4.2s; }
.heart-final { font-family: var(--font-titre); color: var(--or-fonce); font-size: 1.5rem; margin-top: .3rem; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Dernier feuillet ---------- */
.wish-btn { font-family: var(--font-titre); font-size: 1rem; padding: .7rem 1.2rem; border-radius: .4rem; border: 1px solid var(--or-fonce); background: transparent; color: var(--or-fonce); cursor: pointer; margin-top: .8rem; transition: transform .2s, box-shadow .2s; }
.wish-btn:hover { transform: translateY(-2px); box-shadow: 0 0 16px rgba(201,166,74,.45); }
.wish-result { font-family: var(--font-main); font-size: 1.5rem; color: var(--pivoine-fonce); min-height: 1.8rem; margin-top: .8rem; opacity: 0; transition: opacity .8s; }
.wish-result.show { opacity: 1; }

/* ---------- Page de signature ---------- */
.page--signature { justify-content: center; }
.sign-orn { color: var(--or-fonce); font-size: 1.3rem; letter-spacing: .5rem; opacity: .8; margin-bottom: 1.6rem; }
.sign-quote { font-family: var(--font-corps); font-style: italic; font-size: 1.25rem; line-height: 1.7; color: var(--encre); max-width: 26rem; }
.sign-name { position: absolute; bottom: 12%; right: 10%; font-family: var(--font-main); font-size: 1.5rem; color: var(--or-fonce); text-shadow: 0 1px 2px rgba(120,86,36,.3); }
.sign-next { position: absolute; bottom: 6.5%; right: 10%; font-family: var(--font-corps); font-style: italic; font-size: .8rem; color: var(--encre-pale); opacity: .75; }
.page--signature.showing .sign-orn   { animation: signRise .8s ease .2s both; }
.page--signature.showing .sign-quote { animation: signRise .9s ease .7s both; }
.page--signature.showing .sign-name  { animation: signRise .9s ease 1.6s both; }
.page--signature.showing .sign-next  { animation: signRise .9s ease 2.3s both; }
@keyframes signRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* La fée qui emporte le vœu et s'éloigne */
.wish-fairy { position: fixed; left: 50%; top: 60%; z-index: 60; width: 96px; height: 116px; pointer-events: none; opacity: 0; transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 14px rgba(231,198,107,.6)); }
.wish-fairy svg { width: 100%; height: 100%; display: block; }
.wish-fairy .wf-wings { transform-box: fill-box; transform-origin: center; animation: wingFlutter .36s ease-in-out infinite; }
@keyframes wingFlutter { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.8); } }
.wish-fairy.fly { animation: fairyFlyAway 4.2s ease-in forwards; }
@keyframes fairyFlyAway {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  18%  { opacity: 1; transform: translate(-50%, -55%) scale(1); }
  45%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + 28vw), calc(-50% - 66vh)) scale(.08) rotate(-8deg); }
}

/* ---------- Corne de page (suivant) ---------- */
.curl { position: absolute; bottom: 0; right: 0; width: 52px; height: 52px; border: none; padding: 0; background: transparent; cursor: pointer; z-index: 25; }
.curl::before { content: ''; position: absolute; right: 0; bottom: 0; width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(0,0,0,0) 46%, #cdbb8e 47%, #efe6cc 72%);
  border-bottom-right-radius: 5px; box-shadow: -5px -5px 12px rgba(90,60,20,.28);
  transition: width .28s ease, height .28s ease, box-shadow .28s ease; }
.curl:hover::before { width: 148%; height: 148%; box-shadow: -9px -9px 20px rgba(90,60,20,.4); }

/* ---------- Son ---------- */
.sound-toggle { position: fixed; top: 2vh; right: 2vw; z-index: 40; width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 1px solid var(--or); background: rgba(42,17,64,.7); color: var(--or); font-size: 1.2rem; cursor: pointer; }
.sound-toggle.muted { opacity: .5; }

/* ---------- V2 MOBILE : carrousel « on feuillette » ----------- */
/* Chaque face (illustration OU texte) = une page plein écran ;   */
/* on passe d'une page à l'autre d'un glissement (scroll-snap).   */
@media (max-width: 760px) {
  .scene { perspective: none; display: block; }

  .book {
    position: relative;
    width: 100vw; height: 100vh; height: 100dvh;
    transform: none !important;
    transform-style: flat;
    display: flex; flex-flow: row nowrap;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .book::-webkit-scrollbar { display: none; }

  /* le décor d'épaisseur/dos du livre n'a plus de sens ici */
  .block, .spine, .left-zone { display: none !important; }

  /* les feuillets s'effacent : leurs deux faces deviennent des pages sœurs */
  .leaf { display: contents; }

  .face {
    position: relative !important; inset: auto !important;
    transform: none !important;
    -webkit-backface-visibility: visible; backface-visibility: visible;
    flex: 0 0 100vw; width: 100vw;
    height: 100vh; height: 100dvh;
    scroll-snap-align: start;
    border-radius: 0;
    overflow-y: auto; overflow-x: hidden;   /* texte long → défile dans la page */
    justify-content: flex-start;            /* pour pouvoir scroller le texte depuis le haut */
    padding: 8vh 8vw;
  }
  /* pages « illustration » et sceau : contenu centré verticalement */
  .page--verso, .cover-front { justify-content: center; }

  /* Verrouillage : avant ouverture, on ne montre QUE le sceau (feuillet 0 recto) */
  .book:not(.opened) .leaf:not([data-leaf="0"]) { display: none; }
  .book:not(.opened) .leaf[data-leaf="0"] .face.back { display: none; }
  /* une fois ouvert, on masque le sceau → on démarre sur la 1re vraie page */
  .book.opened .leaf[data-leaf="0"] .face.front { display: none; }

  /* navigation = glissement : plus de corne, ni de doublon d'illustration */
  .curl { display: none !important; }
  .plate--mobileonly { display: none !important; }

  /* illustration au sein d'une page de texte : plus discrète (moins de scroll) */
  .plate { max-width: 50%; }
  /* illustration en page dédiée (verso) : plein écran */
  .plate--verso { max-width: 88%; margin: 0 auto; }

  .cover-title { font-size: 1.7rem; }
}

/* ---------- Réduction des animations ---------- */
@media (prefers-reduced-motion: reduce) {
  .book, .leaf { transition: none !important; }
  .petal, .fairy, .ember, .smoke, .dragon-smoke { display: none !important; }
  .candle, .seal-emblem { animation: none !important; }
  .page--chapter.showing .chapter-body,
  .page--chapter.showing .chapter-label,
  .page--heart.showing .heart-line,
  .page--chapter.showing .dropcap { animation: none !important; opacity: 1 !important; clip-path: none !important; transform: none !important; }
  .page--chapter.showing .plate img { animation: none !important; opacity: 1 !important; filter: sepia(.18) saturate(.88) brightness(1.04) contrast(.95) !important; }
  .page--signature.showing .sign-orn,
  .page--signature.showing .sign-quote,
  .page--signature.showing .sign-name,
  .page--signature.showing .sign-next { animation: none !important; opacity: 1 !important; transform: none !important; }
}