:root{color-scheme:light;--encre:#30245b;--fond:#fff8ed;--jaune:#ffe271}
*{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--encre);font-family:ui-rounded,"Avenir Next",system-ui,sans-serif;background-image:radial-gradient(circle at 8% 18%,#ffe27188 0,transparent 28%),radial-gradient(circle at 92% 75%,#f5b8d366 0,transparent 30%);min-height:100svh}
body:before{content:"";position:fixed;inset:12px;border:1px solid #30245b22;border-radius:24px;pointer-events:none}
main{min-height:100svh;display:grid;place-items:center;padding:42px 24px}
.scene{width:min(100%,620px);text-align:center}
.badge{display:inline-block;font-size:.65rem;letter-spacing:.13em;font-weight:800;border:1px solid currentColor;border-radius:100px;padding:9px 15px;background:#ffffff80}
.mascotte{font-size:4rem;margin:24px 0 8px;transform:rotate(-12deg)}
.surtitre{font-weight:800;letter-spacing:.22em;font-size:.72rem}
h1{font-size:clamp(2.6rem,9vw,4.5rem);line-height:1.02;letter-spacing:-.065em;margin:18px 0}
h1>span:first-child{color:#b92d60}
.lste{display:inline-block;background:var(--jaune);padding:0 16px 7px;transform:rotate(-4deg);margin-top:8px;letter-spacing:-.03em}
.intro{font-size:1.08rem;line-height:1.65;margin:26px auto;max-width:500px}
form{max-width:440px;margin:30px auto 0;text-align:left}
label{display:block;font-size:.9rem;font-weight:750;margin-bottom:10px}
input{width:100%;border:2px solid var(--encre);border-radius:15px;background:white;color:var(--encre);padding:18px;font:inherit;font-size:1.1rem;box-shadow:4px 4px 0 #30245b15}
.aide{font-size:.76rem;margin:10px 0 20px;color:#625779}
button,.bouton{display:inline-flex;justify-content:center;align-items:center;gap:20px;min-height:56px;border:2px solid var(--encre);border-radius:15px;background:var(--encre);color:white;padding:16px 22px;font:inherit;font-weight:750;cursor:pointer;text-decoration:none}
form button{width:100%;box-shadow:4px 4px 0 #c5b7dc}
button:hover,.bouton:hover{filter:brightness(1.15)}
button:disabled{cursor:wait;opacity:.65}
:focus-visible{outline:3px solid #b92d60;outline-offset:5px}
.pied{font-size:.75rem;color:#625779;margin:35px 0 0}
.resultat h2{font-size:clamp(2.5rem,8vw,4rem);line-height:1.1;letter-spacing:-.045em;margin:18px 0}
.visuel{font-size:6.5rem;margin:24px auto;min-height:130px;display:grid;place-items:center}
.visuel video{width:100%;max-width:400px;height:auto;object-fit:contain;border-radius:20px;background:#0002}
.visuel img{max-width:100%;max-height:280px;border-radius:20px}
.secondaire{background:transparent;color:var(--encre);margin:16px auto 0;display:flex}
.son{display:block;margin:18px auto 0;background:none;color:var(--encre);border:0;min-height:44px;font-size:.8rem;text-decoration:underline}
.bouton[aria-disabled=true]{opacity:.65;cursor:default;background:#625779}
.decu{display:inline-block;animation:non .6s ease-in-out 3}
.tremble{animation:tremble .4s linear 2}
#confettis{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
#erreur{font-size:.85rem;color:#9b1744}
[hidden]{display:none!important}
@keyframes non{25%{transform:translateX(-13px) rotate(-12deg)}75%{transform:translateX(13px) rotate(12deg)}}
@keyframes tremble{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}}
@media(min-width:700px){main{padding:55px 30px}.mascotte{margin-top:28px}}
#titre-resultat:focus{outline:none}
.langue{position:absolute;top:22px;right:24px;min-height:44px;min-width:44px;padding:8px 12px;background:transparent;color:var(--encre);font-size:.75rem;z-index:3}
main{padding-top:80px}
@media(min-width:700px){main{padding-top:80px}}