@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");:root{--bleu-clair:#82d0f5;--bleu-foncé:#0084c6;--rouge-clair:#e5281f;--rouge-foncé:#a01c18;--noir:#1d1d1b;--font-family:"Roboto",sans-serif}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background-color:#fff}h1,h2{color:var(--bleu-foncé);margin-bottom:20px;text-align:center}form{width:100%;max-width:400px;background:#fff;padding:20px;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,.1);display:flex;flex-direction:column;gap:10px}input{width:100%;border:1px solid var(--bleu-foncé);border-radius:5px;background-color:#fff}button,input{padding:12px;font-size:16px}button{background:var(--bleu-clair);color:#fff;border:none;border-radius:5px;cursor:pointer}button:disabled{background:#ccc;cursor:not-allowed}button:hover{background:var(--bleu-foncé)}p{text-align:center;font-size:14px;margin-top:10px}p[style*="color: red"]{color:var(--rouge-clair)}p[style*="color: green"]{color:green}@media (max-width:480px){.container{padding:10px}form{padding:15px}button,input{font-size:14px;padding:10px}}