:root{--fond:#070a12;--tuile:rgba(18,24,38,.72);--bord:rgba(120,160,255,.14);--texte:#e8eefc;--doux:#8391ad;
--accent:#5ee6ff;--accent2:#9b7bff;--haut:#2ee6a6;--bas:#ff5c7a;--or:#ffc857;
--mono:ui-monospace,"JetBrains Mono","Cascadia Mono",Menlo,Consolas,monospace}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--fond);color:var(--texte);font:14px/1.4 system-ui,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
.fond{position:fixed;inset:0;z-index:-1;background:
 radial-gradient(900px 500px at 12% -10%,rgba(94,230,255,.13),transparent 60%),
 radial-gradient(800px 600px at 95% 10%,rgba(155,123,255,.14),transparent 60%),
 linear-gradient(rgba(120,160,255,.045) 1px,transparent 1px) 0 0/100% 44px,
 linear-gradient(90deg,rgba(120,160,255,.045) 1px,transparent 1px) 0 0/44px 100%,var(--fond);
 animation:derive 40s linear infinite}
@keyframes derive{to{background-position:0 0,0 0,0 44px,44px 0,0 0}}
header{display:flex;align-items:center;gap:14px;padding:10px 18px;border-bottom:1px solid var(--bord);
 background:rgba(7,10,18,.7);backdrop-filter:blur(12px);position:sticky;top:0;z-index:50;flex-wrap:wrap}
.marque{font-weight:800;letter-spacing:.22em;display:flex;align-items:center;gap:10px}
.marque small{font-weight:400;letter-spacing:.02em;color:var(--doux)}
.logo{width:18px;height:18px;border-radius:5px;background:conic-gradient(from 0deg,var(--accent),var(--accent2),var(--accent));animation:tourne 6s linear infinite;box-shadow:0 0 18px rgba(94,230,255,.6)}
@keyframes tourne{to{transform:rotate(360deg)}}
.mode{font:600 11px var(--mono);letter-spacing:.12em;color:var(--or);border:1px solid rgba(255,200,87,.4);padding:4px 10px;border-radius:99px;background:rgba(255,200,87,.07)}
.espace{flex:1}
.lien{display:flex;align-items:center;gap:7px;color:var(--doux);font:12px var(--mono)}
.lien i{width:8px;height:8px;border-radius:50%;background:var(--bas)}
.lien.ok i{background:var(--haut);box-shadow:0 0 0 0 rgba(46,230,166,.7);animation:pouls 1.6s infinite}
@keyframes pouls{to{box-shadow:0 0 0 9px rgba(46,230,166,0)}}
.horloge{font:13px var(--mono);color:var(--doux)}
button{font:inherit;color:var(--texte);background:rgba(120,160,255,.08);border:1px solid var(--bord);border-radius:9px;padding:6px 13px;cursor:pointer;transition:.15s}
button:hover{border-color:var(--accent);box-shadow:0 0 14px rgba(94,230,255,.25)}
button.fort{background:linear-gradient(135deg,rgba(94,230,255,.25),rgba(155,123,255,.25))}
button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
main{padding:8px}
.grid-stack-item-content{background:var(--tuile);border:1px solid var(--bord);border-radius:16px;backdrop-filter:blur(14px);
 display:flex;flex-direction:column;overflow:hidden!important;box-shadow:0 10px 40px rgba(0,0,0,.35);animation:entre .5s cubic-bezier(.2,.9,.3,1.2) backwards}
