:root{--ink:#0f2338;--ink2:#475d70;--mute:#7a8b99;--line:#dde5eb;--bg:#f4f8fa;--card:#fff;--acc:#0088aa;--acc2:#e8f5f9;--ok:#1f9d63;--warn:#b7791f;--bad:#c2410c}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;border:0;border-radius:12px;padding:12px 18px;font-weight:650;background:var(--ink);color:#fff;transition:transform .12s,opacity .2s}
button:active{transform:scale(.97)}
button.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
button:disabled{opacity:.45;cursor:default}
.wrap{max-width:1040px;margin:0 auto;padding:28px 20px 40px}
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.6px}
.logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#0f2338,#0088aa);display:grid;place-items:center;color:#fff;font-size:17px}
.pill{font-size:12px;font-weight:650;padding:6px 11px;border-radius:99px;background:#fff;border:1px solid var(--line);color:var(--ink2);display:inline-flex;align-items:center;gap:7px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--mute)}
.dot.ok{background:var(--ok);animation:pulse 1.6s infinite}.dot.warn{background:var(--warn)}.dot.bad{background:var(--bad)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,157,99,.5)}100%{box-shadow:0 0 0 9px rgba(31,157,99,0)}}
h1{font-size:34px;letter-spacing:-1.2px;line-height:1.1;margin:0 0 10px}
h1 span{color:var(--acc)}
.lead{color:var(--ink2);font-size:15.5px;line-height:1.55;margin:0 0 26px;max-width:640px}
.grid{display:grid;grid-template-columns:1.15fr 1fr;gap:18px}
@media(max-width:820px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}
.card h2{font-size:13px;letter-spacing:1.3px;text-transform:uppercase;color:var(--mute);margin:0 0 14px}
.pair{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.qr{width:170px;height:170px;border-radius:14px;border:1px solid var(--line);padding:8px;background:#fff;flex:none}
.qr svg{width:100%;height:100%;display:block}
.code{font-family:ui-monospace,Menlo,monospace;font-size:34px;font-weight:800;letter-spacing:3px}
.small{font-size:13px;color:var(--ink2);line-height:1.5}
.small a,.steps a{color:var(--acc)}
.steps{margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:0 0 14px 40px;font-size:14px;line-height:1.5;color:var(--ink2)}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:27px;height:27px;border-radius:9px;background:var(--acc2);color:var(--acc);font-weight:800;display:grid;place-items:center;font-size:13px}
.steps b{color:var(--ink)}
.preview{margin-top:16px;border-radius:14px;overflow:hidden;background:#0b1622;aspect-ratio:16/10;display:grid;place-items:center;color:#8aa0b3;font-size:13px;position:relative}
.preview video{width:100%;height:100%;object-fit:contain;display:block}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
select{font:inherit;padding:10px 12px;border-radius:11px;border:1px solid var(--line);background:#fff;color:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.stats div{background:var(--bg);border-radius:11px;padding:9px 10px}
.stats small{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--mute)}
.stats b{font-size:15px}
.note{margin-top:14px;font-size:12.5px;color:#7a5a20;background:#fff6e9;border:1px solid #f6dcb4;border-radius:11px;padding:9px 12px;line-height:1.5}
.fade{animation:fade .5s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* --- tablette --- */
body.tab{background:#000;color:#fff;overflow:hidden;touch-action:manipulation}
#screen{position:fixed;inset:0;width:100vw;height:100vh;object-fit:contain;background:#000}
.overlay{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#13304b,#050b12 70%);transition:opacity .4s}
.overlay.hide{opacity:0;pointer-events:none}
.box{width:min(440px,90vw);text-align:center}
.box h1{color:#fff;font-size:28px}
.box p{color:#9fb3c4;font-size:15px;line-height:1.5}
.codein{width:100%;font:800 30px ui-monospace,Menlo,monospace;letter-spacing:5px;text-align:center;text-transform:uppercase;padding:14px;border-radius:14px;border:1px solid #2a4560;background:#0c1c2c;color:#fff;margin:10px 0 14px}
.box button{width:100%;background:#0088aa;padding:15px}
.spin{width:44px;height:44px;border-radius:50%;border:3px solid #22405c;border-top-color:#2bc0e4;margin:6px auto 18px;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.err{color:#ff9b7a!important}
.hud{position:fixed;top:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;background:rgba(10,20,30,.82);padding:8px;border-radius:14px;transition:opacity .3s}
.hud.hide{opacity:0;pointer-events:none}
.hud button{padding:9px 13px;font-size:14px;background:#1d3a55}
.hud span{font-size:12.5px;color:#9fb3c4;align-self:center;padding:0 6px}