:root {
  --fond: #f7f5f0;
  --carte: #ffffff;
  --texte: #1d232b;
  --texte2: #5f6873;
  --accent: #1f4e79;
  --or: #b8862b;
  --ligne: #e3e0d8;
  --niveau: rgba(31, 78, 121, 0.18);
  --ok: #2b8a3e;
  --attention: #b8650b;
  --alerte: #c92a2a;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #12171d;
    --carte: #1b222b;
    --texte: #e8e6e1;
    --texte2: #9aa4ae;
    --accent: #7fb2e5;
    --or: #e0b25c;
    --ligne: #2c3540;
    --niveau: rgba(127, 178, 229, 0.2);
    --ok: #69db7c;
    --attention: #ffa94d;
    --alerte: #ff6b6b;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}
header {
  background: var(--carte);
  border-bottom: 1px solid var(--ligne);
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
}
h1 { font: 600 1.25rem/1.3 Georgia, "Times New Roman", serif; margin: 0; max-width: 760px; margin-inline: auto; }
nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--carte); border-top: 1px solid var(--ligne);
  padding-bottom: env(safe-area-inset-bottom);
}
nav a {
  text-align: center; padding: 12px 4px 14px; color: var(--texte2); text-decoration: none; font-size: 0.95rem;
  border-top: 2px solid transparent;
}
nav a.actif { color: var(--accent); border-top-color: var(--accent); font-weight: 600; }
main { max-width: 760px; margin: 0 auto; padding: 16px 16px calc(80px + env(safe-area-inset-bottom)); }
a { color: var(--accent); }
h2 { font: 600 1.1rem/1.3 Georgia, serif; margin: 0 0 10px; }
h3 { font-size: 1rem; margin: 18px 0 6px; }
p { margin: 0 0 10px; }
.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.intro { color: var(--texte2); }
.discret { color: var(--texte2); font-size: 0.9rem; }
.grand { font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ok { color: var(--ok); }
.attention { color: var(--attention); }
.alerte { color: var(--alerte); }
.cache { display: none; }

button, .bouton {
  font: inherit; font-weight: 600; border: 0; border-radius: 10px; padding: 10px 16px;
  background: var(--accent); color: var(--carte); cursor: pointer; display: inline-block;
}
button.secondaire, .bouton.secondaire { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
button.rouge { background: var(--alerte); }
button.petit { padding: 6px 12px; font-size: 0.9rem; }
button.gros { font-size: 1.1rem; padding: 14px 28px; }
button:disabled { opacity: 0.5; }
.bouton input[type=file] { display: none; }
input, select {
  font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--ligne);
  background: var(--fond); color: var(--texte); max-width: 100%;
}
label { display: block; margin-bottom: 10px; }
label.option { display: flex; gap: 8px; align-items: center; color: var(--texte2); font-size: 0.92rem; }
label input[type=password] { width: 100%; }
.ligne-commande { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
.boutons { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
details { margin: 6px 0; }
summary { cursor: pointer; }

.programme { display: grid; gap: 10px; margin: 12px 0 18px; }
.bloc {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; text-decoration: none; color: var(--texte);
  background: var(--carte); border: 1px solid var(--ligne); border-left: 4px solid var(--or); border-radius: 10px; padding: 12px 14px;
}
.bloc .min { grid-row: span 2; color: var(--or); font-weight: 700; font-variant-numeric: tabular-nums; align-self: center; }
.bloc span:last-child { color: var(--texte2); font-size: 0.92rem; }
.bloc.fait { border-left-color: var(--ok); opacity: 0.7; }
.bloc.fait strong::after { content: " ✓"; color: var(--ok); }
.mot { font-family: Georgia, serif; font-size: 1.15rem; }
.mot-carte { font: 600 1.8rem Georgia, serif; text-align: center; margin: 16px 0; }
.exemple { font-style: italic; color: var(--texte2); border-left: 3px solid var(--ligne); padding-left: 10px; }
.liens { font-size: 0.85rem; }

.enregistreur { margin-top: 12px; }
.chrono { font: 600 1.6rem/1 ui-monospace, Menlo, monospace; }
.compteurs { display: flex; gap: 16px; color: var(--texte2); }
.compteurs b { color: var(--texte); font-size: 1.2rem; }
canvas.oscillo { width: 100%; height: 120px; display: block; background: var(--fond); border-radius: 8px; margin: 8px 0; }
canvas.grand-oscillo { height: 200px; }
.transcription { color: var(--texte2); font-size: 0.92rem; min-height: 1em; }
.mesures { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; }
.mesure { background: var(--fond); border-radius: 8px; padding: 8px 10px; }
.mesure span { display: block; color: var(--texte2); font-size: 0.8rem; }
.mesure b { font-size: 1.05rem; }
canvas.frise { width: 100%; height: 70px; display: block; margin-top: 8px; }
.legende { font-size: 0.8rem; color: var(--texte2); }
.pastille { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 4px 0 8px; vertical-align: middle; }
audio { width: 100%; margin: 8px 0; }
.observations p { padding-left: 10px; border-left: 3px solid currentColor; }
.observations p.ok { border-color: var(--ok); color: var(--texte); }
.observations p.attention { border-color: var(--attention); color: var(--texte); }
.observations p.alerte { border-color: var(--alerte); color: var(--texte); }
.critique { margin-top: 12px; border-top: 1px solid var(--ligne); padding-top: 8px; }
.critique pre { white-space: pre-wrap; font: inherit; }
.consigne { font-weight: 600; }
.sujet { font: 600 1.2rem/1.4 Georgia, serif; }

.series p { font: 1.15rem/1.6 ui-monospace, Menlo, monospace; margin: 2px 0; padding: 2px 6px; border-radius: 6px; }
.series p.courant { background: var(--niveau); }
.mots { font-size: 1.05rem; }
.testeur { border-top: 1px solid var(--ligne); padding: 8px 0; }
.cible { font-size: 1.1rem; font-family: Georgia, serif; }
.score { font-size: 0.92rem; }
.correction { font-size: 1.1rem; font-weight: 600; }
.etape ul { padding-left: 20px; }

.texte-lu { font: 1.15rem/1.9 Georgia, serif; margin: 12px 0; }
.texte-lu .respire { color: var(--or); font-weight: 700; }
.texte-lu .pause { color: var(--texte2); }

.note-geante { font: 700 3rem/1 Georgia, serif; text-align: center; color: var(--accent); }
.cents { position: relative; height: 8px; background: var(--ligne); border-radius: 4px; margin: 8px auto; max-width: 300px; }
.cents::after { content: ""; position: absolute; left: 50%; top: -4px; width: 2px; height: 16px; background: var(--texte2); }
.aiguille { position: absolute; top: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--or); transform: translateX(-50%); left: 50%; transition: left 0.08s; }

.souffle-rond { width: 90px; height: 90px; border-radius: 50%; background: var(--niveau); border: 3px solid var(--accent); margin: 20px auto; }
.jauge { height: 10px; background: var(--ligne); border-radius: 5px; overflow: hidden; margin: 8px 0; }
.jauge div { height: 100%; width: 0; background: var(--or); }
.phrase-lue { font: 1.2rem Georgia, serif; }
.resultats-souffle { font-size: 1.4rem; letter-spacing: 4px; }
canvas.courbe { width: 100%; height: auto; }
.evolution h3 span { font-weight: 400; }
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--texte); color: var(--fond); padding: 10px 16px; border-radius: 10px; max-width: 90vw; z-index: 10;
}
progress { width: 100%; }

:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
textarea { font: inherit; width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--ligne); background: var(--fond); color: var(--texte); }
.etiquette { display: block; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte2); }
.cible-cycle { display: grid; gap: 2px; background: var(--carte); border: 1px solid var(--ligne); border-left: 4px solid var(--or); border-radius: 10px; padding: 12px 14px; margin: 12px 0; }
.cible-cycle span:last-child { color: var(--texte2); font-size: 0.92rem; }
.curseur-voix { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin: 12px 0; color: var(--texte2); }
.curseur-voix .option { margin: 0; }
.formats { display: grid; gap: 10px; margin: 12px 0 16px; }
.format-btn {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: 2px 12px; text-align: left; font-weight: 400;
  background: var(--carte); color: var(--texte); border: 1px solid var(--ligne); border-radius: 12px; padding: 14px;
}
.format-btn .min { grid-row: span 2; align-self: center; color: var(--or); font-weight: 700; font-variant-numeric: tabular-nums; }
.format-btn strong { font-size: 1.05rem; }
.format-btn span:last-child { color: var(--texte2); font-size: 0.92rem; }
.lecteur-entete { background: var(--carte); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.sommaire { margin: 0; padding-left: 20px; font-size: 0.92rem; }
.sommaire li.fait { color: var(--texte2); text-decoration: line-through; text-decoration-color: var(--ligne); }
.sommaire li.actif { font-weight: 600; color: var(--accent); }
.bloc-guide { display: grid; gap: 8px; }
.onglets { display: flex; gap: 0; background: var(--ligne); border-radius: 10px; padding: 3px; margin-bottom: 14px; overflow-x: auto; }
.onglets button { flex: 1; background: transparent; color: var(--texte2); font-weight: 500; padding: 8px 10px; border-radius: 8px; white-space: nowrap; }
.onglets button.actif { background: var(--carte); color: var(--texte); font-weight: 600; }
.atelier .format { font-size: 0.95rem; }
.detail { font-size: 0.95rem; border-left: 3px solid var(--ligne); padding-left: 10px; }
.carte-prepa { display: grid; gap: 4px; margin: 8px 0; }
.carte-prepa label { margin: 0; font-size: 0.85rem; color: var(--texte2); }
.carte-prepa input { width: 100%; display: block; margin-top: 2px; color: var(--texte); }
.oublis { display: grid; gap: 2px; margin: 6px 0; }
.requisitions { background: var(--fond); border-radius: 8px; padding: 10px 12px; font-style: italic; }
.entete-prise { margin: 8px 0; }
.cible-prise { font-size: 0.9rem; color: var(--or); font-weight: 600; margin: 0 0 6px; }
.mots-cles { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 600 1.6rem/1.2 Georgia, serif; min-height: 2rem; cursor: pointer; }
.mots-cles.masques span { filter: blur(10px); }
.bandeau-president { margin-top: 10px; padding: 14px; border-radius: 10px; background: var(--texte); color: var(--fond); font: 600 1.2rem/1.3 Georgia, serif; text-align: center; }
.chrono.depasse { color: var(--alerte); }
.en-prise .chrono { font-size: 2.4rem; }
.retour { display: grid; gap: 6px; margin-bottom: 14px; }
.retour .option { margin: 0; color: var(--texte); }
.consigne-fin { margin-top: 12px; }
.verif { display: grid; gap: 6px; margin-top: 8px; }
.verif-ligne { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.definition-carte { font: 1.15rem/1.5 Georgia, serif; margin: 12px 0; }
.question { border-top: 1px solid var(--ligne); padding-top: 8px; }
.question .option { margin: 0; }
.grille-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.module { display: grid; gap: 4px; padding: 14px; background: var(--carte); border: 1px solid var(--ligne); border-radius: 12px; color: var(--texte); text-decoration: none; }
.module span { color: var(--texte2); font-size: 0.88rem; }
.paires { padding-left: 18px; }
.historique { padding-left: 18px; font-size: 0.92rem; }
a.bouton { text-decoration: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }