/* ==========================================================================
   WoW Forever — Calculateur de talents (FR)
   Palette officielle inspirée de worldofwarcraft.blizzard.com/fr-fr/forever :
   bleu nuit profond, accents bleu/vert électriques, texte blanc.
   ========================================================================== */

:root{
  --bg-950:#04101a;
  --bg-900:#081b28;
  --bg-800:#0e2738;
  --bg-700:#15374b;
  --border:#1d4459;
  --border-soft:#153347;

  --blue-600:#1f7fe0;
  --blue-500:#2f9bff;
  --blue-400:#6ec1ff;

  --green-600:#159165;
  --green-500:#22c58d;
  --green-400:#5fe3ae;

  --white:#eef7fb;
  --white-dim:#a9c3d3;
  --white-dimmer:#7b96a6;

  --ok:#5fe3ae;
  --bad:#e2635c;
  --new:#5fe3ae;
  --changed:#2f9bff;
  --unchanged:#a9c3d3;
  --removed:#e2635c;

  --font-display:'Alegreya', 'Georgia', serif;
  --font-ui:'Alegreya Sans', 'Segoe UI', Arial, sans-serif;

  --radius:8px;
  --shadow-lg:0 10px 30px rgba(2,9,15,.55);
}

*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; height:100%; }

body{
  margin:0;
  position:relative;
  min-height:100%;
  display:flex;
  flex-direction:column;
  background:var(--bg-950);
  color:var(--white);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

#contenu{ flex:1 0 auto; }
.site-header, .site-footer{ flex:none; }

/* Fond illustré unique, fixe, présent sur toute la hauteur de chaque page
   (pas seulement une bande en haut) — la même image sert de repère visuel
   d'une page à l'autre, avec une variante par page quand on en a une. */
body::before{
  content:''; position:fixed; inset:0; z-index:-1;
  background-image:
    linear-gradient(180deg, rgba(4,16,26,.55) 0%, rgba(4,16,26,.82) 45%, var(--bg-950) 100%),
    url("../img/hero-masthead.webp");
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
body.pg-races::before{ background-image:
  linear-gradient(180deg, rgba(4,16,26,.55) 0%, rgba(4,16,26,.82) 45%, var(--bg-950) 100%),
  url("../img/skyborne-bg.webp"); }
body.pg-roadmap::before{ background-image:
  linear-gradient(180deg, rgba(4,16,26,.55) 0%, rgba(4,16,26,.82) 45%, var(--bg-950) 100%),
  url("../img/roadmap-banner.webp"); background-position:center 30%; }
@media (max-width:720px){
  body::before{
    background-attachment:scroll;
    background-image:
      linear-gradient(180deg, rgba(4,16,26,.6) 0%, rgba(4,16,26,.88) 55%, var(--bg-950) 100%),
      url("../img/hero-masthead-sm.webp");
  }
  body.pg-races::before{ background-image:
    linear-gradient(180deg, rgba(4,16,26,.6) 0%, rgba(4,16,26,.88) 55%, var(--bg-950) 100%),
    url("../img/skyborne-bg-sm.webp"); }
}

a{ color:var(--blue-400); text-decoration:none; }
a:hover{ text-decoration:underline; }

img{ max-width:100%; display:block; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--white);
  font-weight:700;
  margin:0 0 .5em;
  letter-spacing:.01em;
}

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
}

/* ---------------- Header / nav ---------------- */

.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg,#0a1c2a,#061420);
  border-bottom:1px solid var(--border-soft);
  box-shadow:0 2px 12px rgba(2,9,15,.5);
}

.site-header .bar{
  display:flex; flex-direction:column;
  padding:12px 20px;
  max-width:1180px; margin:0 auto;
}

.bar-top{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  min-height:44px;
}

