:root{
  --parchment:#e9dcb5;
  --ink:#3b2a17;
  --ink-soft:#5a4426;
  --gold:#b8892b;
  --green:#009f8c;
  --green-light:#74f7d0;
  --page-h:80vh;
  --page-w:calc(var(--page-h) * 0.66);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  min-height:100vh;
  background:radial-gradient(circle at 50% 12%, #34483f 0%, #24312b 45%, #141b17 100%);
  font-family:'Alegreya', serif;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden;
}

/* ---- Barre supérieure ---- */
.topbar{
  position:fixed; top:0; left:0; width:100%;
  display:flex; align-items:center; justify-content:center;
  padding:14px 18px; z-index:50; pointer-events:none;
}
.stage-title{
  color:var(--green-light);
  font-family:'Cinzel', serif; letter-spacing:3px;
  text-shadow:0 2px 6px rgba(0,0,0,.6);
  font-size:clamp(14px,2.2vw,22px); opacity:.9;
}
.lang-toggle{
  position:fixed; right:18px; top:12px; pointer-events:auto;
  font-family:'Cinzel', serif; letter-spacing:2px; font-size:13px;
  background:linear-gradient(#0c5d54,#083f39); color:var(--green-light);
  border:1px solid rgba(116,247,208,.5); border-radius:22px;
  padding:8px 16px; cursor:pointer; transition:.25s;
}
.lang-toggle:hover{ box-shadow:0 0 16px rgba(116,247,208,.35); transform:translateY(-1px); }

.sound-toggle{
  position:fixed; right:74px; top:12px; pointer-events:auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; line-height:1; font-size:16px;
  background:linear-gradient(#0c5d54,#083f39); color:var(--green-light);
  border:1px solid rgba(116,247,208,.5); border-radius:50%;
  cursor:pointer; transition:.25s;
}
.sound-toggle:hover{ box-shadow:0 0 16px rgba(116,247,208,.35); transform:translateY(-1px); }
.sound-toggle.muted{ opacity:.6; border-color:rgba(116,247,208,.28); }
.sound-toggle.muted .sound-icon{ filter:grayscale(1); }

/* ---- Scène 3D ---- */
.book-scene{
  position:relative;
  perspective:2800px; perspective-origin:50% 42%;
  flex:1 1 auto; width:100%;
  display:flex; justify-content:center; align-items:center;
}

/* ---- Marque-pages : petits fanions médiévaux suspendus en haut des pages ---- */
.bm-rail{
  position:absolute;
  top:calc(50% - (var(--page-h) * 0.5) + 3px);    /* juste sous le bord supérieur */
  display:flex; flex-direction:row; align-items:flex-start;
  justify-content:space-evenly; flex-wrap:wrap; gap:4px 10px;
  z-index:6; pointer-events:none;                 /* seuls les fanions captent le clic */
  opacity:0; transition:opacity .3s ease;         /* fondu doux au changement de page */
}
.bm-rail.show{ opacity:1; }
.bm-rail:not(.show) .bm-flag{ pointer-events:none; }
/* Réparti sur toute la largeur de la page (loin de la reliure) */
.bm-left { left:calc(50% - var(--page-w) + 16px); right:calc(50% + 16px); }
.bm-right{ left:calc(50% + 16px); right:calc(50% - var(--page-w) + 16px); }

/* Fanion : bouton = boîte de positionnement (porte l'infobulle, non rognée).
   La bannière interne porte la forme (clip-path) et la couleur (posée en JS, conforme CSP). */
.bm-flag{
  position:relative;
  pointer-events:auto; cursor:pointer;
  width:19px; height:28px; padding:0; border:none; background:transparent;
  transition:transform .16s ease;
}
.bm-banner{
  display:block; width:100%; height:100%;
  border-top:3px solid rgba(160,120,35,.92);         /* hampe dorée en haut */
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
  box-shadow:inset 0 -5px 7px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.35);
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));
  transition:filter .16s ease;
}
.bm-flag:hover{ transform:translateY(3px); }
.bm-flag:hover .bm-banner{ filter:drop-shadow(0 4px 6px rgba(0,0,0,.5)) brightness(1.1); }
@media(max-width:520px){ .bm-flag{ width:16px; height:24px; } }

