/* Copie du style de la page Perspective de Jeremy (mêmes couleurs, tailles et animations). */
*,*::before,*::after{box-sizing:border-box;border:0 solid #e5e7eb}
html{line-height:1.5;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;line-height:inherit;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif}
h1,h2,p,ul{margin:0}ul{list-style:none;padding:0}
h1,h2{font-size:inherit;font-weight:inherit}
button,input{font:inherit;color:inherit;margin:0;padding:0;letter-spacing:inherit;line-height:inherit}
button{background:transparent;cursor:pointer;text-transform:none;-webkit-appearance:button}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
strong{font-weight:bolder}

@keyframes heroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-in{animation:heroIn 420ms ease-out both}
@keyframes stepIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.step-in{animation:stepIn 440ms cubic-bezier(.23,1,.32,1) both}
@keyframes barIn{from{transform:scaleX(var(--from))}to{transform:scaleX(var(--p))}}
.bar-fill{transform-origin:left center;transform:scaleX(var(--p));animation:barIn 380ms ease-out both}
@keyframes fadeOnly{from{opacity:0}to{opacity:1}}
input:user-invalid{border-color:#B91C1C;background-color:#FFF5F5}
@media (prefers-reduced-motion:reduce){.hero-in,.step-in{animation:fadeOnly 200ms ease-out both}.bar-fill{animation:none}}

/* Utilitaires (équivalents Tailwind de la page d'origine) */
.mx-auto{margin-left:auto;margin-right:auto}.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.items-start{align-items:flex-start}.items-center{align-items:center}.justify-between{justify-content:space-between}.self-start{align-self:flex-start}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}
.h-16{height:4rem}.w-16{width:4rem}.h-full{height:100%}.w-full{width:100%}.min-h-11{min-height:2.75rem}.min-h-12{min-height:3rem}.min-h-14{min-height:3.5rem}.min-h-16{min-height:4rem}
.min-w-0{min-width:0}.shrink-0{flex-shrink:0}.rotate-\[-4deg\]{transform:rotate(-4deg)}
.text-balance{text-wrap:balance}.text-pretty{text-wrap:pretty}.break-words{overflow-wrap:break-word}
.rounded-\[6px\]{border-radius:6px}.rounded-full{border-radius:9999px}.border-2{border-width:2px}.border-\[\#111111\]{border-color:#111}
.bg-\[\#111111\]{background-color:#111}.bg-\[\#C2410C\]{background-color:#C2410C}.bg-\[\#FFE066\]{background-color:#FFE066}.bg-\[\#FFFDF7\]{background-color:#FFFDF7}.bg-white{background-color:#fff}
.object-cover{object-fit:cover}.object-\[50\%_30\%\]{object-position:50% 30%}
.p-5{padding:1.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}
.pb-14{padding-bottom:3.5rem}.pl-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}
.text-left{text-align:left}.text-center{text-align:center}
.text-\[clamp\(1\.85rem\,7\.8vw\,2\.5rem\)\]{font-size:clamp(1.85rem,7.8vw,2.5rem)}
.text-\[clamp\(2rem\,8\.6vw\,2\.75rem\)\]{font-size:clamp(2rem,8.6vw,2.75rem)}
.text-\[clamp\(2rem\,8\.6vw\,2\.9rem\)\]{font-size:clamp(2rem,8.6vw,2.9rem)}
.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}
.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-normal{font-weight:400}.font-semibold{font-weight:600}
.uppercase{text-transform:uppercase}.italic{font-style:italic}
.leading-6{line-height:1.5rem}.leading-\[1\.12\]{line-height:1.12}.leading-\[1\.1\]{line-height:1.1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}
.tracking-\[-0\.01em\]{letter-spacing:-.01em}.tracking-\[-0\.025em\]{letter-spacing:-.025em}.tracking-\[-0\.02em\]{letter-spacing:-.02em}.tracking-wide{letter-spacing:.025em}
.text-\[\#111111\]{color:#111}.text-\[\#3F3F3F\]{color:#3F3F3F}.text-\[\#444444\]{color:#444}.text-\[\#FFE066\]{color:#FFE066}.text-\[\#B91C1C\]{color:#B91C1C}.text-white{color:#fff}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.shadow-\[3px_3px_0_\#111111\]{box-shadow:3px 3px 0 #111}.shadow-\[4px_4px_0_\#111111\]{box-shadow:4px 4px 0 #111}
.transition-transform{transition:transform .15s ease-out}
.\[--from\:0\.25\]{--from:.25}.\[--from\:0\.5\]{--from:.5}.\[--from\:0\.75\]{--from:.75}.\[--p\:0\.5\]{--p:.5}.\[--p\:0\.75\]{--p:.75}.\[--p\:1\]{--p:1}
.\[animation-delay\:60ms\]{animation-delay:60ms}.\[animation-delay\:120ms\]{animation-delay:.12s}
.\[box-decoration-break\:clone\]{-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hover\:bg-\[\#A8380A\]:hover,.active\:bg-\[\#A8380A\]:active{background-color:#A8380A}
.active\:scale-\[0\.97\]:active{transform:scale(.97)}
.focus-visible\:outline:focus-visible{outline-style:solid;outline-width:3px;outline-offset:2px;outline-color:#C2410C}
.focus-visible\:outline-\[\#111111\]:focus-visible{outline-color:#111}
@media (min-width:640px){.sm\:max-w-xl{max-width:36rem}.sm\:p-6{padding:1.5rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}}
@media (min-width:768px){.md\:mx-auto{margin-left:auto;margin-right:auto}.md\:max-w-3xl{max-width:48rem}.md\:max-w-\[560px\]{max-width:560px}.md\:max-w-\[620px\]{max-width:620px}}
@media (min-width:1024px){.lg\:max-w-5xl{max-width:64rem}}

/* Composants répétés (mêmes classes que les boutons de la page d'origine, regroupées) */
.choix{display:flex;width:100%;align-items:center;gap:1rem;border-radius:6px;border:2px solid #111;background:#fff;padding-left:1rem;padding-right:1rem;text-align:left;font-size:1.125rem;font-weight:600;line-height:1.375;box-shadow:3px 3px 0 #111;transition:transform .15s ease-out}
.choix:hover,.choix:active{background:#FFF6D6}.choix:active{transform:scale(.97)}
.choix:focus-visible{outline:3px solid #C2410C;outline-offset:2px}
.lettre{flex-shrink:0;font-size:1.25rem;font-weight:800;color:#555}
.reponse{min-width:0;overflow-wrap:break-word}
.retour{min-height:2.75rem;padding:0 .25rem;font-size:1rem;text-decoration:underline;text-underline-offset:4px}
.retour:focus-visible{outline:3px solid #C2410C}
.barre{height:1rem;width:100%;overflow:hidden;border-radius:6px;border:2px solid #111;background:#fff}
.titre-question{text-align:center;font-size:clamp(1.75rem,7.4vw,2.25rem);font-weight:800;line-height:1.25;letter-spacing:-.02em;text-wrap:balance}
.champ{width:100%;min-height:3rem;border-radius:6px;border:2px solid #111;background:#FFFDF7;padding:0 .75rem;font-size:1.125rem;line-height:1.75rem;transition:background-color .15s}
.champ:focus{background:#fff;outline:3px solid #FFE066;outline-offset:1px}
#bouton-envoi[disabled]{opacity:.7;cursor:wait}