@keyframes entre{from{opacity:0;transform:translateY(14px) scale(.97)}}
.grid-stack-item:hover>.grid-stack-item-content{border-color:rgba(94,230,255,.35)}
.tete{display:flex;align-items:center;gap:8px;padding:9px 14px 5px;cursor:grab;font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--doux);user-select:none}
.tete .outils{margin-left:auto;display:flex;gap:4px;cursor:default}
.tete select,.tete .seg button{font:11px var(--mono);background:transparent;color:var(--doux);border:1px solid var(--bord);border-radius:6px;padding:2px 6px}
.tete .seg button.actif{color:var(--fond);background:var(--accent);border-color:var(--accent)}
.corps{flex:1;min-height:0;padding:4px 14px 12px;display:flex;flex-direction:column;position:relative}
.prix{font:700 clamp(26px,3.2vw,54px)/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;transition:color .6s}
.prix.haut{color:var(--haut);text-shadow:0 0 26px rgba(46,230,166,.55);transition:none}
.prix.bas{color:var(--bas);text-shadow:0 0 26px rgba(255,92,122,.55);transition:none}
.ligne{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;font:12px var(--mono);color:var(--doux);margin-top:6px}
.var.haut,.pos{color:var(--haut)}.var.bas,.neg{color:var(--bas)}
.var{font-weight:700;font-size:14px}
canvas.etincelle{flex:1;min-height:0;width:100%;margin-top:6px}
.graphe{flex:1;min-height:0}
table{width:100%;border-collapse:collapse;font:12.5px var(--mono);font-variant-numeric:tabular-nums}
td,th{padding:5px 4px;text-align:right;border-bottom:1px solid rgba(120,160,255,.08)}
td:first-child,th:first-child{text-align:left;color:var(--doux)}th{color:var(--doux);font-weight:500}
.barre{height:7px;border-radius:9px;background:rgba(120,160,255,.1);overflow:hidden;margin:3px 0 9px}
.barre i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width 1s}
.barre.cours i{background-size:200% 100%;background-image:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent));animation:coule 1.5s linear infinite}
@keyframes coule{to{background-position:-200% 0}}
.rang{display:flex;justify-content:space-between;font:12px var(--mono);color:var(--doux)}
.rang b{color:var(--texte);font-weight:500}
.pastille{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:var(--bas)}
.pastille.ok{background:var(--haut)}
.vide{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--doux);gap:6px;padding:8px}
.vide b{color:var(--texte);font-size:15px}.vide .etape{font:10px var(--mono);letter-spacing:.14em;color:var(--or);border:1px solid rgba(255,200,87,.35);border-radius:99px;padding:2px 9px}
.defile{overflow:auto}
dialog{background:#0d1320;color:var(--texte);border:1px solid var(--bord);border-radius:18px;padding:22px;width:min(560px,92vw);box-shadow:0 30px 90px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(3,5,10,.7);backdrop-filter:blur(4px)}
dialog[open]{animation:entre .3s}
h2{margin:0 0 10px;font-size:17px}.note{color:var(--doux);font-size:12.5px}
.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
#liste-tuiles label{display:flex;gap:10px;padding:6px 0;cursor:pointer}
.secret{border:1px solid var(--bord);border-radius:12px;padding:12px;margin-top:10px}
.secret.verrou{opacity:.55}
.secret h3{margin:0;font-size:14px;display:flex;justify-content:space-between;gap:8px}
.secret h3 span{font:12px var(--mono);color:var(--doux)}
.secret input{width:100%;margin:8px 0;padding:8px 10px;border-radius:8px;border:1px solid var(--bord);background:#070a12;color:var(--texte);font:13px var(--mono)}
.secret .actions{margin-top:0;justify-content:flex-start}
.secret .retour{font-size:12.5px;margin-top:8px;min-height:1.2em}
.attribution{position:absolute;right:16px;bottom:6px;font-size:10px;color:var(--doux);text-decoration:none;opacity:.6}
body.porte{display:grid;place-items:center;min-height:100%;padding:20px}
.carte{width:min(420px,100%);background:var(--tuile);border:1px solid var(--bord);border-radius:20px;padding:28px;backdrop-filter:blur(14px);display:flex;flex-direction:column;gap:12px;animation:entre .5s}
.carte label{display:flex;flex-direction:column;gap:5px;color:var(--doux);font-size:12.5px}
.carte input,.secret input{padding:10px 12px;border-radius:10px;border:1px solid var(--bord);background:#070a12;color:var(--texte);font:15px var(--mono)}
.carte input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 14px rgba(94,230,255,.25)}
.carte button{padding:11px;font-weight:600}
#etapes{display:flex;flex-direction:column;gap:10px}#etapes[hidden]{display:none}
#qr{background:#fff;border-radius:12px;align-self:center;padding:4px;line-height:0}#qr svg{width:210px;height:210px}
code{font:12px var(--mono);color:var(--accent);word-break:break-all}
.moi{font:12px var(--mono);color:var(--doux)}