:root{color-scheme:dark;--fond:#101224;--surface:#171a33;--surface-haute:#1f2342;--texte:#eef0ff;--attenue:#a3a7c4;--bordure:#2a2e4d;--trait:#eef0ff;--bleu:#5aa0ff;--accent-texte:#ffa040;--lanterne:#ffa040;--lanterne-vive:#ffb766;--discord:#5865f2;--discord-sombre:#4752c4;--encre:#101224;--alerte:#ff8a7a}
@media (prefers-color-scheme:light){:root{color-scheme:light;--fond:#f5f4ef;--surface:#fdfcf8;--surface-haute:#efede5;--texte:#15172b;--attenue:#5b5e78;--bordure:#d8d6cc;--trait:#15172b;--bleu:#2a5fd0;--accent-texte:#a35a00;--alerte:#b3261e}}
*,::before,::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--texte);font-family:ui-sans-serif,system-ui,sans-serif;font-size:clamp(1rem,.96rem + .2vw,1.125rem);line-height:1.6;-webkit-font-smoothing:antialiased}
.en-tete{border-bottom:2px solid var(--bordure)}
.marque{display:flex;align-items:center;gap:.6rem;width:min(100% - 2rem,40rem);margin-inline:auto;padding:.9rem 0;color:var(--texte);text-decoration:none;font-weight:700;letter-spacing:.06em}
.marque img{image-rendering:pixelated}
main{width:min(100% - 2rem,40rem);margin:2.5rem auto 4rem}
h1{margin:0 0 1rem;font-size:clamp(1.6rem,1.4rem + .9vw,2.1rem);line-height:1.2;text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
p{margin:0 0 1rem;text-wrap:pretty}
.intro{color:var(--attenue)}
.connecte strong{color:var(--accent-texte)}
.lien{color:var(--bleu);text-underline-offset:.2em}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:1.5rem}
.actions form{margin:0}
.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.7rem 1.4rem;border-radius:3px;border:2px solid var(--trait);font:inherit;font-weight:700;line-height:1.1;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.bouton:active{translate:0 1px}
.bouton-discord{background:var(--discord);border-color:var(--discord);color:#fff}
.bouton-discord:hover{background:var(--discord-sombre);border-color:var(--discord-sombre)}
.bouton-primaire{background:var(--lanterne);color:var(--encre)}
.bouton-primaire:hover{background:var(--lanterne-vive)}
.demande{margin-top:1.5rem;display:grid;gap:1.1rem}
.champ{display:grid;gap:.35rem}
.champ label{font-weight:600}
input[type=text],input[type=number],textarea{width:100%;padding:.65rem .75rem;border:2px solid var(--bordure);border-radius:3px;background:var(--surface);color:var(--texte);font:inherit}
textarea{resize:vertical;min-height:7rem}
input:hover,textarea:hover{border-color:var(--attenue)}
[aria-invalid=true]{border-color:var(--alerte)!important}
.case{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start}
.case input{width:1.15rem;height:1.15rem;margin:.3rem 0 0;accent-color:var(--lanterne)}
.case input[aria-invalid=true]{outline:2px solid var(--alerte);outline-offset:2px}
.demande .bouton{justify-self:start;margin-top:.4rem}
.erreurs{border:2px solid var(--alerte);border-radius:3px;padding:.75rem 1rem;background:var(--surface)}
.erreurs p{margin:0}
.erreurs p+p{margin-top:.35rem}
.envoyee{font-weight:600}
:focus-visible{outline:3px solid var(--lanterne);outline-offset:3px;border-radius:2px}
::selection{background:var(--lanterne);color:var(--encre)}