:root { --fond: #f4f4f5; --texte: #1d1d1f; --discret: #6e6e73; --accent: #1f6feb; --oui: #1a7f4b; --non: #b42318; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; font-weight: 300; min-height: 100vh; }
main { max-width: 32rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
h1 { font-weight: 200; font-size: 1.6rem; margin: 0 0 1.5rem; text-align: center; }
.attente { text-align: center; margin-top: 30vh; }
.attente p { font-size: 1.25rem; color: var(--discret); }
.point { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--accent); animation: pouls 1.6s ease-in-out infinite; }
@keyframes pouls { 50% { opacity: .25; } }
.question { background: #fff; border-radius: 1rem; padding: 1.25rem 1rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.question h2 { font-size: 1.15rem; font-weight: 400; margin: 0 0 1rem; }
.choix { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
button.rep { font: inherit; font-size: 1.5rem; padding: 1.4rem 0; border-radius: .9rem; border: 2px solid #d2d2d7; background: #fff; color: var(--texte); touch-action: manipulation; }
button.rep[aria-pressed="true"].oui { background: var(--oui); border-color: var(--oui); color: #fff; }
button.rep[aria-pressed="true"].non { background: var(--non); border-color: var(--non); color: #fff; }
button.rep:disabled { opacity: .55; }
button.valider { width: 100%; font: inherit; font-size: 1.25rem; padding: 1.1rem; border: 0; border-radius: .9rem; background: var(--accent); color: #fff; margin-top: .5rem; }
button.valider:disabled { background: #b8c4d6; }
.vote { color: var(--discret); text-align: center; margin: .25rem 0 0; }
.merci { text-align: center; color: var(--oui); font-size: 1.1rem; margin: 1rem 0 0; }
.erreur { text-align: center; color: var(--non); margin-top: .75rem; }
input.code { width: 100%; font: inherit; font-size: 2rem; letter-spacing: .3em; text-align: center; text-transform: uppercase; padding: .8rem; border: 2px solid #d2d2d7; border-radius: .9rem; margin-bottom: .5rem; }
input.code::placeholder { font-size: 1.15rem; letter-spacing: normal; text-transform: none; color: #8e8e93; }