:root { --onyx: #0b0910; --carte: rgba(18, 12, 28, 0.82); --bord: rgba(162, 77, 255, 0.35); --violet: #a24dff; --violet2: #d65cff;
  --texte: #ece6f5; --gris: #a59cb5; --rouge: #ff5468; --vert: #55e08a; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: Inter, system-ui, sans-serif; color: var(--texte); background: var(--onyx) url(fond.jpg) center / cover fixed; }
body::before { content: ""; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(11, 9, 16, .55), rgba(11, 9, 16, .92)); z-index: -1; }
a { color: var(--violet2); }
header { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; max-width: 1100px; margin: 0 auto; }
header .marque { display: flex; align-items: center; gap: 10px; color: var(--texte); text-decoration: none; font-family: Rajdhani, sans-serif; font-weight: 700; font-size: 22px; letter-spacing: 1px; }
header .marque img { width: 32px; height: 32px; }
nav { display: flex; gap: 6px; flex-wrap: wrap; }
nav a { color: var(--texte); text-decoration: none; padding: 8px 14px; border-radius: 10px; font-weight: 500; }
nav a:hover, nav a.actif { background: rgba(162, 77, 255, .18); }
main { max-width: 1100px; margin: 0 auto; padding: 16px 24px 60px; }
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: center; min-height: 70vh; }
.hero .logo { width: min(420px, 90%); filter: drop-shadow(0 8px 30px rgba(162, 77, 255, .45)); }
.hero p.accroche { font-size: 18px; color: var(--gris); line-height: 1.6; max-width: 520px; }
.hero .perso { width: 100%; max-width: 420px; justify-self: center; filter: drop-shadow(0 10px 40px rgba(0, 0, 0, .6)); }
.boutons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.bouton { display: inline-block; border: 0; cursor: pointer; padding: 14px 26px; border-radius: 12px; font: 700 17px Rajdhani, sans-serif; letter-spacing: 1.5px;
  text-transform: uppercase; text-decoration: none; color: #fff; background: linear-gradient(90deg, var(--violet), var(--violet2)); box-shadow: 0 6px 24px rgba(162, 77, 255, .35); }
.bouton:hover { filter: brightness(1.1); }
.bouton.secondaire { background: rgba(255, 255, 255, .06); border: 1px solid var(--bord); box-shadow: none; }
.bouton:disabled { opacity: .6; cursor: wait; }
.atouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 30px; }
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 16px; padding: 20px; backdrop-filter: blur(8px); }
.carte h3 { margin: 0 0 6px; font-family: Rajdhani, sans-serif; font-size: 20px; color: var(--violet2); }
.carte p { margin: 0; color: var(--gris); line-height: 1.5; }
.formulaire { max-width: 420px; margin: 6vh auto; }
.formulaire h1 { font-family: Rajdhani, sans-serif; margin: 0 0 6px; font-size: 32px; }
.formulaire p.sous { margin: 0 0 18px; color: var(--gris); }
label { display: block; margin: 14px 0 6px; font-weight: 600; font-size: 14px; }
input { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--bord); background: rgba(0, 0, 0, .35); color: var(--texte); font: inherit; }
input:focus { outline: 2px solid var(--violet); border-color: transparent; }
.aide { font-size: 12px; color: var(--gris); margin-top: 4px; }
.formulaire .bouton { width: 100%; margin-top: 20px; }
.message { margin-top: 14px; padding: 10px 12px; border-radius: 10px; font-size: 14px; display: none; }
.message.erreur { display: block; background: rgba(255, 84, 104, .14); color: var(--rouge); }
.message.ok { display: block; background: rgba(85, 224, 138, .14); color: var(--vert); }
.bas { text-align: center; margin-top: 16px; color: var(--gris); font-size: 14px; }
.profil { display: flex; align-items: center; gap: 16px; }
.profil img { width: 72px; height: 72px; border-radius: 12px; image-rendering: pixelated; }
.profil strong { font-size: 24px; font-family: Rajdhani, sans-serif; }
footer { text-align: center; color: var(--gris); font-size: 13px; padding: 20px; }
.cache { display: none !important; }
@media (max-width: 800px) { .hero { grid-template-columns: 1fr; text-align: center; } .hero .perso { display: none; } .boutons { justify-content: center; } .hero p.accroche { margin: 0 auto; } }
select { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--bord); background: rgba(0, 0, 0, .35); color: var(--texte); font: inherit; }
select option { background: #160f22; }
.compte-page { max-width: 1000px; margin: 3vh auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compte-page .large { grid-column: 1 / -1; }
.infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.info { background: rgba(0, 0, 0, .3); border-radius: 12px; padding: 12px; }
.info span { display: block; font-size: 12px; color: var(--gris); }
.info strong { font-size: 18px; font-family: Rajdhani, sans-serif; }
.apercu { display: flex; gap: 18px; justify-content: center; align-items: flex-end; margin: 10px 0 4px; min-height: 260px;
  background: radial-gradient(circle at 50% 70%, rgba(162, 77, 255, .25), transparent 70%); border-radius: 14px; }
.apercu canvas { image-rendering: pixelated; }
.apercu .legende { font-size: 12px; color: var(--gris); text-align: center; }
.choix { display: flex; gap: 10px; margin-top: 10px; }
.choix label { flex: 1; margin: 0; display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 10px; background: rgba(0, 0, 0, .3); cursor: pointer; font-weight: 500; }
.choix input { width: auto; }
.fichier { margin-top: 10px; }
.verrou { padding: 14px; border-radius: 12px; background: rgba(0, 0, 0, .3); color: var(--gris); text-align: center; }
.liste { margin: 8px 0 0; padding-left: 18px; color: var(--gris); line-height: 1.7; }
.liste code { color: var(--texte); background: rgba(0, 0, 0, .35); padding: 1px 6px; border-radius: 6px; }
@media (max-width: 800px) { .compte-page { grid-template-columns: 1fr; } }
.titre-page { font-family: Rajdhani, sans-serif; font-size: 38px; margin: 18px 0 4px; }
.sous-titre { color: var(--gris); margin: 0 0 18px; }
.onglets { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 14px; }
.onglets button { border: 1px solid var(--bord); background: rgba(0, 0, 0, .3); color: var(--texte); padding: 9px 16px; border-radius: 10px; cursor: pointer; font: 600 14px Inter, sans-serif; }
.onglets button.actif { background: linear-gradient(90deg, var(--violet), var(--violet2)); border-color: transparent; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
th { color: var(--gris); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
tr:hover td { background: rgba(162, 77, 255, .06); }
td.rang { width: 44px; font-family: Rajdhani, sans-serif; font-size: 18px; font-weight: 700; color: var(--gris); }
tr.or td.rang { color: #ffd24a; } tr.argent td.rang { color: #d8d8e8; } tr.bronze td.rang { color: #e09a5a; }
td img.mini { width: 24px; height: 24px; vertical-align: middle; margin-right: 8px; border-radius: 4px; image-rendering: pixelated; }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.produit { display: flex; flex-direction: column; gap: 8px; }
.produit img { width: 100%; height: 140px; object-fit: contain; }
.produit .prix { font: 700 22px Rajdhani, sans-serif; color: var(--violet2); }
.produit .bouton { margin-top: auto; text-align: center; }
.vide { color: var(--gris); text-align: center; padding: 30px; }
.panneau { display: grid; grid-template-columns: 220px 1fr; gap: 16px; margin-top: 10px; }
.panneau .cote { display: flex; flex-direction: column; gap: 6px; }
.panneau .cote button { text-align: left; border: 0; background: rgba(0, 0, 0, .3); color: var(--texte); padding: 11px 14px; border-radius: 10px; cursor: pointer; font: 500 14px Inter, sans-serif; }
.panneau .cote button.actif { background: rgba(162, 77, 255, .3); }
.panneau .cote button:disabled { opacity: .35; cursor: not-allowed; }
.console { background: #07050b; border: 1px solid var(--bord); border-radius: 12px; height: 460px; overflow: auto; padding: 10px; font: 12px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; word-break: break-all; }
.console .warn { color: #ffd24a; } .console .err { color: var(--rouge); }
.ligne-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; margin-top: 10px; }
.ligne-form > * { flex: 1; min-width: 120px; }
.ligne-form .bouton { flex: 0 0 auto; padding: 12px 18px; font-size: 14px; }
.etiquette { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, .08); }
.etiquette.ban { background: rgba(255, 84, 104, .2); color: var(--rouge); } .etiquette.mute { background: rgba(255, 210, 74, .15); color: #ffd24a; }
.etiquette.warn { background: rgba(255, 160, 60, .15); color: #ffa03c; } .etiquette.ok { background: rgba(85, 224, 138, .15); color: var(--vert); }
.boutons-petits { display: flex; gap: 6px; flex-wrap: wrap; }
.boutons-petits button { border: 1px solid var(--bord); background: rgba(0, 0, 0, .3); color: var(--texte); padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 12px; }
.boutons-petits button:hover { background: rgba(162, 77, 255, .25); }
.boutons-petits button.danger:hover { background: rgba(255, 84, 104, .3); }
@media (max-width: 800px) { .panneau { grid-template-columns: 1fr; } .panneau .cote { flex-direction: row; flex-wrap: wrap; } }
.tete-mini { display: inline-block; vertical-align: middle; margin-right: 8px; border-radius: 4px; image-rendering: pixelated; background-color: #3a2357; background-repeat: no-repeat; }