.brand-row{
  display:flex; align-items:center; gap:10px;
}
.brand-logo-link{
  display:flex; flex:none;
}
.brand-logo{
  width:auto; height:44px; flex:none;
}
.brand-text{
  display:flex; flex-direction:column; white-space:nowrap;
}
.brand-title-row{
  display:flex; align-items:baseline; gap:6px;
}
.brand-title{
  color:var(--white); font-family:var(--font-display);
  font-size:1.25rem; font-weight:700; line-height:1.2;
  text-decoration:none; white-space:nowrap;
}
.brand-title:hover{ text-decoration:underline; }
.brand-by{
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--font-ui); font-size:.68rem; font-weight:600; line-height:1.2;
  letter-spacing:.02em; color:var(--white-dimmer);
  text-decoration:none; white-space:nowrap;
  border-bottom:1px dotted transparent;
  transition:color .15s ease, border-color .15s ease;
}
.brand-by-icon{
  fill:currentColor; flex:none;
}
.brand-by:hover{ color:var(--blue-400); border-bottom-color:var(--blue-400); }
.brand-text small{
  display:block; color:var(--white-dimmer); font-family:var(--font-ui);
  font-size:.62rem; font-weight:400; line-height:1.3; letter-spacing:.08em; text-transform:uppercase;
}

.nav-toggle{
  background:none; border:1px solid var(--border); color:var(--white);
  border-radius:4px; padding:8px 10px; font-size:1rem; display:none; cursor:pointer;
}

.main-nav{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 6px;
  margin-top:12px; padding-top:12px; padding-bottom:4px;
  border-top:1px solid var(--border-soft);
  min-height:62px; box-sizing:border-box;
}
.main-nav a{
  color:var(--white-dim); font-size:.82rem; line-height:1.15; letter-spacing:.06em; text-transform:uppercase;
  padding:11px 16px; border-radius:6px; white-space:nowrap;
  border:1px solid transparent;
  transition:color .15s ease, background .15s ease, border-color .15s ease;
}
.main-nav a:hover, .main-nav a.active{
  color:var(--blue-400); text-decoration:none;
  background:linear-gradient(180deg, rgba(47,155,255,.2), rgba(47,155,255,.06));
  border-color:rgba(47,155,255,.3);
}

@media (max-width:920px){
  .nav-toggle{ display:inline-block; }
  .main-nav{
    display:none; width:100%; flex-direction:column; align-items:stretch; gap:2px;
  }
  .main-nav.open{ display:flex; }
}

/* ---------------- Hero ---------------- */

.hero{
  position:relative;
  overflow:hidden;
  background:transparent;
  padding:64px 0 48px;
  text-align:center;
}
.hero .container{ position:relative; z-index:1; }
.hero .eyebrow{
  color:var(--green-400); letter-spacing:.1em; text-transform:uppercase; font-size:.78rem; font-weight:700;
  margin-bottom:10px;
}
.hero .eyebrow a{ color:var(--green-400); text-decoration:underline; }
.hero .eyebrow strong{ color:var(--white); }
.hero h1{
  font-size:clamp(1.9rem,4vw,2.9rem);
  margin-bottom:.35em;
  text-shadow:0 2px 22px rgba(47,155,255,.3);
}
.hero p.lead{
  max-width:640px; margin:0 auto; color:var(--white-dim); font-size:1.05rem;
}

/* ---------------- Class grid ---------------- */

.section{ padding:44px 0; }
.section-title{ text-align:center; margin-bottom:8px; }
.section-sub{ text-align:center; color:var(--white-dim); max-width:680px; margin:0 auto 30px; }


