html, body { margin: 0; height: 100%; }
body {
  display: grid; place-items: center; font-family: system-ui, "Segoe UI", sans-serif; color: #1e2126;
  background: radial-gradient(circle at 30% 20%, #7cc7f2, #2f7fd8 55%, #1d2433);
}
.carte {
  width: min(440px, calc(100% - 32px)); background: #fffdf6; border-radius: 28px; padding: 32px 28px; text-align: center;
  box-shadow: 0 18px 0 #c9b98f, 0 30px 60px #0006;
}
.embleme { width: 120px; height: 120px; object-fit: contain; margin-top: -90px; filter: drop-shadow(0 8px 10px #0005); }
h1 { margin: 8px 0 4px; font-size: 30px; letter-spacing: .5px; }
.sous-titre { margin: 0 0 18px; color: #5d636c; }
.info { margin: 0 0 10px; }
.erreur { min-height: 1.2em; color: #c8302a; font-weight: 700; margin: 0 0 14px; }
.bouton {
  display: inline-block; padding: 14px 26px; border-radius: 18px; background: #5865f2; color: #fff; font-weight: 800;
  font-size: 18px; text-decoration: none; box-shadow: 0 6px 0 #3c45a5; transition: transform .1s, box-shadow .1s;
}
.bouton:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #3c45a5; }
.bouton:active { transform: translateY(4px); box-shadow: 0 2px 0 #3c45a5; }
.petit { font-size: 13px; color: #6e7882; margin: 20px 0 0; }