/* Carnet de persos — style WoW Classic
   Layout : bandeau persos + nav des onglets, puis une vue par onglet (paperdoll, tableaux, cartes) */
:root{
  color-scheme: dark;
  --bg:#17110b; --panel:#231a11; --panel-2:#2d2216; --field:#18120b; --line:#4a3820; --line-soft:#33271a;
  --gold:#e8b437; --gold-soft:#b58a32; --text:#efe4cf; --muted:#a8977a; --ink:#1b130a;
  --q-legendaire:#ff8000; --q-epique:#a335ee; --q-rare:#0070dd; --q-inhabituelle:#1eff00; --q-commune:#ffffff;
  --green:#1eff00; --tip:#0b0d1a; --tip-line:#5d5d8a; --danger:#d9534f; --ok:#6fbf4a; --warn:#e0a030; --ro:#b08cff;
  --f-display:"Marcellus SC","Trajan Pro",Georgia,serif;
  --f-body:"Alegreya Sans","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{
  background:var(--bg); color:var(--text); font-family:var(--f-body); font-size:15px; line-height:1.45; min-height:100vh;
  background-image:radial-gradient(ellipse at 50% -10%, #3a2a16 0%, transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px);
}
a{color:var(--gold)}
.wrap{max-width:1140px;margin:0 auto;padding:20px max(16px, env(safe-area-inset-right,0px)) 60px max(16px, env(safe-area-inset-left,0px))}
h1,h2,h3{font-family:var(--f-display);font-weight:400;text-wrap:balance;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* En-tête */
.top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;border-bottom:1px solid var(--line);padding-bottom:12px}
.brand{font-family:var(--f-display);color:var(--gold);font-size:1.35rem;letter-spacing:.04em;text-decoration:none}
.chars{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.deco{color:var(--muted);font-size:.9rem}
.chip{border:1px solid var(--line);background:var(--panel);padding:4px 12px;border-radius:3px;font-size:.9rem;cursor:pointer}
.chip.on{border-color:var(--gold-soft);color:var(--gold);background:var(--panel-2)}
.chip.ghost{color:var(--muted);border-style:dashed}
nav.mods{display:flex;gap:2px;overflow-x:auto;margin-top:10px;border-bottom:1px solid var(--line-soft)}
nav.mods a{border-bottom:2px solid transparent;padding:8px 12px;color:var(--muted);white-space:nowrap;text-decoration:none;font-size:.95rem}
nav.mods a.on{color:var(--gold);border-bottom-color:var(--gold)}

/* Vues */
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin:22px 0 14px}
.head h2{color:var(--gold);font-size:1.9rem}
.head .sub{color:var(--muted);font-size:.95rem}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.panel{background:linear-gradient(180deg,var(--panel) 0%, #1c150d 100%);border:1px solid var(--line);border-radius:4px;padding:16px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.titre-panel{font-family:var(--f-display);color:var(--gold-soft);font-size:1.15rem;margin:0 0 10px}
.vide{color:var(--muted);font-style:italic;padding:12px 0}

/* Boutons */
.btn{display:inline-block;border:1px solid var(--gold-soft);background:var(--gold-soft);color:var(--ink);padding:6px 14px;border-radius:3px;cursor:pointer;font-weight:500;text-decoration:none}
.btn:hover{background:var(--gold)}
.btn.sec{background:transparent;color:var(--gold)}
.btn.sec:hover{background:rgba(232,180,55,.08)}
.btn.dan{background:transparent;border-color:var(--danger);color:#f0a5a2}
.btn.petit{padding:2px 9px;font-size:.85rem}
.lien{background:none;border:0;color:var(--gold-soft);text-decoration:underline;cursor:pointer;padding:0}

/* Sets */
.sets{display:flex;flex-wrap:wrap;border:1px solid var(--gold-soft);border-radius:3px;overflow:hidden}
.sets button{background:transparent;border:0;border-right:1px solid var(--gold-soft);padding:6px 14px;color:var(--gold);cursor:pointer}
.sets button:last-child{border-right:0}
.sets button.on{background:var(--gold-soft);color:var(--ink)}
.sets button.add{color:var(--muted)}

/* Totaux */
.totals{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.tot{background:var(--panel);padding:10px 12px}
.tot .k{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tot .v{font-family:var(--f-display);font-size:1.45rem;color:var(--gold);font-variant-numeric:tabular-nums}
.tot .v.ro{color:var(--ro)}

/* Paperdoll */
.doll{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,280px) minmax(0,1fr);gap:18px;margin-top:16px}
.col{display:flex;flex-direction:column;gap:10px;min-width:0}
.col.right .slot{flex-direction:row-reverse;text-align:right}
.slot{display:flex;align-items:center;gap:10px;min-width:0;background:none;border:0;padding:3px;cursor:pointer;border-radius:3px;text-align:left}
.slot:hover{background:rgba(232,180,55,.06)}
.icon{position:relative;flex:0 0 auto;width:48px;height:48px;border-radius:4px;border:2px solid var(--qc,#555);overflow:hidden;
  background:radial-gradient(circle at 35% 30%, #4b3a24, #120d07 75%);box-shadow:0 0 6px color-mix(in srgb, var(--qc,#000) 35%, transparent);
  display:grid;place-items:center;font-family:var(--f-display);font-size:1.35rem;color:#e9dcc0;text-shadow:0 1px 2px #000}
.icon img{width:100%;height:100%;object-fit:cover;display:block}
.icon.petit{width:32px;height:32px;font-size:1rem}
.icon.empty{border:2px dashed #5a4a32;background:#120d07;box-shadow:none;color:#6f5f45;font-size:.6rem;font-family:var(--f-body);text-transform:uppercase;letter-spacing:.04em;text-align:center;line-height:1.1;padding:2px}
.ench{flex:0 0 auto;width:22px;height:22px;border-radius:3px;border:1px solid #6d5a3a;background:#120d07;display:grid;place-items:center;font-size:.7rem;color:#6f5f45}
.ench.on{border-color:#79c7ff;background:radial-gradient(circle,#2a6ca0,#0d2236);color:#cfeaff}
.meta{min-width:0}
.meta .nm{font-weight:500;color:var(--qc,var(--muted));line-height:1.2;overflow-wrap:break-word}
.meta .sl{font-size:.78rem;color:var(--muted)}
.loon{display:inline-block;font-size:.7rem;border:1px solid var(--line);padding:0 5px;border-radius:2px;margin:0 4px;color:var(--gold-soft)}
.portrait{border:1px solid var(--line);border-radius:4px;background:repeating-linear-gradient(135deg,#1a130b 0 10px,#1e160d 10px 20px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:420px;position:relative;overflow:hidden}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portrait .ph{position:relative;text-align:center;color:var(--muted);padding:16px;font-size:.9rem}
.portrait .ph b{display:block;font-family:var(--f-display);color:var(--gold-soft);font-size:1.2rem;font-weight:400;margin-bottom:4px}
.portrait label{position:relative;z-index:1;border:1px solid var(--gold-soft);background:rgba(23,17,11,.85);color:var(--gold);padding:5px 12px;border-radius:3px;cursor:pointer;font-size:.85rem;margin-top:auto;margin-bottom:12px}
.portrait input{position:absolute;width:1px;height:1px;opacity:0}
.weapons{grid-column:1 / -1;display:flex;justify-content:center;gap:28px;flex-wrap:wrap;border-top:1px solid var(--line-soft);padding-top:14px}
.weapons .slot{flex-direction:column;text-align:center;max-width:160px}

/* Tableaux */
.table-wrap{overflow-x:auto}
table.liste{width:100%;border-collapse:collapse;font-size:.93rem}
table.liste th{text-align:left;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:8px;border-bottom:1px solid var(--line)}
table.liste td{padding:8px;border-bottom:1px solid var(--line-soft);vertical-align:top}
table.liste tr:hover td{background:rgba(232,180,55,.04)}
.lib{font-weight:500}
.pill{display:inline-block;font-size:.75rem;padding:1px 8px;border-radius:10px;border:1px solid currentColor;white-space:nowrap}
.st-a_faire{color:var(--muted)} .st-en_cours{color:var(--warn)} .st-fait{color:var(--ok)}
.pr-haute{color:#ff8a65} .pr-moderee{color:var(--gold-soft)} .pr-basse{color:var(--muted)}
.filtres{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.filtres select,.filtres input{background:var(--field);border:1px solid var(--line);border-radius:3px;padding:5px 8px}
.actions-ligne{white-space:nowrap;text-align:right}

/* Barres de réputation */
.rep{display:grid;gap:4px;margin-bottom:14px}
.rep .l{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.rep .jauge{height:16px;border:1px solid #000;background:#0e0a06;border-radius:2px;overflow:hidden;box-shadow:inset 0 0 4px #000}
.rep .jauge i{display:block;height:100%;background:linear-gradient(180deg,var(--rc,#2f8f2f),color-mix(in srgb, var(--rc,#2f8f2f) 60%, #000))}
.pal-Haï,.pal-Hostile{--rc:#c0392b} .pal-Inamical{--rc:#d35400} .pal-Neutre{--rc:#c9a227}
.pal-Amical,.pal-Honoré,.pal-Révéré{--rc:#2e9e3a} .pal-Exalté{--rc:#1fa3a3}

/* Talents */
.arbre h4{font-family:var(--f-display);font-weight:400;color:var(--gold-soft);margin:10px 0 6px;font-size:1rem}
.talent{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px dotted var(--line-soft)}
.talent .rg{font-variant-numeric:tabular-nums;color:var(--green)}
.talent .rg.partiel{color:var(--gold)}

/* Cartes (tableau de bord, consommables, notes) */
.carte{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:14px;min-width:0}
.carte h3{color:var(--gold);font-size:1.2rem;margin-bottom:4px}
.carte .pied{display:flex;gap:8px;margin-top:10px}
.note-texte{white-space:pre-wrap;overflow-wrap:anywhere}
.kv{display:grid;grid-template-columns:minmax(110px,max-content) minmax(0,1fr);gap:6px 14px}
.kv dt{color:var(--muted)} .kv dd{margin:0;overflow-wrap:anywhere}

/* Infobulle */
.tip{position:fixed;z-index:50;pointer-events:none;max-width:330px;background:var(--tip);border:1px solid var(--tip-line);border-radius:4px;padding:8px 10px;
  box-shadow:0 4px 16px rgba(0,0,0,.6);font-size:.88rem;line-height:1.35;color:#fff}
.tip .t{font-weight:700;font-size:.98rem}
.tip .eq,.tip .q2{color:var(--green)}
.tip hr{border:0;border-top:1px solid #2a2a44;margin:6px 0}
.tip .perso{color:#d8c9a8}
.tip .perso span{color:var(--muted)}
.tip .hint{color:#8d8db0;font-size:.78rem;margin-top:4px}
.tip table{border-collapse:collapse;width:100%} .tip td,.tip th{padding:0;text-align:left;font-weight:normal;vertical-align:top}
.tip th{text-align:right}
.tip .q0{color:#9d9d9d} .tip .q1{color:#fff} .tip .q3{color:#0070dd} .tip .q4{color:#a335ee} .tip .q5{color:#ff8000}
.tip .q{color:#ffd100} .tip a{color:inherit;text-decoration:none} .tip .whtt-sellprice,.tip .moneygold{display:none}

/* Fenêtre */
.veil{position:fixed;inset:0;background:rgba(5,3,1,.72);z-index:60;display:grid;place-items:center;padding:16px}
.modal{width:min(580px,100%);max-height:92vh;overflow:auto;background:var(--panel);border:1px solid var(--gold-soft);border-radius:5px;box-shadow:0 10px 40px rgba(0,0,0,.7)}
.modal header{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.modal header h3{color:var(--gold);font-size:1.3rem}
.modal header span{color:var(--muted);font-size:.85rem}
.modal form{padding:14px 16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.f{display:flex;flex-direction:column;gap:3px;min-width:0}
.f.full{grid-column:1 / -1}
.f label{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.f input,.f select,.f textarea{background:var(--field);border:1px solid var(--line);border-radius:3px;padding:7px 9px;min-width:0}
.f textarea{resize:vertical}
.f small{color:var(--muted);font-size:.8rem}
.f small.ok{color:var(--green)} .f small.ko{color:#f0a5a2}
.grp{grid-column:1 / -1;font-family:var(--f-display);color:var(--gold-soft);border-top:1px solid var(--line-soft);padding-top:8px;margin-top:4px}
.actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;margin-top:6px}
.actions .droite{display:flex;gap:8px;margin-left:auto}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--panel-2);border:1px solid var(--gold-soft);color:var(--gold);padding:8px 16px;border-radius:3px;z-index:70}

/* Connexion */
.page-connexion{display:grid;place-items:center;padding:16px}
.carte-connexion{width:min(380px,100%);background:var(--panel);border:1px solid var(--gold-soft);border-radius:5px;padding:24px;display:grid;gap:14px}
.carte-connexion h1{color:var(--gold);font-size:1.6rem;text-align:center}
.erreur{color:#f0a5a2;margin:0} .ok{color:var(--ok);margin:0}

@media (max-width:860px){
  .totals{grid-template-columns:repeat(3,minmax(0,1fr))}
  .doll{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .portrait{grid-column:1 / -1;order:-1;min-height:220px}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .totals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .icon{width:42px;height:42px}
  .modal form,.grid2,.grid3{grid-template-columns:minmax(0,1fr)}
  table.liste .masquable{display:none}
  .doll{grid-template-columns:minmax(0,1fr)}
  .col.right .slot{flex-direction:row;text-align:left}
  .weapons{justify-content:flex-start;flex-direction:column;gap:10px}
  .weapons .slot{flex-direction:row;text-align:left;max-width:none}
}
@media (prefers-reduced-motion:no-preference){ .slot{transition:background .15s} }