*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#111;color:#f3eee6;font-family:Arial,sans-serif}body{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 15%,#292520,#111 60%)}#app{width:min(760px,100%);padding:28px}.card{animation:in .45s ease;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);border-radius:24px;padding:clamp(28px,6vw,58px);box-shadow:0 30px 90px #0007}.eyebrow{font-size:11px;letter-spacing:.28em;opacity:.55;margin-bottom:28px}h1,h2{font-family:Georgia,serif;font-weight:400}h1{font-size:clamp(42px,8vw,72px);margin:0 0 30px}h2{font-size:clamp(27px,5vw,42px);line-height:1.2}p{line-height:1.65}.muted,.hint{opacity:.64}.options{display:grid;gap:10px;margin:28px 0}.option{display:block;padding:16px 18px;border:1px solid #ffffff22;border-radius:14px;cursor:pointer;line-height:1.35}.option:has(input:checked){background:#ffffff12;border-color:#ffffff88}.option input{margin-right:10px}button{border:0;border-radius:999px;padding:14px 22px;font-weight:700;cursor:pointer;background:#f0e6d7;color:#171513;margin-top:14px}button.secondary{background:transparent;color:#f3eee6;border:1px solid #ffffff33;margin-left:8px}textarea{width:100%;min-height:110px;background:#ffffff0b;border:1px solid #ffffff33;color:#fff;border-radius:14px;padding:14px;font:inherit;margin-top:15px}.after{font-family:Georgia,serif;font-size:22px;line-height:1.55;white-space:pre-line}.fake h1{text-align:center;font-size:clamp(44px,10vw,86px)}.center{text-align:center}.progress{height:4px;background:#ffffff15;border-radius:9px;overflow:hidden;margin:30px 0}.bar{height:100%;width:0;background:#eee;transition:width .7s ease}@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@media(max-width:560px){#app{padding:14px}.card{padding:26px 20px;border-radius:18px}.option{padding:14px}button{width:100%}button.secondary{margin-left:0}}
.free-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}.thought{min-height:240px;padding-top:6px}.thought-line{font-family:Georgia,serif;font-size:clamp(21px,4vw,29px);line-height:1.45;margin:0 0 16px;animation:thoughtIn .32s ease}.thinking{height:34px;display:flex;align-items:center;gap:5px;opacity:.55}.thinking[hidden]{visibility:hidden;display:flex}.thinking span{width:5px;height:5px;border-radius:50%;background:currentColor;animation:think 1s infinite ease-in-out}.thinking span:nth-child(2){animation-delay:.14s}.thinking span:nth-child(3){animation-delay:.28s}.form-error{font-size:14px;opacity:.75;margin:12px 0 0}@keyframes thoughtIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes think{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-4px);opacity:1}}@media(max-width:560px){.free-actions{display:grid}.free-actions button{margin-top:6px}}

