:root{
  --bg:#101820;--surface:#18232e;--line:#2a3846;--text:#ebe6da;--muted:#8d9aa5;
  --accent:#dcb467;--on-accent:#101820;--ok:#4cc38a;--ko:#f0707e;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
[data-theme=light]{
  --bg:#edf1f4;--surface:#fff;--line:#d3dce3;--text:#14202b;--muted:#5d6b78;
  --accent:#8f6310;--on-accent:#fff;--ok:#12805a;--ko:#c7324a;color-scheme:light;
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
body{min-height:100dvh;background:var(--bg);color:var(--text);font:17px/1.55 var(--sans);transition:background .3s,color .3s}
main{max-width:640px;margin:0 auto;padding:84px 22px 48px}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,.big{font-family:var(--serif);font-weight:600;letter-spacing:-.015em}
h1{font-size:clamp(2.2rem,8.5vw,3.3rem);line-height:1.1;margin-bottom:1rem}
h2{font-size:clamp(1.4rem,5vw,1.8rem);line-height:1.3}
.lead{color:var(--muted);margin-bottom:2.2rem;max-width:34em}
.view{display:none}
.view.on{display:block;animation:fade .3s}
@keyframes fade{from{opacity:0}}

.progress{position:fixed;inset:0 0 auto;height:3px;z-index:5}
.progress i{display:block;height:100%;width:0;background:var(--accent);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.theme{position:fixed;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-size:1.15rem}

.modes{border-top:1px solid var(--line);margin-bottom:1.5rem}
.modes button{display:flex;align-items:baseline;gap:22px;width:100%;padding:22px 6px;background:none;border:0;border-bottom:1px solid var(--line);text-align:left;transition:background .2s,padding .2s}
.modes button:hover{background:var(--surface);padding-left:18px}
.modes b{font:600 3rem/1 var(--serif);min-width:3.4ch;color:var(--accent)}
.modes span{font-size:1.2rem;font-weight:600}
.modes small{display:block;color:var(--muted);font-size:.9rem;font-weight:400}

.hud{display:flex;justify-content:space-between;color:var(--muted);font-size:.95rem;margin-bottom:28px;font-variant-numeric:tabular-nums}
#score{color:var(--text);font-weight:600}
#qcard.swap{animation:fade .35s}
#choices{margin:26px 0;border-top:1px solid var(--line)}
.choice{display:flex;align-items:center;gap:16px;width:100%;padding:16px 12px;background:none;border:0;border-bottom:1px solid var(--line);border-left:3px solid transparent;text-align:left;transition:background .2s,border-color .2s}
.choice i{flex:none;width:26px;font:600 .95rem var(--serif);color:var(--muted)}
.choice:not(:disabled):hover{background:var(--surface)}
.choice:disabled{cursor:default}
.choice:disabled:not(.ok):not(.ko){opacity:.45}
.choice.ok{background:color-mix(in srgb,var(--ok) 15%,transparent);border-left-color:var(--ok);animation:pop .3s}
.choice.ko{background:color-mix(in srgb,var(--ko) 15%,transparent);border-left-color:var(--ko);animation:shake .35s}
@keyframes pop{50%{transform:scale(1.015)}}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

.primary{display:block;width:100%;padding:15px;border:0;border-radius:10px;background:var(--accent);color:var(--on-accent);font-weight:600;transition:transform .15s,opacity .2s}
.primary:hover{transform:translateY(-2px)}
.primary:disabled{opacity:.5}
.link{background:none;border:0;color:var(--muted);padding:12px 0;margin-right:22px;text-decoration:underline;text-underline-offset:4px}
.link:hover{color:var(--accent)}

.big{font-size:clamp(5rem,26vw,8rem);line-height:1;margin:0 0 2rem}
.big small{font-size:.3em;color:var(--muted);margin-left:.25em}
form{display:grid;gap:10px}
input{padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:10px;color:inherit;font:inherit}
.msg{min-height:1.6em;margin:10px 0;color:var(--ok)}
.msg.err{color:var(--ko)}

.tabs{display:flex;gap:6px;margin:20px 0}
.tabs button{flex:1;padding:10px 4px;background:none;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:.9rem}
.tabs .on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
table{width:100%;border-collapse:collapse;margin-bottom:1.4rem;font-variant-numeric:tabular-nums}
th,td{padding:12px 8px;text-align:left;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:500;font-size:.85rem}
td:first-child{width:2.6em;color:var(--muted)}
tbody tr:nth-child(-n+3) td:first-child{color:var(--accent);font-weight:700}
th:nth-child(3),td:nth-child(3){text-align:right;font-weight:600}
@media(max-width:480px){.sm{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Respecte les retours à la ligne des listes numérotées */
#question,.choice span{white-space:pre-line}

/* Fond animé et dégradé noir (thème sombre) */
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main{position:relative;z-index:1}
:root:not([data-theme=light]) body{background:linear-gradient(170deg,#060504 0%,#140d09 50%,#000 100%) fixed}