/* Infobulle stylisée (parchemin + or), à la place du title natif */
.bm-flag::after{
  content:attr(data-label);
  position:absolute; left:50%; top:calc(100% + 8px);
  transform:translateX(-50%) translateY(-4px);
  background:linear-gradient(#efe4c2,#dcc99b);
  color:#3b2a17; font-family:'Cinzel', serif; font-weight:600;
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase; white-space:nowrap;
  padding:6px 12px; border-radius:7px; border:1px solid var(--gold);
  box-shadow:0 8px 20px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.35);
  opacity:0; pointer-events:none; z-index:20;
  transition:opacity .16s ease, transform .16s ease;
}
/* petite pointe vers le drapeau */
.bm-flag::before{
  content:""; position:absolute; left:50%; top:calc(100% + 3px);
  transform:translateX(-50%) translateY(-4px) rotate(45deg);
  width:9px; height:9px; background:#efe4c2;
  border-left:1px solid var(--gold); border-top:1px solid var(--gold);
  opacity:0; pointer-events:none; z-index:20;
  transition:opacity .16s ease, transform .16s ease;
}
.bm-flag:hover::after,
.bm-flag:hover::before{ opacity:1; transform:translateX(-50%) translateY(0) ; }
.bm-flag:hover::before{ transform:translateX(-50%) rotate(45deg); }
.book{
  position:relative;
  width:calc(var(--page-w) * 2); height:var(--page-h);
  transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(.4,.15,.2,1);
  transform:translateX(calc(var(--page-w) * -0.5));
}
.book.opened{ transform:translateX(0); }
.book.closed-end{ transform:translateX(calc(var(--page-w) * 0.5)); }

/* Couverture cartonnée (les "plats") visible en contour quand le livre est ouvert */
.book::before{
  content:""; position:absolute;
  top:-2.6%; bottom:-2.6%; left:-1.6%; right:-1.6%;
  transform:translateZ(-42px);
  border-radius:7px 11px 11px 7px;
  background:
    linear-gradient(135deg,#0f5f55 0%,#0a463f 55%,#062f2a 100%);
  box-shadow:
    0 40px 70px rgba(0,0,0,.6),
    inset 0 0 0 2px rgba(116,247,208,.20),
    inset 0 0 0 10px rgba(0,0,0,.18),
    inset 0 0 60px rgba(0,0,0,.45);
  opacity:0; transition:opacity .15s ease 0s; z-index:-2;
}
/* Le carton n'apparaît que sur les pages intérieures (vraie double page),
   jamais sur la couverture ni la 4e de couverture (sinon une moitié est vide).
   Délai à l'ouverture (page en train de tourner), mais disparition immédiate à la fermeture. */
.book.opened::before{ opacity:1; transition:opacity .4s ease .55s; }
/* léger sillon de reliure au centre */
.book::after{
  content:""; position:absolute; top:-2.6%; bottom:-2.6%; left:50%; width:20px;
  transform:translateX(-50%) translateZ(-40px);
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.5) 45%, rgba(0,0,0,.55) 55%, transparent);
  opacity:0; transition:opacity .15s ease 0s; z-index:-1;
}
.book.opened::after{ opacity:1; transition:opacity .4s ease .55s; }

.edge{
  position:absolute; top:1.5%; height:97%; width:22px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.05) 22%, transparent 40%),
    repeating-linear-gradient(0deg,#efe6c6 0 2px,#d7c699 2px 3px);
  box-shadow:0 22px 42px rgba(0,0,0,.5);
  transition:opacity .5s; z-index:0;
}
.edge-right{ right:0; transform:translateX(100%) translateZ(-4px); border-radius:0 6px 6px 0; }
.edge-left { left:0;  transform:translateX(-100%) translateZ(-4px) scaleX(-1); border-radius:6px 0 0 6px; }
.book:not(.opened):not(.closed-end) .edge-left{ opacity:0; }
.book.opened .edge{ opacity:0; }
.book.closed-end .edge-right{ opacity:0; }

/* ---- Feuilles ---- */
.paper{
  position:absolute; top:0; left:50%; width:50%; height:100%;
  transform-style:preserve-3d; transform-origin:left center;
  transition:transform 1.15s cubic-bezier(.45,.05,.25,1);
}
.paper.flipped{ transform:rotateY(-180deg); }

