/* Layout : une carte papier centrée, divisée en trois bandes (consigne / cadre de lecture / vitesse), réglages dessous */
:root{
  --paper:#F5F2EB;        /* fond de la carte */
  --ground:#E9E5DC;       /* fond de page */
  --ink:#1B1A18;          /* texte */
  --muted:#5F5B54;        /* texte secondaire */
  --rule:#B9B3A8;         /* filets et repères */
  --pivot:#B3261E;        /* lettre de fixation */
  --glow:#FFFDF7;         /* halo central du cadre */
  --ok:#2F6B3A; --bad:#B3261E;
  /* Polices système uniquement (pas de Google Fonts : aucune requête tierce, CSP stricte) */
  --serif:"Times New Roman",Tinos,"Liberation Serif",Times,serif;
  --sans:Arial,Arimo,"Liberation Sans","Helvetica Neue",Helvetica,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#22201C; --ground:#171613; --ink:#ECE7DD; --muted:#A9A398;
    --rule:#57524A; --pivot:#E5655B; --glow:#2B2823; --ok:#7CC48A; --bad:#E5655B;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#22201C; --ground:#171613; --ink:#ECE7DD; --muted:#A9A398;
  --rule:#57524A; --pivot:#E5655B; --glow:#2B2823; --ok:#7CC48A; --bad:#E5655B;
}
/* hidden doit l'emporter sur les display:flex/grid ci-dessous */
[hidden]{display:none!important}
html,body{min-height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);padding:32px 16px 48px;box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
.wrap{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.stack{display:flex;flex-direction:column;gap:12px}
.start{align-self:flex-start}

/* ---------- Carte principale ---------- */
.card{background:var(--paper);border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 10px 30px rgba(0,0,0,.08);overflow:hidden}
.prompt{font-family:var(--serif);font-size:clamp(24px,5.4vw,31px);line-height:1.3;text-align:center;padding:36px 24px 30px;margin:0;text-wrap:balance;font-weight:400}
.frame{position:relative;border-top:2px solid var(--rule);border-bottom:2px solid var(--rule);height:180px;cursor:pointer;
  background:radial-gradient(ellipse 60% 70% at 50% 50%,var(--glow),transparent 75%)}
.frame::before,.frame::after{content:"";position:absolute;left:50%;width:2px;height:34px;background:var(--rule);transform:translateX(-1px)}
.frame::before{top:0}.frame::after{bottom:0}
.frame:focus-visible{outline:2px solid var(--pivot);outline-offset:-4px}
.word{position:absolute;inset:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font-family:var(--serif);font-size:clamp(34px,8vw,46px);white-space:pre;user-select:none}
.word .pre{text-align:right}.word .piv{color:var(--pivot)}.word .post{text-align:left}
.word.done{grid-template-columns:1fr;text-align:center;font-size:clamp(22px,5vw,28px);color:var(--muted);font-style:italic;white-space:normal;padding:0 24px}
.progress{position:absolute;left:0;bottom:-2px;height:2px;background:var(--pivot);width:0;transition:width .12s linear}
.hint{position:absolute;right:12px;top:10px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.speed{text-align:center;font-style:italic;font-size:22px;color:var(--ink);padding:26px 16px 28px;margin:0;font-variant-numeric:tabular-nums}

/* ---------- Commandes ---------- */
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
button{font:500 14px/1 var(--sans);color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:11px 18px;cursor:pointer}
button:hover{border-color:var(--ink)}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--pivot);outline-offset:2px}
button.primary{background:var(--ink);color:var(--paper);border-color:var(--ink);min-width:110px}
.slider{display:flex;align-items:center;gap:12px;width:100%;max-width:420px;margin:0 auto}
.slider input{flex:1;min-width:0;accent-color:var(--pivot)}
.slider span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;width:34px;text-align:center}

/* ---------- Panneau exercices ---------- */
.panel{background:var(--paper);border-radius:14px;padding:22px 22px 24px;display:flex;flex-direction:column;gap:16px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{padding:8px 14px;font-size:13px}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.panel h2{font-family:var(--serif);font-weight:400;font-size:21px;margin:0}
.panel p{margin:0;color:var(--muted);line-height:1.55;font-size:14px;max-width:62ch}
label.lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field{display:flex;flex-direction:column;gap:6px}
textarea,select{font:15px/1.5 var(--serif);color:var(--ink);background:var(--ground);border:1px solid var(--rule);border-radius:8px;padding:10px 12px;width:100%}
textarea{min-height:130px;resize:vertical}
.row{display:flex;gap:12px;flex-wrap:wrap}.row>.field{flex:1 1 160px}
.texts{display:grid;gap:8px}
.texts .level{font:400 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:10px 0 0}
.texts .level:first-child{margin-top:0}
.texts button{border-radius:10px;text-align:left;padding:12px 14px;display:flex;justify-content:space-between;gap:12px;line-height:1.3}
.texts button small{color:var(--muted);font-weight:400;white-space:nowrap}
.texts button[aria-pressed="true"]{border-color:var(--pivot);box-shadow:inset 0 0 0 1px var(--pivot)}

/* ---------- Résultats & quiz ---------- */
.results{display:flex;flex-direction:column;gap:16px}
.quiz{display:flex;flex-direction:column;gap:18px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.stat{border:1px solid var(--rule);border-radius:10px;padding:12px 6px}
.stat b{display:block;font-family:var(--serif);font-size:26px;font-weight:400;font-variant-numeric:tabular-nums}
.stat span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.q{display:flex;flex-direction:column;gap:8px}
.q h3{font:400 17px/1.35 var(--serif);margin:0}
.q .opts{display:grid;gap:6px}
.q .opts button{border-radius:8px;text-align:left;font-weight:400;line-height:1.3}
.q .opts button.right{border-color:var(--ok);color:var(--ok)}
.q .opts button.wrong{border-color:var(--bad);color:var(--bad);text-decoration:line-through}
.q .opts button:disabled{cursor:default}
.sound{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.sound button{padding:8px 14px;font-size:13px;color:var(--muted)}
.sound button[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.sound button[aria-pressed="true"]::before{content:"♪ ";color:var(--pivot)}
.vol{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.vol input{width:110px;accent-color:var(--pivot)}
.keys{font-size:12px;color:var(--muted);text-align:center;line-height:1.8;margin:0}
kbd{font:11px var(--sans);border:1px solid var(--rule);border-bottom-width:2px;border-radius:4px;padding:1px 6px;background:var(--paper)}
.noscript{text-align:center;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.progress{transition:none}}
@media (max-width:420px){.stat b{font-size:21px}.frame{height:150px}}