.class-grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  margin-top:26px;
}
.class-card{
  flex:1 1 96px; min-width:88px; max-width:140px;
  background:linear-gradient(180deg,var(--bg-800),var(--bg-900));
  border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 8px; text-align:center; color:var(--white);
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.class-card:hover{
  border-color:var(--blue-500); transform:translateY(-3px);
  box-shadow:var(--shadow-lg); text-decoration:none;
}
.class-card img{ width:56px; height:56px; margin:0 auto 10px; border-radius:6px; border:2px solid var(--border); }
.class-card .cname{ font-family:var(--font-display); font-weight:700; font-size:1.02rem; }
.class-card .ccolor{ height:3px; border-radius:2px; margin:8px auto 0; width:60%; }

/* ---------------- Resource / info cards ---------------- */

/* Une seule ligne qui rétrécit en continu avec la largeur de la fenêtre ;
   bulles étroites et hautes (format portrait) plutôt que larges et basses.
   Ne bascule sur plusieurs lignes qu'en dessous d'une largeur de bulle
   raisonnable pour la lecture. */
.card-grid{ display:flex; flex-wrap:nowrap; gap:14px; margin-top:26px; }
.info-card{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center;
  background:linear-gradient(180deg,var(--bg-800),var(--bg-900));
  border:1px solid var(--border); border-radius:var(--radius);
  padding:28px 16px; color:var(--white); text-align:center;
  min-height:240px;
}
.info-card:hover{ border-color:var(--blue-500); text-decoration:none; }
.info-card .kicker{ color:var(--green-400); text-transform:uppercase; letter-spacing:.12em; font-size:.68rem; font-weight:700; }
.info-card h3{ margin:.6em 0 .5em; font-size:1.1rem; }
.info-card p{ color:var(--white-dim); font-size:.85rem; margin:0; }

@media (max-width:900px){
  .card-grid{ flex-wrap:wrap; }
  .info-card{ flex:1 1 200px; min-height:0; }
}
@media (max-width:480px){
  .info-card{ flex:1 1 100%; }
}

.panel{
  background:linear-gradient(180deg,#eaf6fb,#d7ecf5);
  color:#0a1c2a; border:1px solid var(--blue-500); border-radius:var(--radius);
  padding:26px 28px; margin-top:34px; box-shadow:var(--shadow-lg);
}
.panel h2{ color:#0a3a57; }
.panel p{ margin:0 0 12px; }
.panel a{ color:#0f5f8c; font-weight:700; }
.panel strong{ color:#08283b; }

/* ---------------- Breadcrumb ---------------- */

.breadcrumb{ padding:14px 0 0; color:var(--white-dimmer); font-size:.85rem; }
.breadcrumb a{ color:var(--white-dimmer); }
.breadcrumb a:hover{ color:var(--blue-400); }

/* ---------------- Class nav strip (talent pages) ---------------- */

.class-strip{
  display:grid; grid-template-columns:repeat(9,1fr); gap:8px; margin:18px 0 26px;
}
.class-strip a{
  background:var(--bg-900); border:1px solid var(--border); border-radius:var(--radius);
  padding:10px 4px; text-align:center; color:var(--white-dim); font-size:.72rem;
}
.class-strip a img{ width:34px;height:34px;margin:0 auto 6px; border-radius:4px; }
.class-strip a.active, .class-strip a:hover{ border-color:var(--blue-500); color:var(--blue-400); text-decoration:none; }

@media (max-width:760px){
  .class-strip{ grid-template-columns:repeat(5,1fr); }
}

/* ---------------- Calculator header ---------------- */

.calc-head{
  background:linear-gradient(180deg,var(--bg-800),var(--bg-900));
  border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 20px; display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-bottom:22px;
}
.calc-head .who{ display:flex; align-items:center; gap:12px; }
.calc-head .who img{ width:48px;height:48px;border-radius:6px;border:2px solid var(--blue-500); }
.calc-head .who h1{ margin:0; font-size:1.4rem; }
.calc-stats{ display:flex; gap:18px; flex-wrap:wrap; color:var(--white-dim); font-size:.85rem; }
.calc-stats > div{ text-align:center; }
.calc-stats b{ display:inline-block; margin-top:2px; color:var(--blue-400); font-size:1.05rem; }
.calc-actions{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }

.btn{
  font-family:var(--font-ui); font-size:.82rem; font-weight:700; letter-spacing:.03em;
  border-radius:5px; padding:9px 14px; cursor:pointer; border:1px solid var(--green-500);
  background:transparent; color:var(--green-400); transition:background .15s ease,color .15s ease;
}
.btn:hover{ background:var(--green-500); color:#04140d; }
.btn.primary{ background:var(--blue-500); color:#04121c; border-color:var(--blue-500); }
.btn.primary:hover{ background:var(--blue-400); }
.btn.ghost{ border-color:var(--border-soft); color:var(--white-dimmer); }
.btn.ghost:hover{ background:var(--bg-700); color:var(--white); }
.btn:disabled{ opacity:.4; cursor:not-allowed; }

.toggle-row{ display:flex; align-items:center; gap:8px; color:var(--white-dim); font-size:.85rem; }
.switch{
  width:38px; height:20px; border-radius:20px; background:var(--bg-700); position:relative; cursor:pointer; flex:none;
  border:1px solid var(--border);
}
.switch i{
  position:absolute; top:1px; left:1px; width:16px; height:16px; border-radius:50%;
  background:var(--white-dim); transition:transform .15s ease, background .15s ease;
}
.switch.on{ background:var(--green-600); }
.switch.on i{ transform:translateX(18px); background:#dff8ec; }

/* ---------------- Trees ---------------- */

/* Les 3 arbres restent côte à côte tant qu'il y a la place ; sinon on passe
   directement à 1 colonne (jamais de palier intermédiaire à 2 colonnes,
   qui laisserait un arbre seul, isolé, sur sa propre ligne). */
.trees{ display:grid; grid-template-columns:repeat(3, 1fr); align-items:start; gap:16px; }
@media (max-width:1100px){
  .trees{ grid-template-columns:1fr; }
}
.tree{
  position:relative;
  min-width:0;
  background:linear-gradient(180deg,var(--bg-800),var(--bg-900));
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
}
/* Image de fond thématique de l'arbre — dérivée de son icône, agrandie et
   floutée pour donner une ambiance (façon artwork), sans dépendre d'images
   externes supplémentaires. */
.tree-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  filter:blur(30px) saturate(1.7) brightness(.5);
  transform:scale(1.4);
  pointer-events:none;
}
.tree-head{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  background:rgba(2,9,15,.6); border-bottom:1px solid var(--border);
}
.tree-head img{ width:30px;height:30px;border-radius:4px;border:1px solid var(--blue-500); }
.tree-head h2{ margin:0; font-size:1.1rem; flex:none; }
.tree-head .count{ color:var(--white-dim); font-size:.85rem; }
.tree-head .btn{ margin-left:auto; padding:6px 10px; font-size:.72rem; }

/* Barre de points investis dans l'arbre (sur 51), à la manière des
   calculateurs de référence. */
.tree-bar{ position:relative; z-index:1; height:4px; background:rgba(2,9,15,.65); }
.tree-bar span{
  display:block; height:100%; width:0%; transition:width .2s ease;
  /* Couleur de la classe active (définie en JS) ; vert par défaut si absente. */
  background:linear-gradient(90deg,var(--class-accent-soft,var(--green-600)),var(--class-accent,var(--green-400)));
}

.tree-grid-wrap{ position:relative; z-index:1; padding:20px 12px 24px; overflow-x:auto; }
.tree-grid-wrap::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,16,26,.32) 0%, rgba(4,16,26,.74) 55%, rgba(4,16,26,.92) 100%);
  pointer-events:none;
}
.tree-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4, 56px);
  grid-auto-rows:56px;
  gap:10px 14px;
  margin:0 auto;
  width:max-content;
}
.tree-grid svg.lines{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }

.talent{
  position:relative; width:56px; height:56px; border-radius:7px;
  border:2px solid var(--border-soft); background:#061420; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 1px rgba(2,9,15,.6);
  transition:border-color .12s ease, box-shadow .12s ease, filter .12s ease;
}
.talent img{ width:100%; height:100%; border-radius:5px; }
.talent .rank-badge{
  position:absolute; right:-6px; bottom:-6px; background:#061420; border:1px solid var(--blue-500);
  border-radius:4px; font-size:.64rem; padding:1px 4px; color:var(--white); font-weight:700;
}
/* Pastille de statut (nouveau / modifié), un badge rond centré exactement
   sur le coin supérieur-gauche de la bulle (au croisement des cases), à la
   façon du site de référence : fond noir, bordure et étoile dans la même
   teinte (jaune pour "nouveau", rouge pour "modifié"), pour être visible au
   premier coup d'œil. Les talents "identiques à Classic" n'ont pas de badge. */
.talent .status-dot{
  /* -12px (et non -10px) car .talent a une bordure de 2px : le repère
     absolu part du bord intérieur de cette bordure, il faut donc compenser
     ces 2px pour que le centre du badge tombe exactement sur le coin
     visuel de la bulle (le croisement des cases). */
  position:absolute; left:-12px; top:-12px; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; line-height:1; font-weight:400;
  background:#0a0a0a;
  box-shadow:0 1px 3px rgba(0,0,0,.8);
  z-index:2;
}
.talent.status-new .status-dot{
  border:1px solid #ffd100; color:#ffd100;
}
.talent.status-changed .status-dot{
  border:1px solid #ff2b2b; color:#ff2b2b;
}
.talent.status-unchanged .status-dot{ display:none; }

.talent.locked{ filter:grayscale(85%) brightness(.55); cursor:not-allowed; }
.talent.has-points{ border-color:var(--green-500); box-shadow:0 0 0 1px rgba(2,9,15,.6), 0 0 0 3px rgba(34,197,141,.4); }
/* Un talent au rang maximum affiche un anneau bleu distinct, même s'il a
   aussi des points investis (règle après has-points pour gagner le conflit). */
.talent.maxed{ border-color:var(--blue-500); box-shadow:0 0 0 1px rgba(2,9,15,.6), 0 0 0 3px rgba(47,155,255,.4); }
.talent:hover:not(.locked){ border-color:var(--blue-400); }

/* tooltip */
.ttip{
  position:fixed; z-index:200; max-width:300px; background:#081826; border:1px solid var(--blue-500);
  border-radius:6px; padding:12px 14px; box-shadow:var(--shadow-lg); font-size:.85rem; color:var(--white);
  display:none;
}
.ttip.show{ display:block; }
.ttip h4{ margin:0 0 4px; font-size:1rem; color:var(--blue-400); }
.ttip .meta{ color:var(--white-dim); font-size:.75rem; margin-bottom:8px; }
.ttip .desc{ color:var(--white); margin:0 0 6px; }
.ttip .desc.classic{ color:var(--white-dim); font-style:italic; }
.ttip .req{ color:var(--bad); font-size:.78rem; margin-top:6px; }
.ttip .badge{ display:inline-block; font-size:.65rem; font-weight:700; padding:1px 6px; border-radius:3px; margin-right:6px; }
.ttip .badge.new{ background:#e8b400; color:#2b1e00; }
.ttip .badge.changed{ background:#d81f1f; color:#fff0ef; }
.ttip .badge.unchanged{ background:var(--unchanged); color:#0c1a08; }

.legend{ display:flex; flex-wrap:wrap; gap:14px; color:var(--white-dim); font-size:.8rem; margin:10px 0 0; }
.legend b{ display:inline-block; width:14px;height:14px;border-radius:50%; margin-right:5px; vertical-align:-2px; }
.legend b.removed{ background:var(--removed); }
/* Même pastille que sur la grille de talents (fond noir, bordure et étoile
   colorées), pour que la légende ressemble exactement aux badges réels. */
.legend-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%; margin-right:6px; vertical-align:-3px;
  font-style:normal; font-size:.62rem; line-height:1; background:#0a0a0a;
}
.legend-badge.new{ border:1px solid #ffd100; color:#ffd100; }
.legend-badge.changed{ border:1px solid #ff2b2b; color:#ff2b2b; }

/* ---------------- Generic content pages ---------------- */

.prose{ max-width:820px; }
.prose h2{ margin-top:1.4em; }
.prose p{ color:var(--white); }

table.data-table{ width:100%; border-collapse:collapse; margin:18px 0; font-size:.9rem; }
table.data-table th, table.data-table td{ border:1px solid var(--border); padding:8px 10px; text-align:left; }
table.data-table th{ background:var(--bg-800); color:var(--blue-400); }
table.data-table tr:nth-child(even) td{ background:rgba(255,255,255,.02); }

.tabs{ display:flex; flex-wrap:wrap; gap:6px; margin:18px 0; }
.tabs button{
  font-family:var(--font-ui); background:var(--bg-900); border:1px solid var(--border); color:var(--white-dim);
  padding:8px 14px; border-radius:5px; cursor:pointer; font-size:.85rem;
}
.tabs button.active{ border-color:var(--blue-500); color:var(--blue-400); }

/* ---------------- Faction / race / profession cards (reference-site layout) ---------------- */

.racials-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:16px; }

.compare-toggle{ display:flex; align-items:center; gap:8px; color:var(--white-dim); font-size:.85rem; cursor:pointer; white-space:nowrap; }
.compare-toggle input{ position:absolute; opacity:0; width:1px; height:1px; }
.compare-switch{
  width:38px; height:20px; border-radius:20px; background:var(--bg-700); position:relative; flex:none;
  border:1px solid var(--border); display:inline-block; transition:background .15s ease;
}
.compare-switch::before{
  content:''; position:absolute; top:1px; left:1px; width:16px; height:16px; border-radius:50%;
  background:var(--white-dim); transition:transform .15s ease, background .15s ease;
}
.compare-toggle input:checked + .compare-switch{ background:var(--green-600); }
.compare-toggle input:checked + .compare-switch::before{ transform:translateX(18px); background:#dff8ec; }

.compare-legend{ margin:14px 0 26px; }
.flag{ font-style:normal; font-weight:900; margin-right:4px; }
.flag.new{ color:var(--new); }
.flag.changed{ color:var(--changed); }
.flag.unchanged{ color:var(--unchanged); }
.flag.removed{ color:var(--removed); }

.compare-only{ display:none; }
body.compare-on .compare-only{ display:inline; }
.ability-classic{ display:none; margin-top:6px; font-size:.82rem; color:var(--white-dimmer); font-style:italic; }
body.compare-on .ability-classic{ display:block; }
.ability-classic-label{ font-style:normal; font-weight:700; color:var(--blue-400); margin-right:5px; text-transform:uppercase; font-size:.7rem; letter-spacing:.05em; }

.faction{ display:inline-block; padding:2px 12px; border-radius:20px; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; }
.faction.alliance{ background:rgba(47,155,255,.15); color:var(--blue-400); }
.faction.horde{ background:rgba(34,197,141,.15); color:var(--green-400); }

.faction-tabs{ display:flex; gap:10px; margin:18px 0 4px; border-bottom:1px solid var(--border-soft); }
.faction-tab{
  appearance:none; background:none; border:none; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  text-transform:uppercase; letter-spacing:.08em;
  padding:10px 4px 12px; color:var(--white-dim);
  border-bottom:3px solid transparent; transition:color .15s ease, border-color .15s ease;
}
.faction-tab:hover{ color:var(--white); }
.faction-tab.alliance.active{ color:var(--blue-400); border-bottom-color:var(--blue-500); }
.faction-tab.horde.active{ color:var(--green-400); border-bottom-color:var(--green-500); }
.faction-panel[hidden]{ display:none; }

.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin:18px 0 34px; }
.card{
  background:linear-gradient(180deg,var(--bg-800),var(--bg-900));
  border:1px solid var(--border); border-radius:var(--radius); padding:20px;
}
.faction-panel[data-faction="alliance"] .card{ border-color:var(--blue-500); }
.faction-panel[data-faction="horde"] .card{ border-color:var(--green-500); }
.card-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.card-head img{ width:36px;height:36px;border-radius:6px;border:2px solid var(--blue-500); flex:none; }
.faction-panel[data-faction="alliance"] .card-head img{ border-color:var(--blue-500); }
.faction-panel[data-faction="horde"] .card-head img{ border-color:var(--green-500); }
.card-head h3{ margin:0; font-size:1.1rem; }
.card-lead{ color:var(--white-dim); font-size:.88rem; margin:0 0 12px; }

.race-classes{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; align-items:center; font-size:.78rem; }
.race-classes-label{ color:var(--white-dimmer); text-transform:uppercase; letter-spacing:.07em; font-size:.68rem; margin-right:4px; }
.race-class{ background:var(--bg-700); border:1px solid var(--border); color:var(--white-dim); padding:3px 9px; border-radius:20px; font-size:.76rem; }
.race-class.is-new{ border-color:var(--green-500); color:var(--green-400); }
.race-class:hover{ text-decoration:none; border-color:var(--blue-500); color:var(--blue-400); }

.abilities{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.ability{ display:flex; gap:10px; align-items:flex-start; }
.ability img{ width:30px;height:30px;border-radius:5px;border:1px solid var(--border); flex:none; }
.ability-name{ font-weight:700; color:var(--white); font-size:.92rem; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ability-name .tag{ font-weight:400; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--white-dimmer); background:var(--bg-700); padding:1px 7px; border-radius:10px; }
.ability-text{ color:var(--white-dim); font-size:.85rem; margin-top:2px; }
.ability-removed .ability-name{ color:var(--white-dimmer); text-decoration:line-through; text-decoration-color:var(--removed); }
.ability-removed img{ opacity:.45; filter:grayscale(60%); }
.ability-removed{ display:none; }
body.compare-on .ability-removed{ display:flex; }
.ability-placeholder{ opacity:.7; }
.ability-placeholder img{ border:1px dashed var(--white-dimmer); border-radius:5px; padding:2px; background:rgba(255,255,255,.03); }
.ability-placeholder .ability-name{ color:var(--white-dimmer); font-style:italic; }
.ability-placeholder .ability-text{ font-style:italic; }

.prof-card{
  background:linear-gradient(180deg,var(--bg-800),var(--bg-900)); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px 20px; margin-bottom:16px;
}
.prof-card h3{ margin-bottom:.2em; display:flex; align-items:center; gap:10px; }
.prof-card h3 img{ width:32px;height:32px;border-radius:6px;border:2px solid var(--blue-500); }
.ability-row{ display:flex; gap:14px; padding:10px 0; border-bottom:1px solid var(--border-soft); align-items:flex-start; flex-wrap:wrap; }
.ability-row:last-child{ border-bottom:none; }
.ability-row img{ width:30px;height:30px;border-radius:5px;border:1px solid var(--border); flex:none; }
.ability-row .name{ font-weight:700; color:var(--white); min-width:190px; }
.ability-row .mark{ font-weight:900; }
.ability-row .mark.new{ color:var(--new); } .ability-row .mark.changed{ color:var(--changed); }
.ability-row .desc{ color:var(--white-dim); font-size:.88rem; }

/* ---------------- Spell book (Compétences) ---------------- */

.spell-book{ display:flex; flex-direction:column; gap:18px; }
.spell-layout{ display:flex; align-items:flex-start; gap:24px; }
.spell-main{ flex:1 1 auto; min-width:0; }
.spell-side{ flex:0 0 320px; position:sticky; top:16px; align-self:flex-start; }
@media (max-width:860px){
  .spell-layout{ flex-direction:column; }
  .spell-side{ position:static; width:100%; flex-basis:auto; }
}
.spell-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.spell-tabs button{
  font-family:var(--font-ui); background:var(--bg-900); border:1px solid var(--border); color:var(--white-dim);
  padding:8px 14px; border-radius:5px; cursor:pointer; font-size:.85rem; display:flex; align-items:center; gap:8px;
}
.spell-tabs button img{ width:20px;height:20px;border-radius:3px; }
.spell-tabs button.active{ border-color:var(--blue-500); color:var(--blue-400); background:rgba(47,155,255,.08); }
.spell-sheet{ display:none; }
.spell-sheet.active{ display:block; }
.spell-level{ margin-bottom:20px; }
.spell-level h4{ font-size:.75rem; text-transform:uppercase; letter-spacing:.09em; color:var(--white-dimmer); margin-bottom:10px; font-family:var(--font-ui); font-weight:700; }
.spell-nodes{ display:flex; flex-wrap:wrap; gap:14px; }
.spell-node{ width:70px; text-align:center; cursor:pointer; background:none; border:none; padding:0; color:inherit; font-family:inherit; }
.spell-node img{ width:48px;height:48px;border-radius:7px;border:2px solid var(--border-soft); margin:0 auto; }
.spell-node .sn-name{ font-size:.66rem; color:var(--white-dim); margin-top:5px; line-height:1.25; }
.spell-node.status-new img{ border-color:var(--green-500); box-shadow:0 0 0 1px rgba(34,197,141,.3); }
.spell-node.status-changed img{ border-color:var(--blue-500); box-shadow:0 0 0 1px rgba(47,155,255,.3); }
.spell-node.status-removed img{ opacity:.4; filter:grayscale(70%); border-color:var(--removed); }
.spell-node:hover img{ border-color:var(--blue-400); }
.spell-node.active img{ border-color:var(--blue-400); box-shadow:0 0 0 2px rgba(47,155,255,.35); }

.spell-detail{
  background:var(--bg-900); border:1px solid var(--blue-500); border-radius:var(--radius);
  padding:16px 18px; max-height:calc(100vh - 32px); overflow-y:auto;
}
.spell-detail .sd-head{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.spell-detail img{ width:42px;height:42px;border-radius:7px;border:2px solid var(--blue-500); }
.spell-detail h3{ margin:0; font-size:1.05rem; }
.spell-detail .sd-meta{ color:var(--white-dimmer); font-size:.78rem; display:flex; gap:12px; flex-wrap:wrap; margin:4px 0 10px; }
.spell-detail .sd-desc{ color:var(--white); font-size:.92rem; margin:0 0 8px; }
.spell-detail .sd-classic{ color:var(--white-dim); font-size:.85rem; font-style:italic; border-top:1px solid var(--border-soft); padding-top:8px; margin-top:8px; }
.spell-detail .sd-note{ color:var(--green-400); font-size:.82rem; margin-top:8px; }

/* ---------------- Roadmap (horizontal rail) ---------------- */

.roadmap-rail{
  display:flex; gap:22px; overflow-x:auto; overflow-y:visible; position:relative;
  padding:0 10px 4px; margin:16px -10px 10px;
  scroll-snap-type:x proximity;
}
.roadmap-line{
  content:''; position:absolute; top:26px; height:2px; left:0; width:0;
  transform:translateY(-50%);
  background:var(--border); z-index:0; pointer-events:none;
}
.roadmap-season{
  flex:1 1 220px; min-width:220px; scroll-snap-align:start; position:relative; z-index:1;
  background:linear-gradient(180deg,var(--bg-800),var(--bg-900)); border:1px solid var(--border);
  border-radius:var(--radius); padding:34px 16px 16px;
}
.roadmap-season::before{
  content:''; position:absolute; left:50%; top:26px; transform:translate(-50%,-50%);
  width:13px; height:13px; border-radius:50%;
  background:var(--blue-500); border:3px solid var(--bg-950); box-shadow:0 0 0 2px var(--blue-500);
  z-index:2;
}
.roadmap-season.is-launch::before{ background:var(--green-500); box-shadow:0 0 0 2px var(--green-500); }
.roadmap-season .rs-date{
  color:var(--green-400); font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; font-weight:700;
  margin-bottom:6px; text-align:center;
}
.roadmap-season h3{ font-size:1.05rem; margin:0 0 12px; text-align:center; }
.roadmap-marks{ display:flex; flex-direction:column; gap:10px; }
.roadmap-mark{
  background:var(--bg-950); border:1px solid var(--border-soft); border-radius:6px; padding:10px 12px;
  font-size:.82rem; color:var(--white-dim);
}
.roadmap-mark b{ display:block; color:var(--white); font-size:.88rem; margin-bottom:3px; }
.roadmap-mark ul{ margin:6px 0 0; padding-left:1.1em; }
.roadmap-mark.is-launch{ border-color:var(--green-500); background:linear-gradient(180deg, rgba(34,197,141,.14), var(--bg-950)); }
.roadmap-mark.is-launch b{ color:var(--green-400); }
.roadmap-mark.is-next{ border-color:var(--blue-500); background:linear-gradient(180deg, rgba(47,155,255,.14), var(--bg-950)); }
.roadmap-mark.is-next b{ color:var(--blue-400); }

@media (max-width:760px){
  .roadmap-season{ flex-basis:220px; }
}

/* ---------------- Footer ---------------- */

.site-footer{
  border-top:1px solid var(--border-soft); margin-top:60px; padding:34px 0; color:var(--white-dimmer); font-size:.82rem;
  text-align:center;
  background:rgba(4,16,26,.72);
}
.site-footer a{ color:var(--white-dimmer); }
.site-footer .disclaimer{ max-width:640px; margin:10px auto 0; }

.skip-link{ position:absolute; left:-999px; top:0; background:var(--blue-500); color:#04121c; padding:8px 12px; }
.skip-link:focus{ left:10px; top:10px; z-index:999; }