.page-face{
  position:absolute; top:0; left:0; width:100%; height:100%;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  overflow:hidden;
  background-color:#e8dab0;
  background-image:
    radial-gradient(circle at 50% 42%, rgba(255,251,232,.55), rgba(255,251,232,0) 70%),
    radial-gradient(circle at 16% 18%, rgba(150,112,52,.13), transparent 46%),
    radial-gradient(circle at 84% 82%, rgba(140,102,46,.15), transparent 46%),
    radial-gradient(circle at 76% 22%, rgba(120,86,38,.09), transparent 40%),
    repeating-linear-gradient(93deg, rgba(120,90,40,.032) 0 1px, transparent 1px 6px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: cover, cover, cover, cover, auto, 180px 180px;
  background-blend-mode: normal, multiply, multiply, multiply, normal, multiply;
  color:var(--ink);
  box-shadow:0 22px 45px rgba(0,0,0,.45);
}
.page-face::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  box-shadow:
    inset 0 0 90px rgba(90,60,20,.42),
    inset 0 0 10px rgba(90,60,20,.30);
}
.front{ transform:rotateY(0deg); }
.back{ transform:rotateY(180deg); }

/* zone de contenu défilante */
.page-scroll{
  position:absolute; inset:0; z-index:2;
  overflow-y:auto; overflow-x:hidden;
  padding:clamp(26px,4vh,50px) clamp(22px,3vw,42px) clamp(34px,5vh,54px);
  scrollbar-width:thin; scrollbar-color:var(--gold) transparent;
}
.page-scroll::-webkit-scrollbar{ width:8px; }
.page-scroll::-webkit-scrollbar-thumb{ background:var(--gold); border-radius:8px; }
.gutter-shadow{
  position:absolute; top:0; left:0; width:11%; height:100%; z-index:3;
  background:linear-gradient(90deg, rgba(70,45,15,.4), transparent); pointer-events:none;
}
.back .gutter-shadow{ left:auto; right:0; transform:scaleX(-1); }

