:root{
  --nuit:#100c1f; --voile:#1a1530; --voile-2:#221c3d; --trait:#3a3160;
  --or:#c9a961; --or-clair:#e4cf95; --lavande:#b9a7e0;
  --texte:#efe8d6; --doux:#aba3c0; --erreur:#ec9a9a;
  --titre:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --corps:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;color:var(--texte);font:16px/1.6 var(--corps);
  background-color:var(--nuit);
  background-image:
    radial-gradient(1px 1px at 12% 18%,#fff8 50%,transparent 51%),
    radial-gradient(1px 1px at 78% 9%,#fff6 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 33% 72%,#e4cf9599 50%,transparent 51%),
    radial-gradient(1px 1px at 91% 64%,#fff7 50%,transparent 51%),
    radial-gradient(1px 1px at 57% 41%,#fff5 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 6% 88%,#b9a7e099 50%,transparent 51%),
    radial-gradient(1px 1px at 66% 93%,#fff6 50%,transparent 51%),
    radial-gradient(900px 500px at 50% -10%,#2a2150 0%,transparent 70%);
  background-attachment:fixed;
  padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0);
}
.page{max-width:640px;margin:0 auto;padding:36px 20px 56px}
header.entete{text-align:center;margin-bottom:28px}
.medaillon{width:112px;height:112px;border-radius:50%;display:block;margin:0 auto 18px;
  box-shadow:0 0 0 2px var(--or),0 0 0 7px var(--nuit),0 0 0 8px #c9a96155,0 0 40px #c9a96133}
h1{font:400 clamp(1.7rem,6vw,2.3rem)/1.15 var(--titre);color:var(--or-clair);margin:0 0 10px;letter-spacing:.01em}
.chapeau{color:var(--doux);margin:0 auto;max-width:34em}
.progression{margin:26px 0 22px}
.progression .ligne{height:2px;background:var(--trait);border-radius:2px;overflow:hidden}
.progression .rempli{height:100%;background:linear-gradient(90deg,var(--lavande),var(--or));width:0;transition:width .4s ease}
.progression .etape{font-size:.85rem;color:var(--doux);margin-top:8px}
.carte{background:var(--voile);border:1px solid var(--trait);border-radius:18px;padding:26px 22px}
@media(min-width:560px){.carte{padding:32px 34px}}
h2{font:400 1.45rem/1.25 var(--titre);color:var(--or-clair);margin:0 0 6px}
.note{background:var(--voile-2);border-left:2px solid var(--or);border-radius:4px 10px 10px 4px;
  padding:14px 16px;margin:14px 0 20px;font-size:.93rem;color:#ddd4c0;white-space:pre-line}
.note strong{color:var(--or-clair);font-weight:600}
.champ{margin:22px 0}
.q{display:block;font-weight:600;margin-bottom:4px}
.req{color:var(--or);margin-left:3px}
.aide{color:var(--doux);font-size:.88rem;margin:0 0 8px}
input[type=text],input[type=email],input[type=tel],input[type=date],textarea{
  width:100%;background:var(--nuit);color:var(--texte);border:1px solid var(--trait);border-radius:10px;
  padding:12px 14px;font:inherit;min-height:46px}
textarea{min-height:110px;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 3px #c9a96133}
.options{display:grid;gap:8px}
.opt{display:flex;gap:12px;align-items:flex-start;padding:11px 14px;border:1px solid var(--trait);border-radius:10px;cursor:pointer;background:var(--nuit)}
.opt input{margin:4px 0 0;accent-color:var(--or);width:18px;height:18px;flex:none}
.opt.coche{border-color:var(--or);background:#c9a96112}
.opt:focus-within{box-shadow:0 0 0 3px #c9a96133}
.autre{margin-top:8px}
.echelle{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.echelle label{display:block;text-align:center;padding:10px 0;border:1px solid var(--trait);border-radius:8px;cursor:pointer;font-variant-numeric:tabular-nums;background:var(--nuit)}
.echelle input{position:absolute;opacity:0;pointer-events:none}
.echelle label.coche{border-color:var(--or);background:var(--or);color:var(--nuit);font-weight:700}
.echelle label:focus-within{box-shadow:0 0 0 3px #c9a96155}
.bornes{display:flex;justify-content:space-between;font-size:.8rem;color:var(--doux);margin-top:6px}
.erreur{display:none;color:var(--erreur);font-size:.88rem;margin:6px 0 0}
.champ.invalide .erreur{display:block}
.champ.invalide input,.champ.invalide textarea,.champ.invalide .opt{border-color:var(--erreur)}
.nav{display:flex;justify-content:space-between;gap:12px;margin-top:30px}
button{font:inherit;cursor:pointer;border-radius:999px;padding:12px 24px;min-height:46px}
.btn-or{background:var(--or);color:#1a1405;border:0;font-weight:700}
.btn-or:hover{background:var(--or-clair)}
.btn-or:disabled{opacity:.6;cursor:wait}
.btn-ligne{background:transparent;color:var(--texte);border:1px solid var(--trait)}
button:focus-visible,a:focus-visible{outline:2px solid var(--or-clair);outline-offset:3px}
.recap{border-top:1px solid var(--trait);margin-top:18px}
.recap h3{font:400 1.05rem var(--titre);color:var(--lavande);margin:20px 0 6px}
.recap dl{margin:0}
.recap dt{font-size:.85rem;color:var(--doux);margin-top:10px}
.recap dd{margin:2px 0 0;white-space:pre-wrap;word-break:break-word}
.pot{position:absolute;left:-9999px}
.choix{display:grid;gap:14px;margin-top:8px}
.choix a{display:block;text-decoration:none;color:var(--texte);background:var(--voile);border:1px solid var(--trait);border-radius:18px;padding:22px}
.choix a:hover{border-color:var(--or)}
.choix strong{display:block;font:400 1.3rem var(--titre);color:var(--or-clair);margin-bottom:4px}
.choix span{color:var(--doux);font-size:.95rem}
footer.pied{text-align:center;color:var(--doux);font-size:.82rem;margin-top:30px}
footer.pied a{color:var(--lavande)}
.prose h2{margin-top:28px}
.prose p,.prose li{color:#ddd4c0}
.prose a{color:var(--lavande)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{
  body{background:#fff;color:#000}
  .page{padding:0}
  .carte{border:0;background:#fff;padding:0}
  .nav,.progression,.medaillon,footer.pied,.noprint{display:none!important}
  h1,h2,.recap h3{color:#000}
  .recap dt{color:#555}
}