:root {
  --bg: #f3efe6;
  --glow: #faf8f2;
  --fg: #1a1714;
  --muted: #6f675c;
  --line: #b9b1a5;
  --pivot: #a31f2b;
  --card: #fbf9f4;
  --border: #ddd5c8;
  --word-size: 56px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17150f; --glow: #1f1c16; --fg: #ece6da; --muted: #9a9286; --line: #4d473d;
    --pivot: #ff6b6b; --card: #1f1c16; --border: #37322a; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #17150f; --glow: #1f1c16; --fg: #ece6da; --muted: #9a9286; --line: #4d473d;
  --pivot: #ff6b6b; --card: #1f1c16; --border: #37322a; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }

.screen { min-height: 100%; display: flex; flex-direction: column; align-items: center; padding: 40px 16px; }

/* ---------- Import ---------- */
.brand { text-align: center; max-width: 560px; margin: 4vh 0 32px; }
.brand h1 { font: 400 clamp(2.4rem, 8vw, 3.6rem)/1.1 Georgia, "Times New Roman", serif; margin: 0; }
.brand h1 em { color: var(--pivot); }
.brand p { color: var(--muted); margin: .7rem 0 0; }

.drop {
  width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 44px 20px; border: 2px dashed var(--line); border-radius: 18px; background: var(--card);
  cursor: pointer; text-align: center; transition: border-color .15s, transform .15s;
}
.drop:hover, .drop:focus-visible, .drop.over { border-color: var(--pivot); transform: translateY(-2px); outline: none; }
.drop-icon { font-size: 2.2rem; color: var(--pivot); line-height: 1; }
.drop strong { font: 400 1.35rem Georgia, serif; }
.drop span { color: var(--muted); }
.drop small { color: var(--muted); margin-top: 10px; letter-spacing: .04em; }

.paste { width: 100%; max-width: 560px; margin-top: 18px; }
.paste summary { cursor: pointer; color: var(--muted); }
.paste textarea {
  width: 100%; margin: 10px 0; padding: 12px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--card); color: var(--fg); font: 1rem/1.5 Georgia, serif; resize: vertical;
}
.btn {
  border: 0; border-radius: 999px; padding: 10px 22px; background: var(--fg); color: var(--bg); font-weight: 600;
}

.recent { width: 100%; max-width: 560px; margin-top: 28px; }
.recent h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 8px; }
.recent ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.recent li { display: flex; gap: 8px; }
.recent .open {
  flex: 1; min-width: 0; text-align: left; display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--card);
}
.recent .open:hover { border-color: var(--pivot); }
.recent .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent .pct { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.recent .del { border: 1px solid var(--border); background: var(--card); border-radius: 12px; padding: 0 14px; color: var(--muted); }

.msg { min-height: 1.5em; margin: 20px 0 0; color: var(--muted); text-align: center; }
.msg.error { color: var(--pivot); }
.privacy { margin-top: auto; padding-top: 32px; font-size: .8rem; color: var(--muted); text-align: center; }

/* ---------- Lecteur ---------- */
#reader { padding-top: 16px; }
.topbar { width: 100%; max-width: 900px; display: flex; align-items: center; gap: 12px; }
.doc-title { flex: 1; min-width: 0; text-align: center; color: var(--muted); font-size: .9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn {
  width: 42px; height: 42px; flex: none; border-radius: 50%; border: 1px solid var(--border);
  background: var(--card); font-size: 1.1rem; display: grid; place-items: center;
}
.icon-btn:hover { border-color: var(--pivot); }

.stage { width: 100%; flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 300px; }
.hint { text-align: center; color: var(--muted); font: italic 1.1rem Georgia, serif; min-height: 1.6em; margin-bottom: 18px; transition: opacity .3s; }
.hint.gone { opacity: 0; }

/* Le cadre du reel : deux lignes horizontales, deux repères alignés sur la lettre pivot */
.frame {
  --pivot-x: 40%;
  position: relative; width: 100%; height: calc(var(--word-size) * 2.9);
  border-top: 2px solid var(--line); border-bottom: 2px solid var(--line);
  background: radial-gradient(ellipse 42% 60% at var(--pivot-x) 50%, var(--glow), transparent 75%);
  overflow: hidden;
}
.tick { position: absolute; left: var(--pivot-x); width: 2px; height: calc(var(--word-size) * .55);
  background: var(--line); transform: translateX(-1px); }
.tick.top { top: 0; }
.tick.bottom { bottom: 0; }
.word {
  position: absolute; top: 50%; left: 0; transform: translateY(-50%);
  font: 400 var(--word-size)/1 Georgia, "Times New Roman", serif; white-space: pre; color: var(--fg);
}
.word .p { color: var(--pivot); }
.wpm-label { text-align: center; color: var(--muted); font-style: italic; font-size: 1.15rem; margin-top: 22px;
  font-variant-numeric: tabular-nums; }

.context {
  width: 100%; max-width: 760px; max-height: 26vh; overflow-y: auto; margin: 4px 0 12px; padding: 14px 18px;
  font: 1.05rem/1.7 Georgia, serif; color: var(--muted); border-radius: 12px; background: var(--card);
  border: 1px solid var(--border);
}
.context span { cursor: pointer; border-radius: 3px; }
.context span:hover { color: var(--fg); }
.context .cur { color: var(--bg); background: var(--pivot); padding: 0 2px; }

.controls { width: 100%; max-width: 760px; display: grid; gap: 14px; padding-bottom: 8px; }
.progress-row { display: flex; align-items: center; gap: 12px; }
.progress-row input { flex: 1; }
.progress-txt { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.buttons { display: flex; justify-content: center; align-items: center; gap: 10px; }
.play {
  width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--fg); color: var(--bg);
  font-size: 1.5rem; display: grid; place-items: center; padding-left: 3px;
}
.play.playing { padding-left: 0; }

.speed-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--border); }
.speed-row label { font-weight: 600; }
.speed-row input { flex: 1; min-width: 0; }
.speed-row output { font: 600 1.25rem Georgia, serif; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.unit { color: var(--muted); font-size: .85rem; }

input[type="range"] { accent-color: var(--pivot); height: 28px; cursor: pointer; }

.options { color: var(--muted); font-size: .9rem; }
.options summary { cursor: pointer; }
.options label { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.options input[type="range"] { flex: 1; max-width: 260px; }
.keys { margin: 12px 0 0; line-height: 2; }
kbd { border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px;
  font: .8rem ui-monospace, monospace; background: var(--card); }

@media (max-width: 560px) {
  :root { --word-size: 40px; }
  .speed-row { flex-wrap: wrap; }
  .speed-row input { flex-basis: 100%; order: 3; }
  .unit { margin-right: auto; }
}