:root{--fond:#f6f4ef;--carte:#fff;--texte:#1f2328;--doux:#6b6f76;--bord:#e2ded5;--accent:#2f6f73;--accent-txt:#fff;--onde:#b9b4a8;--garde:#2f6f73;--poignee:#c0532f;--ok:#2e7d4f;--err:#b3261e}
@media (prefers-color-scheme:dark){:root{--fond:#16181b;--carte:#1f2226;--texte:#e8e6e1;--doux:#9ba0a6;--bord:#30343a;--accent:#5fb3b3;--accent-txt:#0d1a1a;--onde:#4a4f56;--garde:#5fb3b3;--poignee:#f08a5d;--ok:#6fcf97;--err:#f28b82}}
*{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--texte);font:16px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
.barre{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--bord)}
h1{font-size:18px;margin:0}h2{font-size:22px;margin:18px 0 10px}h3{font-size:16px;margin:0 0 8px;display:flex;justify-content:space-between;gap:8px}
main{max-width:980px;margin:0 auto;padding:0 16px 40px}
.carte{background:var(--carte);border:1px solid var(--bord);border-radius:12px;padding:14px;margin:12px 0}
.ligne{display:flex;gap:8px;flex-wrap:wrap}.ligne input{flex:1;min-width:200px}
input,textarea{font:inherit;padding:10px 12px;border:1px solid var(--bord);border-radius:8px;background:var(--fond);color:var(--texte);width:100%}
button{font:inherit;border:1px solid var(--bord);background:var(--carte);color:var(--texte);border-radius:8px;padding:8px 12px;cursor:pointer}
button:disabled{opacity:.5;cursor:default}
.principal{background:var(--accent);color:var(--accent-txt);border-color:var(--accent);font-weight:600}
.grand{width:100%;padding:14px;font-size:18px;margin-top:10px}
.lien{border:0;background:none;color:var(--accent);padding:4px 0}
.message{min-height:1.4em;margin:8px 0 0}.message.ok{color:var(--ok)}.message.err{color:var(--err)}
.doux{color:var(--doux)}.petit{font-size:13px;margin:6px 0}
.trace{background:var(--carte);border:1px solid var(--ok);border-radius:10px;padding:10px 12px;margin:8px 0}.trace b{color:var(--ok)}.trace ul{margin:6px 0 0;padding-left:18px;color:var(--doux);font-size:14px}
.consigne{background:var(--carte);border-left:4px solid var(--accent);padding:10px 12px;border-radius:6px}
.taches{list-style:none;padding:0;margin:0}
.taches li{background:var(--carte);border:1px solid var(--bord);border-radius:10px;padding:12px 14px;margin:8px 0;display:flex;justify-content:space-between;gap:12px;align-items:center;cursor:pointer}
.taches li .etat{font-size:13px;color:var(--doux);white-space:nowrap}
details{margin-top:20px}summary{cursor:pointer;color:var(--doux)}
.poignees{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:700px){.poignees{grid-template-columns:1fr}}
.poignee{margin:0}
canvas{width:100%;display:block;border-radius:6px;background:var(--fond);touch-action:none;cursor:ew-resize}
.boutons{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.boutons button{flex:1;min-width:52px;padding:6px 4px}
.ecouter{width:100%}
.zooms{display:flex;gap:4px;margin-left:auto}.zooms button{padding:2px 12px;font-size:18px;line-height:1.2}
.temps{font-variant-numeric:tabular-nums;color:var(--doux);font-weight:400}
.lecteur{display:flex;align-items:center;gap:10px}
label{display:block;margin-bottom:6px;font-weight:600}