/* Compléments à stil.css pour la page élève. */
body { margin: 0; }
.head { display: grid; gap: 8px; }
.who { margin: 0; color: var(--muted); }
.who b { color: var(--ink); }
/* bouton qui ressemble à un lien discret */
.linkbtn { font: inherit; font-size: 0.9rem; padding: 0; border: 0; background: none; color: var(--muted); text-decoration: underline; cursor: pointer; }
.linkbtn:hover { color: var(--accent); }
.chapter { font-size: 1rem; font-weight: 600; color: var(--muted); }
.lvl .best { justify-self: start; margin-top: 4px; }
.pill.mid { background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.fields { display: grid; gap: 6px; }
.fields input { font-size: 1.1rem; }
#initial { max-width: 6em; text-transform: uppercase; }
.fb { display: grid; gap: 10px; }
.fb:empty { display: none; }
/* bandeau réseau, discret, en bas */
.natfel {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: var(--hint-soft); color: var(--hint-ink); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; font-size: 0.9rem; font-weight: 700; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  max-width: calc(100vw - 32px); box-sizing: border-box; text-align: center; z-index: 10;
}
/* après la réponse, la bonne / mauvaise option reste bien lisible */
.opt.right:disabled, .opt.wrong:disabled { opacity: 1; }

/* champ du code personnel */
.kodfalt { font: 700 1.2rem/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.02em; }