/* Pages d'accès (connexion, activation) — même DA que la salle : papier clair, trait encre 1,5 px, ombre décalée, accent violet. */
:root{--fond:#eceef2;--carte:#fff;--encre:#16181d;--encre2:#3a3f48;--gris:#8a909a;--gris2:#c3c7ce;--trait:#e6e8ec;
  --vert:#23a26d;--vert-fond:#eaf7f0;--rouge:#d64b47;--rouge-fond:#fdeeea;--ambre:#cf931a;--ambre-fond:#fbf4e1;--violet:#6a57e3;--violet-fond:#efedfd}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{background:linear-gradient(180deg,#f1f2f5,#e8eaee) fixed,var(--fond);color:var(--encre);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;
  -webkit-font-smoothing:antialiased;display:grid;place-items:center;min-height:100vh;padding:28px 16px}
.carte{width:100%;max-width:404px;background:var(--carte);border:1.5px solid var(--encre);border-radius:22px;padding:26px 28px 24px;
  box-shadow:3px 3px 0 var(--encre),0 24px 48px -28px rgba(22,24,29,.28)}
.marque{display:flex;align-items:center;gap:10px;font-family:Inter,system-ui,sans-serif;font-size:17px;font-weight:700;letter-spacing:-.012em}
.marque .barre{width:3px;height:16px;background:var(--violet);border-radius:2px}
.marque small{margin-left:auto;font-family:"IBM Plex Mono";font-weight:500;font-size:11px;color:var(--encre2);padding:2px 9px;border:1px solid var(--trait);border-radius:999px}
h1{font-family:Inter,system-ui,sans-serif;font-size:22px;font-weight:700;letter-spacing:-.02em;margin:26px 0 6px}
.sous{color:var(--gris);font-size:12px;line-height:1.55;margin-bottom:20px}
.sous b{color:var(--encre);font-weight:600}
label{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);margin:14px 0 6px}
.champ{position:relative}
input{width:100%;font:inherit;font-size:14px;color:var(--encre);background:#fff;border:1px solid var(--gris2);border-radius:10px;padding:11px 12px;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus{border-color:var(--encre);box-shadow:0 0 0 3px rgba(106,87,227,.12)}
input[aria-invalid=true]{border-color:var(--rouge)}
.voir{position:absolute;right:6px;top:50%;transform:translateY(-50%);font:inherit;font-size:11px;color:var(--gris);background:none;border:0;padding:6px 8px;border-radius:7px;cursor:pointer}
.voir:hover{color:var(--encre);background:#f4f5f7}
.champ input.avec-voir{padding-right:70px}
button.principal{width:100%;margin-top:20px;font-family:Inter,system-ui,sans-serif;font-size:14px;font-weight:600;color:#fff;background:var(--encre);border:1.5px solid var(--encre);
  border-radius:11px;padding:12px 16px;cursor:pointer;transition:transform .08s,box-shadow .15s;box-shadow:2px 2px 0 var(--violet)}
button.principal:hover{box-shadow:3px 3px 0 var(--violet)}
button.principal:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--violet)}
button.principal[disabled]{opacity:.55;cursor:default}
.lien{font:inherit;font-size:12px;color:var(--encre2);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--gris2);text-underline-offset:3px}
.lien:hover{color:var(--encre);text-decoration-color:var(--encre)}
.ligne{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.msg{display:none;margin-top:14px;font-size:12px;line-height:1.5;padding:9px 12px;border-radius:9px}
.msg.on{display:block}
.msg.err{background:var(--rouge-fond);color:#a3322f}
.msg.ok{background:var(--vert-fond);color:#16855a}
.msg.info{background:var(--violet-fond);color:#3d2fa8}
.pied{margin-top:22px;padding-top:16px;border-top:1px solid var(--trait);color:var(--gris);font-size:11.5px;line-height:1.55}
.pied a{color:var(--encre2)}
.jauge{height:3px;border-radius:2px;background:var(--trait);margin-top:8px;overflow:hidden}
.jauge i{display:block;height:100%;width:0;background:var(--rouge);transition:width .2s,background .2s}
.cache{display:none}
.cle{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;font-family:Inter,system-ui,sans-serif;font-size:14px;font-weight:600;color:var(--encre);
  background:#fff;border:1.5px solid var(--encre);border-radius:11px;padding:12px 16px;cursor:pointer;transition:transform .08s,box-shadow .15s;box-shadow:2px 2px 0 var(--encre)}
.cle:hover{box-shadow:3px 3px 0 var(--encre)} .cle:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--encre)} .cle[disabled]{opacity:.55;cursor:default}
.cle svg{flex:none}
.ou{display:flex;align-items:center;gap:12px;margin:20px 0 4px;color:var(--gris);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--trait)}
.code{display:flex;gap:8px;margin-top:4px}
.code input{text-align:center;font-size:22px;font-weight:600;letter-spacing:.3em;padding:12px 8px 12px 16px}
.envoye{font-size:12.5px;line-height:1.6;color:var(--encre2)}
.envoye b{color:var(--encre);font-weight:600;word-break:break-all}
body.long{display:block;padding:32px 16px}
.carte.large{max-width:720px;margin:0 auto}
.carte.large h2{font-family:Inter,system-ui,sans-serif;font-size:14.5px;font-weight:700;letter-spacing:-.01em;margin:22px 0 6px}
.carte.large p:not(.sous):not(.pied){font-size:12.5px;line-height:1.7;color:var(--encre2)}
.carte.large a{color:var(--encre)}
.introuvable{text-align:left}