:root { --fond: #fbfaf7; --texte: #1f1d1a; --doux: #6b665e; --accent: #1f6f50; --erreur: #a3271f; --carte: #ffffff; --bord: #e2ded6; }
@media (prefers-color-scheme: dark) { :root { --fond: #171614; --texte: #f1eee8; --doux: #aaa397; --accent: #57b88f; --erreur: #ff8a80; --carte: #22201d; --bord: #3a3732; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 18px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 34rem; margin: 0 auto; padding: 1rem 1rem 3rem; }
header h1 { margin: .5rem 0 0; font-size: 1.4rem; letter-spacing: .08em; color: var(--accent); }
.sous-titre { margin: 0 0 1rem; color: var(--doux); }
h2 { font-size: 1.25rem; margin: 1rem 0 .5rem; }
.ecran { display: none; }
.ecran.actif { display: block; }
.etapes { padding-left: 1.3rem; }
label { display: block; margin: 1rem 0 .3rem; font-weight: 600; }
.facultatif { font-weight: 400; color: var(--doux); }
input { width: 100%; font: inherit; padding: .7rem; border: 1px solid var(--bord); border-radius: .5rem; background: var(--carte); color: var(--texte); }
button { display: block; width: 100%; font: inherit; padding: .9rem; margin: .8rem 0 0; border-radius: .6rem; border: 1px solid var(--bord); background: var(--carte); color: var(--texte); cursor: pointer; }
button.principal { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
button:disabled { opacity: .45; cursor: default; }
button.enregistrer { border-color: var(--erreur); color: var(--erreur); font-weight: 600; }
.portee { background: var(--carte); border: 1px solid var(--bord); border-radius: .6rem; padding: .7rem .8rem; margin: .5rem 0; }
.portee label { display: flex; gap: .6rem; align-items: flex-start; margin: 0; font-weight: 400; }
.portee input { width: auto; margin-top: .3rem; }
.portee strong { display: block; }
.enregistreur { margin: 1rem 0; }
.minuteur { display: block; text-align: center; font-size: 1.6rem; margin-top: .5rem; font-variant-numeric: tabular-nums; }
audio { width: 100%; margin-top: .6rem; }
.erreur { color: var(--erreur); }
.message { font-size: 1.1rem; }
.petit { margin: 1rem 0 0; color: var(--doux); font-size: .95rem; }
progress { width: 100%; height: 1rem; }