:root{
    --bg:#0a0d12;
    --bg2:#10151d;
    --panel:#141a23;
    --line:#232b37;
    --text:#dfe6ee;
    --dim:#7c8798;
    --xol:#a68cf0;
    --xol-dim:#6d5aa8;
    --legion:#d94b3c;
    --legion-dim:#8a3327;
    --legion-gold:#c9a227;
    --prot:#4fa3e0;
    --prot-dim:#2f6a94;
    --grell:#7bc142;
    --grell-dim:#4f7d2a;
    --marran:#e0a34f;
    --marran-dim:#8f6a2f;
    --endari:#b34f8f;
    --endari-dim:#7a3560;
    --valkaru:#4fd9c4;
    --valkaru-dim:#2f8a7a;
    --chakru:#c74fd0;
    --chakru-dim:#7d3184;
    --arandi:#5f7dd9;
    --arandi-dim:#3c4f8a;
    --freecorsairs:#c9924f;
    --freecorsairs-dim:#8a622f;
    --accent:#e8ce6a;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'Chakra Petch',sans-serif;}
  body{
    background-image:
      radial-gradient(ellipse at 20% -10%, rgba(166,140,240,0.08), transparent 45%),
      radial-gradient(ellipse at 80% 0%, rgba(79,163,224,0.06), transparent 40%);
  }
  h1,h2,h3,.display{font-family:'Rajdhani',sans-serif;text-transform:uppercase;letter-spacing:0.03em;}
  .mono{font-family:'JetBrains Mono',monospace;}

  header{
    padding:28px 24px 18px;
    border-bottom:1px solid var(--line);
    display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px;
  }
  header h1{
    font-size:28px;font-weight:700;margin:0;color:#fff;
    display:flex;align-items:center;gap:10px;
  }
  header h1 .dot{width:10px;height:10px;background:var(--accent);display:inline-block;box-shadow:0 0 10px var(--accent);}
  header .sub{color:var(--dim);font-size:13px;max-width:520px;}
  .badge{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);border:1px solid var(--line);padding:4px 10px;letter-spacing:0.05em;}

  nav.tabs{
    display:flex;gap:2px;padding:0 24px;border-bottom:1px solid var(--line);
    overflow-x:auto;background:var(--bg2);
  }
  nav.tabs button{
    background:none;border:none;color:var(--dim);font-family:'Rajdhani',sans-serif;
    font-weight:600;font-size:15px;letter-spacing:0.04em;text-transform:uppercase;
    padding:14px 18px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;
  }
  nav.tabs button:hover{color:var(--text);}
  nav.tabs button.active{color:#fff;border-bottom-color:var(--accent);}

  main{padding:22px 24px 60px;max-width:1180px;margin:0 auto;}
  section{display:none;}
  section.active{display:block;}

  .faction-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
  .faction-chip{
    border:1px solid var(--line);background:var(--panel);color:var(--dim);
    padding:8px 16px;font-family:'Rajdhani',sans-serif;font-weight:600;letter-spacing:0.04em;
    cursor:pointer;font-size:14px;text-transform:uppercase;
  }
  .faction-chip[data-f="xol"].active{border-color:var(--xol);color:var(--xol);background:rgba(166,140,240,0.08);}
  .faction-chip[data-f="legion"].active{border-color:var(--legion);color:var(--legion);background:rgba(217,75,60,0.08);}
  .faction-chip[data-f="protectorate"].active{border-color:var(--prot);color:var(--prot);background:rgba(79,163,224,0.08);}
  .faction-chip[data-f="grell"].active{border-color:var(--grell);color:var(--grell);background:rgba(123,193,66,0.08);}
  .faction-chip[data-f="marran"].active{border-color:var(--marran);color:var(--marran);background:rgba(224,163,79,0.08);}
  .faction-chip[data-f="endari"].active{border-color:var(--endari);color:var(--endari);background:rgba(179,79,143,0.08);}
  .faction-chip[data-f="valkaru"].active{border-color:var(--valkaru);color:var(--valkaru);background:rgba(79,217,196,0.08);}
  .faction-chip[data-f="chakru"].active{border-color:var(--chakru);color:var(--chakru);background:rgba(199,79,208,0.08);}
  .faction-chip[data-f="arandi"].active{border-color:var(--arandi);color:var(--arandi);background:rgba(95,125,217,0.08);}
  .faction-chip[data-f="freecorsairs"].active{border-color:var(--freecorsairs);color:var(--freecorsairs);background:rgba(201,146,79,0.08);}
  .faction-chip[data-f="all"].active{border-color:var(--accent);color:var(--accent);background:rgba(232,206,106,0.08);}
  .chip-group-label{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:0.05em;align-self:center;margin-right:4px;}

  .toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center;}
  .toolbar input, .toolbar select{
    background:var(--panel);border:1px solid var(--line);color:var(--text);
    padding:9px 12px;font-family:'JetBrains Mono',monospace;font-size:13px;
  }
  .toolbar input{flex:1;min-width:180px;}
  .count{color:var(--dim);font-size:12px;font-family:'JetBrains Mono',monospace;}

  table{width:100%;border-collapse:collapse;font-size:13px;}
  thead th{
    text-align:left;font-family:'Rajdhani',sans-serif;font-weight:600;text-transform:uppercase;
    letter-spacing:0.04em;color:var(--dim);font-size:12px;padding:8px 10px;border-bottom:1px solid var(--line);
    cursor:pointer;white-space:nowrap;
  }
  thead th:hover{color:var(--text);}
  tbody tr{border-bottom:1px solid var(--line);}
  tbody tr:hover{background:rgba(255,255,255,0.02);}
  tbody td{padding:9px 10px;font-family:'JetBrains Mono',monospace;color:var(--text);white-space:nowrap;}
  td.name{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:14px;color:#fff;white-space:normal;}
  td.tier{color:var(--dim);font-size:11px;}
  .fac-tag{font-size:10px;padding:2px 6px;border:1px solid;letter-spacing:0.04em;}
  .fac-tag.xol{color:var(--xol);border-color:var(--xol-dim);}
  .fac-tag.legion{color:var(--legion);border-color:var(--legion-dim);}
  .fac-tag.protectorate{color:var(--prot);border-color:var(--prot-dim);}
  .fac-tag.grell{color:var(--grell);border-color:var(--grell-dim);}
  .fac-tag.marran{color:var(--marran);border-color:var(--marran-dim);}
  .fac-tag.endari{color:var(--endari);border-color:var(--endari-dim);}
  .fac-tag.valkaru{color:var(--valkaru);border-color:var(--valkaru-dim);}
  .fac-tag.chakru{color:var(--chakru);border-color:var(--chakru-dim);}
  .fac-tag.arandi{color:var(--arandi);border-color:var(--arandi-dim);}
  .fac-tag.freecorsairs{color:var(--freecorsairs);border-color:var(--freecorsairs-dim);}
  .source-tag{font-size:9px;padding:1px 5px;border:1px solid var(--line);color:var(--dim);margin-left:6px;letter-spacing:0.03em;}

  .note{
    border:1px solid var(--line);background:var(--panel);color:var(--dim);
    font-size:12.5px;padding:12px 14px;margin:18px 0;line-height:1.5;
  }
  .note b{color:var(--text);}

  /* Calculator */
  .calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  @media(max-width:820px){.calc-grid{grid-template-columns:1fr;}}
  .calc-card{border:1px solid var(--line);background:var(--panel);padding:18px;}
  .calc-card h3{margin:0 0 12px;font-size:16px;color:#fff;}
  .field{margin-bottom:12px;}
  .field label{display:block;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:5px;}
  .field select, .field input{
    width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--text);
    padding:9px 10px;font-family:'JetBrains Mono',monospace;font-size:13px;
  }
  .vs{text-align:center;color:var(--accent);font-family:'Rajdhani',sans-serif;font-weight:700;font-size:14px;margin:6px 0;}

  .result-box{margin-top:16px;border-top:1px solid var(--line);padding-top:14px;}
  .result-row{display:flex;justify-content:space-between;padding:6px 0;font-size:13px;border-bottom:1px dashed var(--line);}
  .result-row .k{color:var(--dim);}
  .result-row .v{font-family:'JetBrains Mono',monospace;color:#fff;font-weight:600;}
  .winner{color:var(--accent);}
  .bar-wrap{background:var(--bg2);height:8px;margin-top:4px;overflow:hidden;}
  .bar{height:100%;}

  .eff-table td, .eff-table th{font-size:12.5px;}
  /* Titre de section avec label "eyebrow" mono — utilisé sur les onglets Efficacité, Économie, Factions, Guide */
  .section-title{position:relative;padding-left:14px;border-left:3px solid var(--accent);margin-top:0;}
  .section-title::before{
    content:attr(data-eyebrow);
    display:block;font-family:'JetBrains Mono',monospace;font-size:11px;
    letter-spacing:0.14em;color:var(--dim);margin-bottom:6px;
  }

  footer{padding:30px 24px;color:var(--dim);font-size:11.5px;border-top:1px solid var(--line);text-align:center;}
  a{color:var(--prot);}