:root{--couleur:#0f766e;--fond:#f7f8fa;--texte:#1f2933;--texte-doux:#52606d;--carte:#fff;--bord:#d9dee4;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--fond:#12161b;--texte:#e6eaee;--texte-doux:#9aa5b1;--carte:#1b2128;--bord:#2d3640}}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--fond);color:var(--texte);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.bandeau-dev{position:fixed;top:0;left:0;right:0;z-index:1000;height:28px;display:flex;align-items:center;justify-content:center;background:#1d4ed8;color:#fff;font-weight:700;font-size:13px;letter-spacing:.12em}
body.env-dev{padding-top:28px}
.lien-evitement{position:absolute;left:-9999px}
.lien-evitement:focus{left:8px;top:36px;z-index:1001;background:var(--carte);padding:8px 12px;border-radius:6px}
main{max-width:40rem;margin:0 auto;padding:24px 16px}
h1{font-size:1.5rem;line-height:1.25;margin:0 0 12px;color:var(--couleur)}
p{margin:0 0 16px}
a{color:var(--couleur)}
.carte{background:var(--carte);border:1px solid var(--bord);border-radius:10px;padding:20px}
.doux{color:var(--texte-doux)}
h2{font-size:1.15rem;margin:0 0 8px}
.carte+.carte{margin-top:16px}
.menu{display:flex;flex-wrap:wrap;gap:16px;align-items:center;max-width:40rem;margin:0 auto;padding:12px 16px 0}
.menu form{margin:0}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
form{margin:0}
.champ{margin:0 0 16px}
label{display:block;font-weight:600;margin-bottom:4px}
input[type=text],input[type=email],input[type=password],select{width:100%;padding:10px 12px;border:1px solid var(--bord);border-radius:6px;background:var(--fond);color:var(--texte);font:inherit}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--couleur);outline-offset:2px}
.case{display:flex;gap:10px;align-items:flex-start;margin:0 0 16px}
.case input{width:22px;height:22px;margin-top:2px;flex:none}
.case label{margin:0;font-weight:400}
.aide{color:var(--texte-doux);font-size:.9rem;margin:4px 0 0}
button,.bouton{display:inline-block;padding:10px 16px;border:0;border-radius:6px;background:var(--couleur);color:#fff;font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
button.secondaire,.bouton.secondaire{background:transparent;color:var(--couleur);border:1px solid var(--couleur)}
button.danger{background:#b42318}
button.lien{background:none;border:0;padding:0;color:var(--couleur);font-weight:400;text-decoration:underline}
.erreur{border:1px solid #b42318;border-left-width:4px;border-radius:6px;padding:10px 12px;color:#b42318;background:transparent}
.info{border:1px solid var(--couleur);border-left-width:4px;border-radius:6px;padding:10px 12px}
.liens{display:flex;flex-wrap:wrap;gap:16px;margin:16px 0 0}
.separateur{text-align:center;color:var(--texte-doux);margin:16px 0}
.liste{list-style:none;margin:0 0 16px;padding:0}
.liste li{border-top:1px solid var(--bord);padding:12px 0;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.liste li:first-child{border-top:0}
.liste .detail{flex:1 1 14rem;min-width:0;overflow-wrap:anywhere}
.badge{display:inline-block;padding:0 8px;border-radius:99px;background:var(--couleur);color:#fff;font-size:.8rem}
.cle{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.05rem;letter-spacing:.06em;overflow-wrap:anywhere;user-select:all}
.codes{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:8px;list-style:none;margin:0 0 16px;padding:0}
.codes li{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;border:1px solid var(--bord);border-radius:6px;padding:8px 12px;text-align:center;user-select:all}
.qr{display:flex;justify-content:center;margin:0 0 16px}
.qr img{width:224px;height:224px;image-rendering:pixelated;background:#fff;padding:8px;border-radius:6px}
.cf-turnstile{margin:0 0 16px}
.carte.danger{border-color:#b42318}
.legal h2{margin:24px 0 8px}
.legal ul{margin:0 0 16px;padding-left:20px}
.legal li{margin-bottom:8px}
.pied{max-width:40rem;margin:0 auto;padding:0 16px 32px;font-size:.9rem}
.pied ul{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;padding:0;margin:0}
@media (min-width:640px){main{padding:48px 24px}h1{font-size:2rem}.pied{padding:0 24px 48px}}