/* Carte à collectionner sur fond nuit : or = monnaie et rare, turquoise = progression (maquette validée) */
:root{--bg:#0e0e16;--panel:#171724;--line:#2c2c44;--fg:#f1effa;--mute:#a7a5c0;--gold:#ffc857;--ink:#1a1830;
--teal:#7be0c3;--violet:#3a2f7a;--red:#e0483c;--display:'Sora',system-ui,sans-serif;--body:'DM Sans',system-ui,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 var(--body);min-height:100vh;
  padding:0 max(16px,env(safe-area-inset-right)) 56px max(16px,env(safe-area-inset-left));overflow-x:hidden}
a{color:inherit}
img{image-rendering:pixelated}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
[hidden]{display:none!important}

/* En-tête */
.top{max-width:1000px;margin:0 auto;padding:16px 0;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.logo{font:800 22px var(--display);letter-spacing:-.01em;text-decoration:none}.logo span{color:var(--gold)}
.top nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px;order:3;width:100%}
.top nav a{flex:none;text-decoration:none;font-weight:700;padding:10px 14px;border-radius:999px;color:var(--mute)}
.top nav a[aria-current=page]{color:var(--fg);background:var(--panel)}
.fauxachat{margin-bottom:16px}.fauxachat h3{margin:0 0 8px}.fauxachat .row h3{margin:0}.fauxachat .big{font-size:22px;font-weight:800;color:var(--gold)}
.fauxachat .packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:8px 0 12px}
.fauxachat label{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px;border-radius:10px;background:var(--bg);cursor:pointer;border:2px solid transparent}
.fauxachat label:has(input:checked){border-color:var(--gold)}.fauxachat label input{position:absolute;opacity:0}.fauxachat label img{width:16px;height:16px}
.fauxachat small{color:var(--gold);font-size:11px}
.bonus{margin-bottom:16px;border:1px solid var(--gold)}.bonus h3{margin:0}
.bonus .jours{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:12px 0}
.bonus .jours span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;border-radius:10px;background:var(--bg);font-weight:700;font-size:13px}
.bonus .jours img{width:16px;height:16px}.bonus .jours small{font-size:10px;color:var(--mute);font-weight:400}
.bonus .auj{outline:2px solid var(--gold);background:#3a2f10!important}.bonus .fait{opacity:.4}
.top nav details{flex:none;position:relative}
.top nav .plus summary{list-style:none;cursor:pointer;font-weight:700;padding:10px 14px;border-radius:999px;color:var(--mute)}
.top nav .plus summary::-webkit-details-marker{display:none}.top nav .plus summary::after{content:" ▾"}
.top nav .plus[open] summary,.top nav .plus summary:hover,.top nav .plus:has([aria-current]) summary{color:var(--fg);background:var(--panel)}
.top nav a.village{color:#7fe0c3}
.top nav .jeux summary{list-style:none;cursor:pointer;font-weight:800;padding:10px 16px;border-radius:999px;color:#ffd2ae;
  background:linear-gradient(90deg,#4a2108,#331606);border:1px solid #d9611c;box-shadow:0 0 12px #d9611c55}
.top nav .jeux summary::-webkit-details-marker{display:none}.top nav .jeux summary::after{content:" ▾"}
.top nav .jeux[open] summary,.top nav .jeux summary:hover{background:#d9611c;color:#fff}
.top nav details .menu{position:absolute;z-index:20;top:calc(100% + 6px);left:0;min-width:220px;display:flex;flex-direction:column;gap:2px;padding:6px;
  border-radius:16px;background:var(--panel);border:1px solid #d9611c;box-shadow:0 10px 30px #0009}
.top nav details .menu a{color:var(--fg);border-radius:10px;padding:10px 12px}
.top nav details .menu a:hover,.top nav details .menu a:focus-visible{background:#d9611c;color:#fff}
.top nav .jeux .menu .soon{padding:10px 12px}
.top nav .jeux .menu a.tous{color:#ff9d4d;font-size:13px;border-top:1px solid var(--line);border-radius:0 0 10px 10px;margin-top:4px}
.ludo h2{margin:8px 0 0}.ludo>.tag{max-width:62ch}
.jeuxg{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.jeu{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:20px;background:var(--bg);border:1px solid var(--line)}
.jeu.web{border-color:#7a3a14}.jeu .tete{display:flex;gap:12px;align-items:center}
.jeu .ico{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#2a1a10;font-size:28px}
.jeu h3{margin:0;font-family:var(--display);font-size:19px;line-height:1.2}.jeu .acc{margin:0;color:#ff9d4d;font-weight:700;font-size:14px}
.jeu p{margin:0}.jeu ul{margin:0;padding-left:18px;color:var(--mute);font-size:14px}
.jeu .puces{display:flex;flex-wrap:wrap;gap:6px}.jeu .puces span{font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--mute)}
.jeu .lien{font-size:13px;color:var(--teal)}.jeu .bas{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.jeu .etat{font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;background:#3a2a10;color:var(--gold)}
.top nav .soon{flex:none;padding:10px 14px;color:#5d5b78;font-weight:700;cursor:default}.top nav .soon small{font-size:11px;border:1px solid #4a4870;border-radius:999px;padding:1px 6px;margin-left:4px}
.right{margin-left:auto;display:flex;align-items:center;gap:8px}
.wallet{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 14px 4px 6px;text-decoration:none}
.wallet img{width:28px;height:28px}.wallet b{font-family:var(--display)}
@media (min-width:720px){.top nav{order:0;width:auto}.top nav details .menu{left:auto;right:0}}
@media (max-width:719px){.top nav a{padding:8px 12px}}

.wrap{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
h1,h2{margin:0;font-family:var(--display);letter-spacing:-.02em}
h2{font-size:22px;font-weight:800}
.note,.tag{color:var(--mute);margin:0}.note{font-size:13px}

/* Boutons et champs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;
  border:1px solid #4a4870;background:transparent;font-weight:700;cursor:pointer;text-decoration:none}
.btn.gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn.small{min-height:36px;padding:0 14px;font-size:14px}
.btn:disabled{opacity:.5;cursor:default}
label{font-size:14px;font-weight:700;display:flex;flex-direction:column;gap:6px}
input,select,textarea{background:var(--bg);border:1px solid #3a3a58;border-radius:14px;padding:12px 14px;min-height:48px;width:100%;font-size:16px}
textarea{resize:vertical;min-height:80px}
form{display:flex;flex-direction:column;gap:14px}
.err{color:#ff8a80;font-size:14px;margin:0;min-height:1em}

/* Onglets */
.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.tabs button,.tabs .tab{display:inline-flex;align-items:center;text-decoration:none;flex:none;font-weight:700;font-size:15px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid #4a4870;background:transparent;cursor:pointer}
.tabs .tab[aria-selected=true],.tabs button[aria-selected=true]{background:var(--gold);color:var(--ink);border-color:var(--gold)}

/* Profil : la carte */
.hero{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.col{flex:0 1 340px;width:100%;display:flex;flex-direction:column;gap:12px}
.card{width:100%;border-radius:28px;padding:10px;background:var(--gold)}
.card>div{background:var(--ink);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:12px}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;min-width:0}
.name{font:800 26px var(--display);letter-spacing:-.02em;overflow-wrap:anywhere}
.rar{flex:none;background:var(--gold);color:var(--ink);border-radius:999px;padding:3px 12px;font-weight:800;font-size:13px}
.stage{background:var(--violet);border:2px solid var(--gold);border-radius:14px;display:flex;justify-content:center;overflow:hidden}
.stage img{width:88%;max-width:280px;height:auto;display:block}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;font-size:15px}.stats b{color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.side,.panel{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:18px;background:var(--panel);border:1px solid var(--line);border-radius:28px;padding:24px}
.vocal{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:12px 18px}
.vocal b{font-family:var(--display);color:var(--teal);font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chips span{background:#23213f;border-radius:999px;padding:6px 14px;font-size:14px}
.actions{display:flex;flex-wrap:wrap;gap:8px}

/* Grilles d'objets */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.it{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.it.lock{opacity:.55}.it h3{margin:0;font:700 16px var(--body);overflow-wrap:anywhere}.it p{margin:0;font-size:13px;color:var(--mute)}
.price{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--gold)}.price img{width:20px;height:20px}
.sw{height:64px;border-radius:12px;display:grid;place-items:center;font-size:28px}
.bar{height:6px;background:var(--bg);border-radius:999px}.bar i{display:block;height:100%;background:var(--teal);border-radius:999px}

/* Tableaux et listes */
table{width:100%;border-collapse:collapse;font-size:15px}
td{padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top}
td+td{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;padding-left:12px;white-space:nowrap}
.plus{color:var(--teal)}.moins{color:var(--red)}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.list li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
.list a{font-weight:700;text-decoration:none}.list a:hover{text-decoration:underline}
.chat .fil{max-height:min(60vh,560px);overflow-y:auto;gap:4px;padding-right:4px}
.chat .cm{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:14px}.chat .cm.moi{background:#1f1d33}
.chat .cm img{flex:none;width:40px;height:40px;border-radius:10px;background:var(--bg)}.chat .cm .msg{flex:1;min-width:0}
.chat .cm .msg a{color:var(--gold);text-decoration:none;font-weight:700}.chat .cm .btn{flex:none;padding:0 10px;opacity:.6}
#chatf{display:flex;gap:8px}#chatf input{flex:1;min-width:0;padding:12px 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg)}
.msg{display:flex;flex-direction:column;gap:2px}.msg p{margin:0;overflow-wrap:anywhere}

/* Connexion */
.login{display:flex;flex-wrap:wrap;gap:40px;align-items:center;padding-top:16px}
.pitch{flex:1 1 400px;min-width:0;display:flex;flex-direction:column;gap:20px}
.pitch h1{font-size:clamp(40px,8vw,80px);line-height:.95;font-weight:800}.pitch h1 span{color:var(--gold)}
.pitch p{margin:0;font-size:18px;color:#c9c7e6;max-width:46ch}
.duo{align-self:flex-start;background:var(--violet);border-radius:28px;padding:14px;display:flex;gap:4px}
.duo img{width:min(130px,36vw);height:auto}
.box{flex:1 1 340px;min-width:0;max-width:480px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:28px;padding:24px;display:flex;flex-direction:column;gap:18px}
.seg{display:flex;background:var(--bg);border-radius:999px;padding:5px;gap:5px}
.seg button{flex:1;border:0;border-radius:999px;min-height:44px;font-weight:700;background:transparent;color:var(--mute);cursor:pointer}
.seg button[aria-selected=true]{background:var(--fg);color:var(--bg)}
.warn{font-size:13px;color:#ffb86b}

/* Badge modo (statut Discord) */
.tags{display:flex;gap:6px;flex:none;align-items:center}
.modo{background:var(--red);color:#fff;border-radius:999px;padding:3px 10px;font-weight:800;font-size:12px;letter-spacing:.02em}

/* Barre d'XP de la carte */
.xp{height:8px;background:var(--bg);border-radius:999px;margin-top:4px}.xp i{display:block;height:100%;background:var(--teal);border-radius:999px}

/* Comparaison de profils */
.cmp{table-layout:fixed;font-size:14px}.cmp td:first-child{width:46%}
.cmp td+td{text-align:right;white-space:normal;overflow-wrap:anywhere;padding-left:8px}
.cmp tr.hd td{color:var(--mute);font-weight:700;font-size:12px}
.cmp td.win{color:var(--teal);font-weight:800}

/* Nouveautés + boîte à idées */
.note-line{justify-content:flex-start;flex-wrap:nowrap}.note-line>span:first-child{flex:none;width:44px}
h2.day{font-size:16px;color:var(--gold)}
.list li.fb{align-items:flex-start;flex-wrap:nowrap}

/* Annuaire + vu en ligne */
.list li.feed{justify-content:flex-start;flex-wrap:nowrap;gap:12px}
.feed img{width:36px;height:36px;background:var(--violet);border-radius:10px;flex:none}
.feed span{min-width:0;overflow-wrap:anywhere}
.people .who{display:flex;align-items:center;gap:12px;min-width:0}
.people img{width:48px;height:48px;background:var(--violet);border-radius:12px;flex:none}
.seen{color:var(--mute)}.seen.on{color:var(--teal);font-weight:700}

.games{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.game{text-decoration:none;cursor:pointer;transition:border-color .15s}.game:hover{border-color:var(--gold)}
.game p{font-size:13px}.game b{color:var(--fg)}.gicon{font-size:30px}
.game-page{gap:14px}.game-page tr.ph td{padding-top:18px;color:var(--gold);font:800 15px var(--display);border-bottom:2px solid var(--line)}.game-page .back{align-self:flex-start}.game-page table{font-size:15px}
.game-page table{table-layout:fixed}.game-page td:first-child{width:52%}.game-page td+td{white-space:normal;overflow-wrap:anywhere}

/* Coopérative : rayons + essayage */
.cat{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.cats{position:sticky;top:0;z-index:2;background:var(--bg);padding:6px 0}
.shop{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.try{position:relative;background:var(--violet);border-radius:12px;display:flex;justify-content:center}
.try img{width:100%;height:auto;max-width:160px}
.try i{position:absolute;right:8px;top:8px;width:22px;height:22px;border-radius:50%;border:2px solid var(--fg)}

/* Skin Minecraft */
.skinrow{align-items:flex-start;justify-content:flex-start;gap:16px}
.skinview{width:96px;height:auto;image-rendering:pixelated;background:var(--violet);border-radius:12px;padding:8px;flex:none}

.rare.lim{background:linear-gradient(90deg,#7be0c3,#4a7be0)}.rare.promo{background:#e0483c;color:#fff}.rare.pack{background:#7a4fc0;color:#fff}
.try .dots{position:absolute;left:6px;right:6px;bottom:6px;display:flex;flex-wrap:wrap;gap:3px;justify-content:center}
.try .dots i{position:static;width:12px;height:12px;border-radius:50%;border:1px solid var(--fg)}
.rare{background:linear-gradient(90deg,#ffc857,#ff8fb8);color:var(--ink);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:800;vertical-align:middle}

/* Créateur */
.gift{margin:0;font-size:14px;color:var(--gold);background:#2a2440;border:1px dashed var(--gold);border-radius:12px;padding:8px 12px}
.pick button[data-lock],.swatches button[data-lock]{opacity:.55;border-style:dashed}
.pick button[data-lock][aria-pressed=true]{opacity:1}
.creator .col{position:sticky;top:8px;z-index:2}
@media (max-width:719px){.creator .stage img{max-width:150px}.creator .card>div{gap:8px;padding:12px}}
.field{display:flex;flex-direction:column;gap:10px}
.pick{display:flex;flex-wrap:wrap;gap:8px}
.pick button{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid #4a4870;background:transparent;font-weight:700;cursor:pointer}
.pick button[aria-pressed=true]{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatches button{width:40px;height:40px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0}
.swatches button[aria-pressed=true]{outline:3px solid var(--gold);outline-offset:2px}
.mini{width:96px;height:96px;background:var(--violet);border-radius:16px;flex:none}
#toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--fg);color:var(--bg);
  padding:12px 20px;border-radius:999px;font-weight:700;max-width:calc(100vw - 32px);text-align:center;z-index:9}
@media (max-width:480px){.logo{font-size:19px}.wallet{padding-right:10px}.right .btn{padding:0 10px}.side,.panel,.box{padding:18px;border-radius:22px}.name{font-size:22px}}