:root {
    --bg: #14110e;
    --bg-2: #0b0907;
    --paper: #1e1914;
    --paper-2: #262019;
    --ink: #f1e6cf;
    --muted: #a99a80;
    --gold: #d9a441;
    --gold-soft: rgba(217, 164, 65, .18);
    --ember: #c9553f;
    --btn-ink: #1a130b;
    --line: #3d3328;
    --error-bg: #3a1d17;
    --shadow: 0 30px 60px -25px rgba(0, 0, 0, .8);
}
@media (prefers-color-scheme: light) {
    :root {
        --bg: #ece2cc;
        --bg-2: #d8c8a6;
        --paper: #f8f1e0;
        --paper-2: #fffaee;
        --ink: #2a2118;
        --muted: #6e5f4b;
        --gold: #a8741c;
        --gold-soft: rgba(168, 116, 28, .14);
        --ember: #8b2a1d;
        --btn-ink: #fff8ea;
        --line: #d2bf98;
        --error-bg: #f5dcd5;
        --shadow: 0 30px 60px -30px rgba(80, 55, 20, .45);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, var(--gold-soft), transparent 70%),
        radial-gradient(ellipse at bottom, var(--bg), var(--bg-2));
    color: var(--ink);
    font: 18px/1.55 "EB Garamond", Georgia, serif;
}

/* ---------- Carte ---------- */
.card {
    position: relative;
    width: 100%;
    max-width: 580px;
    background: linear-gradient(180deg, var(--paper-2), var(--paper));
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 44px 32px 28px;
    box-shadow: var(--shadow);
    animation: rise .6s cubic-bezier(.2, .8, .2, 1) both;
}
.card::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid var(--line);
    border-radius: 9px;
    pointer-events: none;
}

.lang-switch {
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 1;
    font-size: 15px;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: color .2s, border-color .2s;
}
.lang-switch:hover { color: var(--gold); border-color: var(--gold); }

/* ---------- En-tête ---------- */
header { text-align: center; margin-bottom: 26px; }
.crest {
    width: 52px;
    height: 52px;
    color: var(--gold);
    filter: drop-shadow(0 0 12px var(--gold-soft));
    animation: float 4s ease-in-out infinite;
}
h1, h2, legend { font-family: Cinzel, Georgia, serif; letter-spacing: .04em; }
h1 { font-size: 32px; margin: 10px 0 8px; font-weight: 800; }
h2 { font-size: 24px; margin: 0 0 8px; color: var(--gold); }
.subtitle { margin: 0 auto; max-width: 440px; color: var(--muted); }

/* ---------- Formulaire ---------- */
fieldset { border: 0; padding: 0; margin: 0 0 24px; }
legend {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
    margin-bottom: 12px;
    padding: 0;
}
legend label { cursor: pointer; }

.class-opt input, .pill input { position: absolute; opacity: 0; pointer-events: none; }

/* Cartes de classe */
.classes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.class-body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    height: 100%;
    padding: 22px 14px 18px;
    border: 2px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    cursor: pointer;
    overflow: hidden;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s, box-shadow .25s;
}
.class-body::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, var(--gold-soft), transparent 65%);
    opacity: 0;
    transition: opacity .3s;
}
.class-body > * { position: relative; }
.class-body svg {
    width: 58px;
    height: 58px;
    color: var(--ink);
    transition: color .25s, transform .3s;
}
.class-body strong { font-family: Cinzel, Georgia, serif; font-size: 20px; }
.class-body small { color: var(--muted); font-size: 15px; line-height: 1.35; }

.class-opt:hover .class-body {
    transform: translateY(-4px);
    border-color: var(--gold);
    box-shadow: 0 14px 30px -14px var(--gold);
}
.class-opt:hover .class-body::before { opacity: 1; }
.class-opt:hover .class-body svg { color: var(--gold); }

/* Guerrier : coup d'épée */
.class-opt:first-child:hover .class-body svg { animation: swing .6s ease-in-out; }
/* Archer : la flèche recule puis part */
.class-opt:last-child .class-body svg path:nth-child(3) { transition: transform .3s; }
.class-opt:last-child:hover .class-body svg path:nth-child(3) { animation: draw 1s ease-in-out; }

/* Sélection */
.class-opt input:checked + .class-body {
    border-color: var(--gold);
    background: linear-gradient(180deg, var(--gold-soft), var(--paper));
    animation: pick .35s ease-out;
}
.class-opt input:checked + .class-body::before { opacity: 1; }
.class-opt input:checked + .class-body svg { color: var(--gold); transform: scale(1.08); }
.class-opt input:checked + .class-body::after {
    content: "✓";
    position: absolute;
    top: 10px;
    right: 12px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    font: 700 14px/1 system-ui, sans-serif;
    color: var(--btn-ink);
    background: var(--gold);
    border-radius: 50%;
    animation: pop .3s cubic-bezier(.3, 1.6, .5, 1);
}

.class-opt input:focus-visible + .class-body,
.pill input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Pilules sexe */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill span {
    display: inline-block;
    padding: 8px 18px;
    border: 2px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    font-size: 17px;
    transition: border-color .2s, background .2s, color .2s, transform .15s;
}
.pill:hover span { border-color: var(--gold); transform: translateY(-1px); }
.pill input:checked + span { border-color: var(--gold); background: var(--gold); color: var(--btn-ink); }

/* Âge */
.age {
    width: 130px;
    font: inherit;
    font-size: 22px;
    padding: 8px 14px;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--line);
    border-radius: 10px;
    transition: border-color .2s, box-shadow .2s;
}
.age:hover { border-color: var(--gold); }
.age:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }

/* Bouton */
.btn {
    position: relative;
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 15px;
    overflow: hidden;
    font: 700 17px Cinzel, Georgia, serif;
    letter-spacing: .08em;
    color: var(--btn-ink);
    background: linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 75%, var(--ember)));
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: transform .15s, box-shadow .25s;
}
.btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-20deg);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px var(--gold); }
.btn:hover::after { animation: shine .8s ease-out; }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.privacy { font-size: 14px; color: var(--muted); margin: 18px 0 0; text-align: center; }
.errors {
    background: var(--error-bg);
    border-left: 4px solid var(--ember);
    padding: 8px 14px;
    margin-bottom: 20px;
    border-radius: 6px;
    animation: shake .4s;
}
.errors p { margin: 4px 0; }
.thanks { text-align: center; animation: rise .5s ease-out both; }
.thanks .btn { max-width: 260px; margin: 20px auto 0; }
.hp { position: absolute; left: -9999px; }

/* ---------- Animations ---------- */
@keyframes rise  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes swing {
    0%   { transform: rotate(0); }
    30%  { transform: rotate(-25deg); }
    60%  { transform: rotate(15deg); }
    100% { transform: rotate(0); }
}
@keyframes draw {
    0%   { transform: translateX(0); }
    40%  { transform: translateX(-8px); }
    55%  { transform: translateX(-8px); }
    75%  { transform: translateX(14px); opacity: 0; }
    76%  { transform: translateX(-4px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
@keyframes pick  { 0% { transform: scale(.97); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } }
@keyframes pop   { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes shine { to { left: 130%; } }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 420px) {
    .card { padding: 40px 18px 22px; }
    h1 { font-size: 26px; }
    .classes { gap: 10px; }
    .class-body { padding: 18px 10px 14px; }
    .class-body small { font-size: 14px; }
}