:root{
  --ink:#1e3a5f; --ink-soft:#4b6285; --paper:#faf6ef; --card:#fff; --surface:#f4efe6; --line:#e6dfd1;
  --accent:#e0a458; --accent-dark:#b9812f; --accent-soft:#f6e4c8; --on-accent:#3a2a10;
  --ok:#1f8a4c; --ok-bg:#e6f6ec; --err:#cf4a3f; --err-bg:#fdeae8; --miss:#8a6d1f; --sky:#3aa0ff;
  --shadow:0 1px 2px rgba(30,58,95,.08),0 8px 24px rgba(30,58,95,.08);
}
@media (prefers-color-scheme:dark){
  :root{ --ink:#e8eefb; --ink-soft:#a8b6d3; --paper:#14202f; --card:#1b2b40; --surface:#22344d; --line:#33496a;
    --accent-soft:#3d3220; --accent-dark:#e0a458; --ok:#5fd18a; --ok-bg:#12382a; --err:#ff8b80; --err-bg:#451d1a; --miss:#e6c36a; }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{width:min(860px,100% - 32px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:8px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
a{color:var(--ink)}
.muted{color:var(--ink-soft)} .small{font-size:.88rem}

.top{position:sticky;top:0;z-index:10;background:var(--ink);color:#fff}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
.top a.back{color:#fff;font-weight:700;text-decoration:none}
.top a.back:hover{text-decoration:underline}
.demo-flag{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;background:var(--accent);color:var(--on-accent);padding:4px 12px;border-radius:999px}

.demo-flag,.top a.back{white-space:nowrap}
@media (max-width:520px){.hide-sm{display:none}}
main{padding-bottom:40px}
.kicker{margin:32px 0 6px;text-transform:uppercase;letter-spacing:.14em;font-weight:800;font-size:.78rem;color:var(--accent-dark)}
h1{font-size:clamp(1.9rem,4.6vw,2.7rem);line-height:1.1;letter-spacing:-.02em;margin:0 0 10px}
h2{font-size:1.35rem;margin:36px 0 12px;letter-spacing:-.01em}
h3{margin:28px 0 10px}
.lead{color:var(--ink-soft);max-width:62ch;margin:0}

.btn{display:inline-block;padding:11px 20px;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:700;cursor:pointer;text-decoration:none;transition:transform .12s,border-color .12s}
.btn:hover{transform:translateY(-2px);border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.ghost{border-color:transparent;background:none;color:var(--ink-soft)}
.btn.small{padding:7px 14px;font-size:.9rem}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* choice cards */
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.choice{display:block;width:100%;text-align:left;padding:16px 18px;border-radius:16px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:inherit;cursor:pointer;box-shadow:var(--shadow);transition:transform .12s,border-color .12s}
.choice:hover{transform:translateY(-2px);border-color:var(--accent)}
.choice[aria-checked="true"]{border-color:var(--accent);background:var(--accent-soft)}
.choice b{display:block;font-size:1.05rem}
.pill{display:inline-block;margin-top:6px;padding:2px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-dark);font-size:.78rem;font-weight:800}
.choice[aria-checked="true"] .pill{background:var(--card)}

/* player */
.player{padding:18px 20px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:20px}
audio{display:none}
.audio-bar{display:flex;align-items:center;gap:12px;margin-top:10px}
.play-btn{flex:none;width:48px;height:48px;border-radius:50%;border:0;background:var(--ink);color:var(--paper);font-size:1.1rem;cursor:pointer}
.play-btn:hover{filter:brightness(1.15)}
.audio-range{flex:1;min-width:0;accent-color:var(--ink);height:24px}
.audio-time{font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:.9rem;min-width:5.5em;text-align:right}
.audio-status{margin:8px 0 0;min-height:1.4em;font-size:.9rem;color:var(--ink-soft)}
.speed-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
.speeds{display:flex;flex-wrap:wrap;gap:6px}
.speed-btn{min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);font:inherit;font-weight:700;color:var(--ink);cursor:pointer}
.speed-btn.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* writing */
.field label{display:block;font-weight:700;margin-bottom:6px}
textarea{width:100%;min-height:200px;padding:14px;border-radius:14px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:1.1rem/1.6 Georgia,"Times New Roman",serif;resize:vertical}
textarea:focus{border-color:var(--accent);outline:0}
.keys-row{margin-top:10px}
.keypad{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.keypad[hidden]{display:none}
.keypad-group{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.keypad-label{flex:0 0 5rem;font-size:.8rem;color:var(--ink-soft)}
.key{min-width:34px;min-height:38px;padding:0 6px;border-radius:7px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:1.05rem;cursor:pointer}
.key:hover{border-color:var(--accent)} .key:active{background:var(--accent);color:var(--on-accent)}
.warn{margin:12px 0 0;padding:10px 14px;border-radius:10px;background:var(--accent-soft);color:var(--ink);font-weight:600}

/* result */
.fault-count{font-size:1.7rem;font-weight:800}
.fault-count.zero{color:var(--ok)}
.legend{display:flex;flex-wrap:wrap;gap:14px;margin:12px 0 4px;font-size:.85rem;color:var(--ink-soft)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.k{display:inline-block;width:14px;height:14px;border-radius:4px}
.k.ok{background:var(--ok)} .k.bad{background:var(--err-bg);box-shadow:inset 0 -3px 0 var(--err)}
.k.gap{border-bottom:3px dotted var(--err);border-radius:0} .k.miss{border-bottom:3px dotted var(--miss);border-radius:0}
.k.sup{background:var(--err);opacity:.5;height:3px;margin-top:6px}
.copy{margin-top:12px;padding:22px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);font:1.2rem/2.1 Georgia,"Times New Roman",serif}
.no-copy{-webkit-user-select:none;user-select:none}
.w{border-radius:4px;padding:0 1px}
.w-ens{white-space:nowrap}
.w-correct{color:var(--ok)}
.w-modified{color:var(--err);font-weight:700;position:relative}
.w-modified .bad{background:var(--err-bg);box-shadow:inset 0 -3px 0 var(--err);border-radius:3px 3px 0 0;padding:0 2px}
.w-modified .gap{opacity:.65;font-weight:600;border-bottom:2px dotted var(--err)}
.w-modified[data-corrige]{cursor:help}
.w-modified[data-corrige]::after{content:attr(data-corrige);display:none;position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);background:var(--ink);color:var(--paper);font:700 .95rem/1.3 system-ui,sans-serif;padding:5px 10px;border-radius:8px;white-space:nowrap;z-index:5;pointer-events:none}
.w-modified[data-corrige]:hover::after,.w-modified[data-corrige]:focus::after{display:block}
.w-modified:focus{outline:0}
.w-missing{color:var(--miss);text-decoration:underline dotted}
.w-superfluous{color:var(--err);text-decoration:line-through;opacity:.6}
.fiche-btn{margin-left:3px;width:22px;height:22px;border-radius:50%;border:0;background:var(--ink);color:var(--paper);font:800 .8rem/1 system-ui,sans-serif;cursor:pointer;vertical-align:middle}
.fiche-btn:hover{background:var(--accent);color:var(--on-accent)}

.by-type{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.by-type .row{display:grid;grid-template-columns:minmax(120px,190px) 1fr auto;gap:12px;align-items:center}
.bar{height:12px;border-radius:999px;background:var(--surface);overflow:hidden}
.bar>span{display:block;height:100%;background:var(--accent);border-radius:999px}
.by-type small{color:var(--ink-soft)}

.cta-card{margin-top:44px;padding:24px;border-radius:20px;background:var(--ink);color:#fff}
.cta-card h2{margin:0 0 6px;color:#fff}
.cta-card p{margin:0 0 14px;color:#d6e0f2;max-width:56ch}
.cta-card .btn.primary{color:var(--on-accent)}

.foot{padding:30px 0 44px;border-top:1px solid var(--line);color:var(--ink-soft)}
.foot p{margin:0 0 6px} .legal{font-size:.85rem}

/* modal (same idea as Dicteo's rule pop-up) */
dialog.rule-modal{width:min(680px,calc(100% - 24px));padding:0;border:0;border-radius:20px;background:var(--card);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog.rule-modal::backdrop{background:rgba(30,58,95,.5)}
.modal-head{display:flex;justify-content:flex-end;padding:12px 12px 0}
.modal-close{width:36px;height:36px;border-radius:50%;border:0;background:var(--surface);color:var(--ink);font-size:1rem;cursor:pointer}
.modal-body{padding:0 26px 26px;max-height:70vh;overflow-y:auto}
.modal-body h2{margin-top:0}
.modal-body hr{border:0;border-top:2px solid var(--line);margin:22px 0}
.modal-body table{border-collapse:collapse;width:100%;margin:10px 0;font-size:.95rem}
.modal-body th,.modal-body td{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top}
.modal-body th{background:var(--surface)}
.corrige-texte p{margin:.4em 0;font-family:Georgia,serif}
.ecrit-texte{white-space:pre-wrap;font-family:Georgia,serif}
.ecrit-texte mark{background:var(--accent-soft);color:inherit;padding:2px 4px;border-radius:4px}

@media (max-width:560px){
  .by-type .row{grid-template-columns:1fr auto;grid-template-areas:"a c" "b b"}
  .by-type .row>:nth-child(1){grid-area:a}.by-type .row>:nth-child(2){grid-area:b}.by-type .row>:nth-child(3){grid-area:c}
  .copy{padding:16px;font-size:1.1rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}