/* ---- Couvertures ---- */
.cover, .back-cover{
  background:
    radial-gradient(circle at 50% 34%, #0f6f63, #0a4f47 55%, #06322d),
    #06322d;
  color:var(--green-light);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:8%;
  box-shadow:inset 0 0 0 3px rgba(116,247,208,.45), inset 0 0 0 12px rgba(116,247,208,.12), 0 25px 50px rgba(0,0,0,.55);
}
.cover{ border-radius:4px 8px 8px 4px; }
.back-cover{ border-radius:8px 4px 4px 8px; }
.cover::after, .back-cover::after{ box-shadow:none; }
.cover .ornament, .back-cover .ornament{ font-size:clamp(38px,7vh,60px); margin-bottom:16px; text-shadow:0 2px 8px rgba(0,0,0,.6); }
.cover h1{
  font-family:'UnifrakturMaguntia', cursive; font-size:clamp(40px,8vh,64px);
  margin:0 0 12px; line-height:1.02; color:#bff6e6; text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.cover .subtitle{ font-family:'Cinzel', serif; letter-spacing:4px; font-size:clamp(11px,1.5vw,15px); opacity:.85; }
.cover .cta{ margin-top:34px; font-family:'MedievalSharp', cursive; font-size:15px; opacity:.7; animation:pulse 2.4s infinite; }
@keyframes pulse{0%,100%{opacity:.4;}50%{opacity:.95;}}
.back-cover p{ font-family:'Cinzel', serif; letter-spacing:2px; font-size:clamp(11px,1.4vw,14px); opacity:.85; max-width:80%; line-height:1.7; }

/* ---- Contenu générique ---- */
.tc{ text-align:center; }
.tc-i{ font-style:italic; }
.tc-dim{ opacity:.8; }
.page-head{ text-align:center; margin-bottom:10px; }
.page-head .kicker{ font-family:'Cinzel', serif; letter-spacing:4px; font-size:clamp(9px,1.2vw,11px); color:var(--gold); text-transform:uppercase; }
.page-head h2{ font-family:'UnifrakturMaguntia', cursive; font-size:clamp(26px,4.6vh,38px); color:var(--ink-soft); margin:2px 0 0; }
.illum{ text-align:center; font-size:clamp(28px,5vh,44px); color:var(--gold); margin:6px 0; }
.rule{ text-align:center; color:var(--gold); font-size:18px; margin:10px 0; opacity:.7; }
.page-face p{ font-size:clamp(13px,1.75vh,17px); line-height:1.6; text-align:justify; margin:0 0 .7em; }
.folio{ position:absolute; bottom:14px; left:0; width:100%; text-align:center; z-index:2;
  font-family:'Cinzel', serif; font-size:clamp(9px,1.2vw,12px); color:var(--ink-soft); opacity:.6; }

/* ---- Home ---- */
.home-pic{ display:block; width:clamp(120px,26vh,190px); height:clamp(120px,26vh,190px);
  margin:0 auto 14px; border-radius:50%; object-fit:cover;
  border:3px solid var(--green); box-shadow:0 6px 18px rgba(0,0,0,.35); }
.home-name{ font-family:'UnifrakturMaguntia', cursive; text-align:center; font-size:clamp(30px,5vh,44px); color:var(--ink-soft); margin:0; }
.home-sub{ text-align:center; color:var(--green); font-weight:700; margin:.2em 0; }
.home-links{ display:flex; flex-direction:column; gap:12px; margin-top:14px; align-items:center; }
.home-link{
  display:block; width:min(85%,340px); text-align:center; text-decoration:none;
  font-family:'Cinzel', serif; letter-spacing:1px; font-size:clamp(12px,1.5vh,15px);
  color:var(--green); border:2px solid var(--green); border-radius:26px; padding:10px 14px;
  transition:.2s; background:rgba(0,159,140,.05);
}
.home-link:hover{ transform:scale(1.04); box-shadow:0 0 14px rgba(0,159,140,.3); color:var(--green); }
.home-link.primary{ background:var(--green); color:#eafffb; }
.home-link.primary:hover{ color:#eafffb; }

/* ---- TOS ---- */
.tos-item{ font-size:clamp(13px,1.7vh,16px); line-height:1.55; text-align:left; margin:0 0 .65em; }

/* ---- Commissions ---- */
.price-lines{ list-style:none; padding:0; margin:6px 0 12px; text-align:center; }
.price-lines li{ font-size:clamp(13px,1.7vh,16px); font-weight:700; color:var(--ink-soft); margin:.2em 0; }
.gallery{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:6px; }
.frame{
  border:3px solid var(--green); border-radius:6px; overflow:hidden; background:#0000000d;
  width:clamp(110px,20vh,160px); height:clamp(110px,20vh,160px);
}
.frame.large{ width:clamp(160px,42vh,340px); }
.frame img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- Contrôles ---- */
.controls{ margin:clamp(8px,2vh,22px) 0 4px; display:flex; gap:14px; align-items:center; }
.btn-book{
  font-family:'Cinzel', serif; letter-spacing:2px; background:linear-gradient(#0c5d54,#083f39);
  color:var(--green-light); border:1px solid rgba(116,247,208,.5); padding:9px 20px; border-radius:26px;
  cursor:pointer; transition:.25s; font-size:13px; min-width:70px;
}
.btn-book:hover:not(:disabled){ box-shadow:0 0 16px rgba(116,247,208,.35); }
.btn-book:disabled{ opacity:.35; cursor:not-allowed; }
.progress-label{ color:var(--green-light); font-family:'Cinzel', serif; font-size:12px; letter-spacing:2px; min-width:90px; text-align:center; opacity:.85; }
.hint{ color:var(--parchment); opacity:.4; font-size:11px; margin-bottom:8px; letter-spacing:1px; }

.loading{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:#141b17; color:var(--green-light); font-family:'Cinzel', serif; letter-spacing:3px; z-index:100;
  transition:opacity .6s; }
.loading.hidden{ opacity:0; pointer-events:none; }

@media(max-width:820px){ :root{ --page-h:62vh; --page-w:calc(var(--page-h) * 0.7); } }
@media(max-width:520px){ :root{ --page-h:56vh; --page-w:calc(var(--page-h) * 0.72); } }