.typing-line{animation:none}.typing-cursor{display:inline-block;margin-left:2px;font-weight:400;animation:cursorBlink .72s steps(1,end) infinite}@keyframes cursorBlink{0%,48%{opacity:1}49%,100%{opacity:0}}
/* V0.5 — image mystère progressive */
body{position:relative;overflow-x:hidden;background:#090a0b}
#mystery-bg{position:fixed;inset:-5%;z-index:-2;background:url('../background-mystery.svg') center/cover no-repeat;transform:scale(1.08);opacity:calc(.04 + var(--reveal,3)*.008);filter:blur(calc(30px - var(--reveal,3)*.28px)) saturate(calc(.35 + var(--reveal,3)*.008)) brightness(calc(.20 + var(--reveal,3)*.009));transition:opacity 1.15s ease,filter 1.15s ease,transform 1.15s ease}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:rgba(4,5,6,calc(.91 - var(--reveal,3)*.009));transition:background 1.15s ease}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 50% 45%,transparent 0 22%,rgba(0,0,0,.3) 72%,rgba(0,0,0,.68) 100%)}
.devbar{position:fixed;left:12px;right:12px;top:10px;z-index:50;padding:8px 10px;border:1px solid #ffffff24;border-radius:14px;background:#08090be8;backdrop-filter:blur(12px);display:flex;gap:5px;align-items:center;overflow-x:auto;box-shadow:0 8px 30px #0008}.devbar[hidden]{display:none}.devbar button{width:auto;min-width:auto;margin:0;padding:7px 9px;font-size:11px;background:#ffffff12;color:#eee;border:1px solid #ffffff1e}.devbar .dev-label{font-size:10px;letter-spacing:.14em;opacity:.55;white-space:nowrap;margin-right:4px}.devbar .active{background:#eee;color:#111}.dev-mode #app{padding-top:70px}
@media(max-width:560px){.devbar{left:6px;right:6px}.devbar button{width:auto;padding:7px 9px}.dev-mode #app{padding-top:64px}}

/* V0.6 — correction du compositing du fond mystère.
   Les versions précédentes plaçaient le fond en z-index négatif : le fond opaque
   de <body> pouvait donc le masquer entièrement selon le navigateur. */
html{background:#050607}
body{isolation:isolate;background:#050607;position:relative;min-height:100vh}
#mystery-bg{
  position:fixed;
  inset:-5%;
  z-index:0;
  pointer-events:none;
  background-image:url('../background-mystery.png');
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  transform:scale(1.08);
  opacity:calc(.10 + var(--reveal,3)*.011);
  filter:blur(calc(28px - var(--reveal,3)*.36px)) saturate(calc(.38 + var(--reveal,3)*.010)) brightness(calc(.32 + var(--reveal,3)*.010));
  transition:opacity 1.15s ease,filter 1.15s ease,transform 1.15s ease;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:rgba(4,5,6,calc(.88 - var(--reveal,3)*.0105));
  transition:background 1.15s ease;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(circle at 50% 42%,transparent 0 20%,rgba(0,0,0,.18) 66%,rgba(0,0,0,.58) 100%);
}
#app{position:relative;z-index:2}
.card{background:rgba(10,11,12,.64);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.devbar{z-index:50}
.dev-reveal{position:fixed;right:14px;bottom:14px;z-index:60;padding:8px 11px;border:1px solid #ffffff2b;border-radius:999px;background:#08090be8;color:#eee;font:11px/1.2 Arial,sans-serif;letter-spacing:.06em;box-shadow:0 8px 25px #0008}.dev-reveal[hidden]{display:none}
/* V0.7 — la voix du programme est transversale à tout le parcours. */
#last-title{white-space:pre-line}.big-result{font-size:clamp(44px,10vw,86px);margin:28px 0}.sub-result{font-size:clamp(25px,5vw,38px)}

/* V0.8 — correction définitive de la pile du background.
   Aucun calque du décor n'utilise de z-index négatif : il ne peut donc plus
   passer derrière le fond du document. */
html{background:#050607}
body{position:relative;isolation:auto;background:transparent;min-height:100vh;overflow-x:hidden}
#mystery-bg{
  position:fixed;
  inset:-5%;
  z-index:0;
  pointer-events:none;
  background-image:url('../background-mystery.png');
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  transform:scale(1.08);
  opacity:calc(.10 + var(--reveal,3)*.011);
  filter:blur(calc(28px - var(--reveal,3)*.36px)) saturate(calc(.38 + var(--reveal,3)*.010)) brightness(calc(.32 + var(--reveal,3)*.010));
  transition:opacity 1.15s ease,filter 1.15s ease,transform 1.15s ease;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:rgba(4,5,6,calc(.88 - var(--reveal,3)*.0105));
  transition:background 1.15s ease;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:radial-gradient(circle at 50% 42%,transparent 0 20%,rgba(0,0,0,.18) 66%,rgba(0,0,0,.58) 100%);
}
#app{position:relative;z-index:10}
.devbar,.dev-reveal{z-index:100}


/* V0.9 — correction Firefox : aucune multiplication dans calc().
   Les valeurs finales sont calculées en JavaScript par setReveal(). */
:root{
  --bg-opacity:.10;
  --bg-blur:30px;
  --bg-saturate:.34;
  --bg-brightness:.34;
  --veil-alpha:.88;
}
body{background:#050607 !important;}
#mystery-bg{
  z-index:0 !important;
  background-image:url('../background-mystery.png') !important;
  opacity:var(--bg-opacity) !important;
  filter:blur(var(--bg-blur)) saturate(var(--bg-saturate)) brightness(var(--bg-brightness)) !important;
  transition:opacity 1.15s ease,filter 1.15s ease,transform 1.15s ease !important;
}
body::before{
  z-index:1 !important;
  background:rgba(4,5,6,var(--veil-alpha)) !important;
  transition:background 1.15s ease !important;
}
body::after{z-index:2 !important;}
#app{z-index:10 !important;}

/* V0.10 : rendu bas niveau renforcé par courbe JS non linéaire. */