/* alchimiste/alchimiste.css — « Le Chaudron des Transmutations » */
:root {
  --ink: #f3ecff; --dim: #b9aed6; --or: #ffd36a; --vert: #8dffc0; --rose: #ff8ad8; --cyan: #7fe0ff; --rouge: #ff9a8a;
  --panel: rgba(18, 10, 34, .88); --bord: rgba(255, 211, 106, .28); --sw: 1024px;
  --u: calc(var(--sw) / 1280);          /* 1 unité du monde du canvas, en pixels écran */
  --serif: "Times New Roman", Times, Cambria, "Cambria Math", serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.expr, .formule, .cible, .fiole, .cristal, .essais, .compare, .grimoire .ex { font-variant-numeric: lining-nums; }
html, body { margin: 0; background: #07040d; color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-tap-highlight-color: transparent; }
body { overflow-x: hidden; }
.wrap { position: relative; z-index: 1; width: var(--sw); max-width: 100%; margin: 0 auto; }

/* ── Bandeau ─────────────────────────────────────────────────────────────── */
.fv-header { display: flex; align-items: center; gap: 8px; padding: 6px 8px; min-height: 50px; background: linear-gradient(180deg, #1a0f30, #0f0820); border-bottom: 1px solid var(--bord); }
.fv-header .titre { flex: 1; min-width: 0; font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-header .titre small { color: var(--dim); font-weight: 400; }
.pastille { flex: none; display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.06); border: 1px solid var(--bord); border-radius: 99px; padding: 6px 11px; font-size: .88rem; color: var(--ink); text-decoration: none; }
.pastille b { color: var(--or); }
button.pastille, .btn-rond { cursor: pointer; font: inherit; }
.btn-rond { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--bord); background: rgba(255,255,255,.06); color: var(--ink); font-size: 1.05rem; padding: 0; }
.btn-rond:active, button.pastille:active { transform: scale(.94); }

/* ── Scène ───────────────────────────────────────────────────────────────── */
.scene { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.calque { position: absolute; pointer-events: none; }

/* Grimoire : la formule à obtenir, sur les pages du livre */
.cible { left: calc(470 * var(--u)); top: calc(30 * var(--u)); width: calc(440 * var(--u)); height: calc(132 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.cible .etiquette { font: italic 700 calc(19 * var(--u)) var(--serif); color: #6b4220; letter-spacing: .04em; }
.cible .f { font: 400 calc(44 * var(--u)) var(--serif); color: #2a1406; text-shadow: 0 0 calc(10 * var(--u)) rgba(255, 220, 140, .9); white-space: nowrap; line-height: 1.25; }
.cible.brille .f { animation: encre 1.6s ease-out; }
@keyframes encre { 0% { color: #fff6c8; text-shadow: 0 0 30px #ffd36a, 0 0 60px #ffb020; } 100% { color: #2a1406; } }

/* L'expression qui flotte dans les vapeurs du chaudron */
.vapeur { left: calc(270 * var(--u)); top: calc(250 * var(--u)); width: calc(900 * var(--u)); height: calc(220 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: auto; cursor: pointer; }
.formule { font: 400 calc(56 * var(--u)) var(--serif); color: #fff; white-space: nowrap; transform-origin: center; line-height: 1.35;
  text-shadow: 0 0 calc(14 * var(--u)) var(--lueur, rgba(140,255,190,.9)), 0 2px 4px rgba(0,0,0,.85); }
.formule .nd { display: inline-block; border-radius: calc(10 * var(--u)); transition: background-color .2s, box-shadow .2s; padding: 0 .02em; }
.formule .op { display: inline-block; margin: 0 .22em; }
.formule .op.fois { margin: 0 .16em; }
.formule .pa { display: inline-block; color: #ffe9b0; }
/* 𝑥 (U+1D465) est déjà italique : police mathématique, pas de faux italique (20/10/2026) */
.vx, .expr .vx, .formule .vx { font-family: "Cambria Math", "STIX Two Math", "Latin Modern Math", "Noto Sans Math", "Times New Roman", serif; font-style: normal; font-weight: normal; }
.expr .op, .cible .op, .essais .op, .fiole .op, .cristal .op { display: inline-block; margin: 0 .2em; }
.expr .op.fois, .essais .op.fois { margin: 0 .12em; }
.op.un, .formule .op.un, .expr .op.un, .cible .op.un, .essais .op.un { margin: 0 .04em 0 0; }
sup { font-size: .6em; vertical-align: .62em; line-height: 0; }
.formule .nd.sel { background: rgba(255, 220, 130, .2); box-shadow: 0 0 0 calc(3 * var(--u)) rgba(255, 215, 110, .95), 0 0 calc(26 * var(--u)) rgba(255, 200, 90, .75); animation: palpite 1.4s ease-in-out infinite; }
.formule .nd.sel .nd.sel { animation: none; }
@keyframes palpite { 50% { box-shadow: 0 0 0 calc(3 * var(--u)) rgba(255, 235, 160, 1), 0 0 calc(40 * var(--u)) rgba(255, 210, 100, .95); } }
.formule .nd.indice { box-shadow: 0 0 0 calc(3 * var(--u)) rgba(130, 220, 255, .95), 0 0 calc(30 * var(--u)) rgba(100, 200, 255, .8); animation: palpite-i 1s ease-in-out infinite; }
@keyframes palpite-i { 50% { background: rgba(130, 220, 255, .22); } }
.formule .nd.neuf { animation: nait .75s cubic-bezier(.2, 1.4, .4, 1) both; }
.formule .nd.jaillit { animation: jaillit 1s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes nait { 0% { transform: scale(.2); opacity: 0; filter: brightness(2.5); } 60% { opacity: 1; } 100% { transform: none; filter: none; } }
@keyframes jaillit { 0% { transform: translateY(calc(260 * var(--u))) scale(.2); opacity: 0; filter: brightness(2.5); } 55% { opacity: 1; filter: brightness(1.8); } 100% { transform: none; filter: none; } }
.formule.tremble { animation: tremble .5s linear; }
@keyframes tremble { 20%, 60% { transform: translateX(-8px) rotate(-1deg); } 40%, 80% { transform: translateX(8px) rotate(1deg); } }
.formule.dore { color: #fff3c4; text-shadow: 0 0 calc(18 * var(--u)) #ffd36a, 0 0 calc(40 * var(--u)) #ffb020, 0 2px 4px rgba(0,0,0,.8); animation: dore 1.8s ease-out; }
@keyframes dore { 0% { transform: scale(1); } 30% { transform: scale(1.12); } 100% { transform: scale(1); } }
.verdict { display: flex; align-items: center; gap: .4em; }
.verdict .egal { color: var(--or); font: italic 700 1em var(--serif); }
.essais { margin-top: calc(10 * var(--u)); font: 400 max(13px, calc(30 * var(--u))) var(--serif); color: #fff; text-shadow: 0 1px 3px #000; text-align: center; line-height: 1.5; }
.essais .ko { color: #ffb0a0; } .essais .ok { color: #a8ffcf; }

/* Calque d'effets DOM (clones qui volent, arcs) */
.fx { inset: 0; overflow: visible; }
.fx .clone { position: absolute; margin: 0; white-space: nowrap; font: 400 calc(56 * var(--u)) var(--serif); color: #fff; line-height: 1.35; text-shadow: 0 0 14px rgba(255,240,200,.9), 0 2px 4px rgba(0,0,0,.8); }
.fx .clone.or { color: #ffe59a; text-shadow: 0 0 16px #ffc040, 0 0 30px #ff9a20; }
.fx svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Bulle de Maître Jabir */
.bulle { left: calc(18 * var(--u)); top: calc(18 * var(--u)); width: calc(430 * var(--u)); max-height: calc(420 * var(--u)); overflow: auto; padding: calc(12 * var(--u)) calc(16 * var(--u)); border-radius: calc(18 * var(--u));
  background: rgba(20, 12, 38, .9); border: 1px solid var(--bord); box-shadow: 0 8px 30px rgba(0,0,0,.6); font-size: max(12px, calc(19 * var(--u))); line-height: 1.4; opacity: 0; transform: translateY(-10px); transition: opacity .3s, transform .3s; }
.bulle.vue { opacity: 1; transform: none; }
.bulle .qui { color: var(--or); font-weight: 700; margin-bottom: 2px; }

/* ── Console des sorts ───────────────────────────────────────────────────── */
/* En bas, les pastilles du site (loupe, bug, ardoise) sont fixées sur les côtés : la ligne de message reste au centre. */
.console { position: relative; background: linear-gradient(180deg, #160c2a, #0d0719); border-top: 1px solid var(--bord); padding: 8px 10px 4px; }
.consigne { text-align: center; color: var(--dim); font-size: .92rem; min-height: 1.3em; margin-bottom: 6px; }
.consigne b { color: var(--or); }
.sorts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sort { --c: #ffd36a; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 14px 6px 6px; border-radius: 16px; cursor: pointer; font: 700 .95rem system-ui, sans-serif; color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid var(--c2, rgba(255,211,106,.45)); box-shadow: inset 0 0 14px var(--c3, rgba(255,211,106,.14)); transition: transform .12s, box-shadow .2s; }
.sort .rune { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 1.3rem; color: #160c2a; background: radial-gradient(circle at 35% 30%, #fff, var(--c) 55%, var(--cs, #6b5a20)); box-shadow: 0 0 14px var(--c); }
.sort small { display: block; font-weight: 400; color: var(--dim); font-size: .72rem; }
.sort:active { transform: scale(.95); }
.sort:hover { box-shadow: inset 0 0 20px var(--c4, rgba(255,211,106,.3)), 0 0 16px var(--c2, rgba(255,211,106,.45)); }
.sort.gratuit .rune { width: 32px; height: 32px; font-size: 1.05rem; }
.sort:disabled { opacity: .45; cursor: default; }
.choix { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 10px; }
.choix .question { width: 100%; text-align: center; font-weight: 700; color: var(--or); }
.choix .question .expr { color: #fff; }
.pied { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 4px; padding: 0 130px 0 60px; }
.pied .msg { flex: 1; text-align: center; font-size: .9rem; color: var(--dim); min-height: 1.2em; }
.pied .msg.ok { color: var(--vert); } .pied .msg.ko { color: var(--rouge); }
.petit { font: 600 .85rem system-ui, sans-serif; padding: 7px 12px; border-radius: 12px; border: 1px solid var(--bord); background: rgba(255,255,255,.05); color: var(--ink); cursor: pointer; }
.petit:disabled { opacity: .4; cursor: default; }
.petit.annuler { align-self: center; width: 44px; height: 44px; border-radius: 50%; padding: 0; font-size: 1.1rem; }

/* Fioles (choix du résultat) */
.fiole { --c: #8dffc0; position: relative; flex: 1 1 0; min-width: 140px; max-width: 290px; padding: 20px 8px 6px; border: 0; background: none; cursor: pointer; color: #fff; font: 400 1.5rem var(--serif); }
.fiole .corps { position: relative; display: flex; align-items: center; justify-content: center; min-height: 74px; padding: 10px 12px; border-radius: 40px 40px 34px 34px; overflow: hidden;
  background: linear-gradient(180deg, rgba(200,220,255,.08) 0 38%, var(--cs, #3a6a50) 38% 100%); border: 2px solid rgba(220,235,255,.45); box-shadow: inset 0 -12px 24px rgba(0,0,0,.35), 0 0 22px var(--c4, rgba(141,255,192,.3)); }
.fiole .corps::before { content: ""; position: absolute; left: 12%; top: 10%; width: 8%; height: 55%; border-radius: 9px; background: rgba(255,255,255,.22); }
.fiole .corps::after { content: ""; position: absolute; left: -10%; right: -10%; top: 34%; height: 10px; background: radial-gradient(ellipse at center, rgba(255,255,255,.35), transparent 70%); animation: vague 2.4s ease-in-out infinite; }
@keyframes vague { 50% { transform: translateX(8%) scaleY(1.4); } }
.fiole .col { position: absolute; left: 50%; top: 6px; width: 30px; height: 22px; transform: translateX(-50%); border: 2px solid rgba(220,235,255,.45); border-bottom: 0; border-radius: 6px 6px 0 0; background: rgba(200,220,255,.06); }
.fiole .col::before { content: ""; position: absolute; left: 2px; right: 2px; top: -9px; height: 11px; border-radius: 4px; background: linear-gradient(#9a6a3a, #6b4520); }
.fiole .txt { position: relative; z-index: 1; text-shadow: 0 0 6px #000, 0 0 2px #000, 0 1px 2px #000; white-space: nowrap; }
.fiole:active { transform: scale(.96) rotate(-2deg); }
.fiole:hover .corps { box-shadow: inset 0 -12px 24px rgba(0,0,0,.35), 0 0 32px var(--c); }
.fiole.entre { animation: fioleEntre .45s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes fioleEntre { from { transform: translateY(30px) scale(.7); opacity: 0; } }
.cristal { display: inline-flex; align-items: center; justify-content: center; min-width: 84px; min-height: 56px; padding: 8px 16px; cursor: pointer; color: #fff; font: 400 1.35rem var(--serif);
  clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%); background: linear-gradient(160deg, #fff3c0, #d9a43a 45%, #7a5410); text-shadow: 0 1px 3px #000, 0 0 6px #000; border: 0; }
.cristal:active { transform: scale(.94); }
.btn-verdict { font: 700 1rem system-ui, sans-serif; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--bord); cursor: pointer; color: var(--ink); background: rgba(255,255,255,.06); }
.btn-verdict.vrai { border-color: rgba(141,255,192,.6); box-shadow: inset 0 0 18px rgba(141,255,192,.15); }
.btn-verdict.faux { border-color: rgba(255,138,216,.6); box-shadow: inset 0 0 18px rgba(255,138,216,.15); }
.eprouvette { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 14px; border: 1px solid var(--bord); background: rgba(255,255,255,.04); font: 400 1.2rem var(--serif); }
.eprouvette button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--bord); background: rgba(255,255,255,.07); color: var(--ink); font: 700 1.3rem system-ui; cursor: pointer; }
.eprouvette .val { min-width: 2.6em; text-align: center; font-weight: 700; color: var(--or); }

/* ── Dialogues (récit, explications, carte, grimoire) ───────────────────── */
.voile { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 12px; background: rgba(4, 2, 12, .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.voile.ouvert { display: flex; }
.voile.bas { align-items: flex-end; background: linear-gradient(180deg, transparent 35%, rgba(4, 2, 12, .7)); backdrop-filter: none; -webkit-backdrop-filter: none; }
.voile.bas .dialogue { margin-bottom: 8px; }
.dialogue { width: min(100%, 660px); max-height: calc(100dvh - 24px); overflow: auto; -webkit-overflow-scrolling: touch; background: linear-gradient(180deg, #1d1236, #0d0820); border: 1px solid var(--bord); border-radius: 20px;
  padding: 18px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.75), 0 0 40px rgba(255, 200, 100, .12); animation: monte .35s ease-out; color: var(--ink); }
@keyframes monte { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.dialogue .qui { font-weight: 800; color: var(--or); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.dialogue .qui span { font-size: 1.7rem; }
.dialogue p { margin: 0 0 12px; line-height: 1.6; font-size: 1.04rem; }
.dialogue p.tt { min-height: 3.2em; }
.dialogue .actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.bouton { cursor: pointer; font: 800 1rem system-ui, sans-serif; padding: 11px 18px; border-radius: 12px; border: 0; color: #2a1406; background: linear-gradient(135deg, #fff1b8, #ffc94d); box-shadow: 0 0 20px rgba(255, 201, 77, .45); }
.bouton.violet { color: #fff; background: linear-gradient(135deg, #8e6bff, #5a3fd0); box-shadow: 0 0 18px rgba(142, 107, 255, .4); }
.bouton.discret { color: var(--ink); background: rgba(255,255,255,.08); box-shadow: none; border: 1px solid var(--bord); }
.expr { font-family: var(--serif); white-space: nowrap; }
.compare { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin: 6px 0 14px; padding: 12px; border-radius: 14px; background: rgba(0,0,0,.3); font: 400 1.35rem var(--serif); }
.compare .faux { color: var(--rouge); text-decoration: line-through; text-decoration-thickness: 2px; }
.compare .juste { color: var(--vert); }
.compare .ne { color: var(--or); font-weight: 700; }
.grosse-etoiles { font-size: 2.6rem; text-align: center; color: var(--or); letter-spacing: 8px; text-shadow: 0 0 18px rgba(255,211,106,.7); margin: 4px 0 6px; }
.grosse-etoiles i { font-style: normal; display: inline-block; animation: etoile .6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes etoile { from { transform: scale(0) rotate(-120deg); opacity: 0; } }
.etape { display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.04); margin-bottom: 8px; line-height: 1.5; }
.etape .n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--or); color: #2a1406; font-weight: 800; }

/* Carte des chapitres : la Tour du Mathémage */
.carte h2 { margin: 0 0 4px; text-align: center; font: 700 1.6rem var(--serif); color: #fff; text-shadow: 0 0 18px rgba(255, 200, 100, .5); }
.carte .sous { text-align: center; color: var(--dim); margin: 0 0 14px; font-size: .92rem; }
.chapitres { display: grid; gap: 10px; }
.chap { --c: #8dffc0; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,.18); cursor: pointer; text-align: left; font: inherit; color: var(--ink);
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); }
.chap:disabled { opacity: .45; cursor: default; }
.chap .num { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font: 800 1.3rem var(--serif); color: #160c2a; background: radial-gradient(circle at 35% 30%, #fff, var(--c) 60%); box-shadow: 0 0 16px var(--c); }
.chap .t { flex: 1; font-weight: 700; }
.chap .t small { display: block; font-weight: 400; color: var(--dim); font-size: .8rem; }
.chap .barre { height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); margin-top: 6px; overflow: hidden; }
.chap .barre i { display: block; height: 100%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.chap .et { color: var(--or); font-size: .9rem; white-space: nowrap; }
.niveaux-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.niveaux-liste button { font: inherit; text-align: left; cursor: pointer; padding: 9px 11px; border-radius: 12px; border: 1px solid var(--bord); background: rgba(255,255,255,.05); color: var(--ink); }
.niveaux-liste button:disabled { opacity: .4; cursor: default; }
.niveaux-liste .et { color: var(--or); font-size: .85rem; display: block; letter-spacing: 2px; }
.niveaux-liste .boss { border-color: rgba(255, 138, 216, .55); }

/* Grimoire (fiche de révision) */
.grimoire { background: linear-gradient(180deg, #f1e3bf, #e2cd9d); color: #2a1406; border-radius: 14px; padding: 14px 16px; box-shadow: inset 0 0 40px rgba(120, 80, 30, .35); }
.grimoire h3 { margin: 12px 0 6px; font: 700 1.15rem var(--serif); color: #5a2a10; border-bottom: 1px solid rgba(90,42,16,.3); padding-bottom: 3px; }
.grimoire h3:first-child { margin-top: 0; }
.grimoire .regle { margin: 0 0 8px; line-height: 1.5; font-size: .98rem; }
.grimoire .regle b { color: #7a2a10; }
.grimoire .ex { display: block; font-family: var(--serif); color: #3a2a6a; margin-top: 2px; }
.grimoire .scelle { color: #8a6a40; font-style: italic; }

/* À propos (SEO) */
.seo-about { max-width: 840px; margin: 26px auto 16px; padding: 16px 22px; border-radius: 14px; background: rgba(20, 12, 38, .8); border: 1px solid var(--bord); color: var(--dim); font-size: .92rem; line-height: 1.55; }
.seo-about h2 { color: var(--or); font-size: 1.05rem; margin: 0 0 8px; }
.seo-about a { color: var(--cyan); }

@media (max-width: 600px) { #etoilesTotal { display: none; } }
@media (max-width: 700px) {
  .sort { padding-right: 10px; font-size: .85rem; min-height: 46px; } .sort .rune { width: 34px; height: 34px; } .sort small { display: none; }
  .fiole { min-width: 110px; font-size: 1.05rem; } .pastille { padding: 5px 8px; font-size: .8rem; }
}
/* Garde-fous thèmes du site (le bandeau garde son fond sombre : texte blanc obligatoire) */
body[class*="theme-"] .fv-header, body[class*="theme-"] .fv-header * { color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: none !important; }
body[class*="theme-"] .wrap, body[class*="theme-"] .wrap * { color: #f3ecff !important; -webkit-text-fill-color: #f3ecff !important; }
body[class*="theme-"] .wrap .cible .f, body[class*="theme-"] .wrap .cible .f * { color: #2a1406 !important; -webkit-text-fill-color: #2a1406 !important; }
body[class*="theme-"] .wrap .cible .etiquette { color: #6b4220 !important; -webkit-text-fill-color: #6b4220 !important; }
body[class*="theme-"] .voile .grimoire, body[class*="theme-"] .voile .grimoire * { color: #2a1406 !important; -webkit-text-fill-color: #2a1406 !important; }