:root {
  --fond: #f5f7fa; --carte: #ffffff; --texte: #1b2430; --doux: #5b6776; --bord: #d5dce5;
  --accent: #1f4e79; --accent-texte: #ffffff; --actif: #dbe8f5; --rouge: #b3261e; --vert: #2e7d4f;
}
@media (prefers-color-scheme: dark) {
  :root { --fond: #11161d; --carte: #1a222c; --texte: #e6ebf1; --doux: #9aa7b6; --bord: #2c3846; --accent: #6ea8dc; --accent-texte: #0b1520; --actif: #23405e; --rouge: #ff8a80; --vert: #7fd1a0; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fond); color: var(--texte); }
.entete { padding: 16px 16px 8px; }
.entete h1 { margin: 4px 0 0; font-size: 1.4rem; }
.entete p { margin: 2px 0 0; color: var(--doux); }
.ecran { padding: 8px 16px 96px; display: flex; flex-direction: column; gap: 12px; max-width: 640px; margin: 0 auto; }
.grille { display: grid; grid-template-columns: repeat(3, 1fr); }
button { font: inherit; border-radius: 12px; border: 1px solid var(--bord); background: var(--carte); color: var(--texte); padding: 12px; min-height: 48px; cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
.principal { background: var(--accent); color: var(--accent-texte); border: none; font-weight: 600; font-size: 1.15rem; padding: 18px; display: flex; flex-direction: column; align-items: center; }
.principal small { font-weight: 400; font-size: .85rem; opacity: .85; }
.secondaire { font-weight: 500; }
.lien { background: none; border: none; color: var(--accent); text-decoration: underline; }
.retour { background: none; border: none; color: var(--accent); padding: 0; min-height: 0; }
.banniere { background: var(--rouge); color: #fff; font-weight: 700; padding: 12px 16px; }
.banniere ul { margin: 6px 0 0; padding-left: 20px; font-weight: 400; }
.avis { margin: 0 16px; padding: 10px 12px; border-radius: 10px; background: var(--actif); }
.info { color: var(--doux); margin: 4px 0; font-size: .95rem; }
.centre { text-align: center; }
.erreur { color: var(--rouge); margin: 4px 0; font-size: .95rem; }
.formulaire section { background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; padding: 12px; }
.formulaire h2 { margin: 0 0 8px; font-size: 1rem; }
.formulaire h3 { margin: 10px 0 6px; font-size: .9rem; color: var(--doux); }
.requis { font-weight: 400; font-size: .8rem; color: var(--rouge); }
.rangee { display: flex; gap: 8px; }
.rangee .choix { flex: 1; }
.choix.actif { background: var(--actif); border-color: var(--accent); font-weight: 600; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }
.etiquettes .choix { min-height: 40px; padding: 8px 12px; border-radius: 20px; font-size: .95rem; }
input, select, textarea { width: 100%; font: inherit; padding: 12px; border-radius: 10px; border: 1px solid var(--bord); background: var(--fond); color: var(--texte); margin-top: 6px; }
label { display: block; margin: 8px 0; font-size: .95rem; color: var(--doux); }
.compteur { display: flex; align-items: center; gap: 16px; }
.compteur output { font-size: 1.4rem; min-width: 2ch; text-align: center; }
.compteur .choix { width: 56px; font-size: 1.3rem; }
.avec-micro { display: flex; gap: 8px; align-items: flex-start; }
.micro { margin-top: 6px; width: 52px; flex: none; }
.micro.ecoute { background: var(--rouge); color: #fff; }
.devoirs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.devoirs li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.devoirs small { display: block; color: var(--doux); font-size: .85rem; }
.jour { list-style: none; margin: 0; padding: 0; }
.jour li { padding: 6px 0; border-bottom: 1px solid var(--bord); }
.jour span:first-child { color: var(--doux); display: inline-block; width: 4em; }
.ok { color: var(--vert); font-weight: 700; }
h2 { font-size: 1rem; margin: 8px 0 0; }
.statut { position: fixed; bottom: 0; left: 0; right: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); font-size: .85rem; background: var(--carte); border-top: 1px solid var(--bord); color: var(--doux); }
.statut.erreur, .statut.non-configuree { color: var(--rouge); }
.statut.ok { color: var(--vert); }
.erreurs { font-size: .9rem; padding-left: 18px; }
.chargement { padding: 32px; text-align: center; color: var(--doux); }