/* ===== wowforever – thème parchemin ===== */
:root{
  --bg:#f7f4ee; --bg2:#efe9de; --card:#ffffff; --line:#e4dccd;
  --text:#211c15; --muted:#6f6656; --accent:#b0781a; --accent-soft:#f6e7c8;
  --horde:#b8322a; --alliance:#2f63b5; --green:#2e8a5c;
  --shadow:0 2px 10px rgba(60,40,10,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;line-height:1.65;font-size:15px}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,h4{line-height:1.25;font-weight:700}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}

/* ----- Haut de page ----- */
.topbar{background:var(--text);color:#e9e1d1;font-size:.78rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:32px;gap:10px}
.topbar .live{color:#f2c25a;font-weight:600}
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
header .wrap{display:flex;align-items:center;gap:22px;height:64px}
.logo{font-family:Cinzel,serif;font-weight:800;font-size:1.5rem;letter-spacing:.5px;white-space:nowrap}
.logo span{color:var(--accent)}
.menu{display:flex;gap:2px;flex:1}
.menu a{padding:8px 12px;border-radius:8px;color:var(--muted);font-weight:500;font-size:.92rem;white-space:nowrap}
.menu a:hover{color:var(--text);background:var(--bg2)}
.menu a.active{color:var(--accent);background:var(--accent-soft)}
.burger{display:none;margin-left:auto;background:var(--bg2);border:1px solid var(--line);border-radius:8px;width:42px;height:40px;font-size:1.2rem;cursor:pointer;color:var(--text)}

/* ----- Rubriques en images (sous le menu de l'accueil) ----- */
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:28px}
.tile{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.tile:hover img{transform:scale(1.07)}
.tile span{position:absolute;inset:auto 0 0 0;padding:22px 10px 8px;color:#fff;font-weight:700;font-size:.9rem;background:linear-gradient(transparent,rgba(20,14,6,.8))}

/* ----- Mise en page ----- */
main{padding:28px 0 64px}
.layout{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start}
.crumbs{font-size:.82rem;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--accent);font-weight:500}
.page-title{font-size:clamp(1.7rem,4vw,2.4rem);margin-bottom:8px}
.page-lead{color:var(--muted);margin-bottom:24px;max-width:760px;font-size:1.02rem}
.cover{border-radius:14px;overflow:hidden;margin-bottom:24px;aspect-ratio:21/8;box-shadow:var(--shadow)}
.cover img{width:100%;height:100%;object-fit:cover}
.sec-title{display:flex;align-items:center;justify-content:space-between;margin:36px 0 14px}
.sec-title h2{font-size:1.25rem;display:flex;gap:10px;align-items:center}
.sec-title h2::before{content:"";width:4px;height:20px;background:var(--accent);border-radius:2px}
.sec-title a{font-size:.85rem;color:var(--accent);font-weight:600}

/* ----- Article à la une ----- */
.hero{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:16/7;min-height:280px;box-shadow:var(--shadow)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.hero:hover img{transform:scale(1.03)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(20,14,6,.82))}
.hero-body{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:26px;color:#fff}
.hero h1{font-size:clamp(1.35rem,3.4vw,2.1rem);margin:10px 0 6px;max-width:680px}
.hero p{color:#f1e8d8;max-width:620px}

.badge{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:3px 9px;border-radius:5px;background:var(--accent);color:#fff}
.badge.blue{background:var(--alliance)}
.badge.red{background:var(--horde)}
.badge.green{background:var(--green)}
.badge.grey{background:#e9e3d7;color:var(--muted)}

/* ----- Cartes ----- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.grid.g2{grid-template-columns:repeat(2,1fr)}
@media (max-width:560px){.grid.g2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
a.card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(60,40,10,.12)}
.thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg2)}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
a.card:hover .thumb img{transform:scale(1.06)}
.thumb .badge{position:absolute;left:12px;top:12px}
.card-body{padding:14px 16px 16px;flex:1;display:flex;flex-direction:column}
.card h3{font-size:1.02rem;margin-bottom:6px}
.card p{color:var(--muted);font-size:.89rem;flex:1}
.meta{font-size:.76rem;color:var(--muted);margin-top:10px;font-weight:500}

/* ----- Barre latérale ----- */
aside .box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:18px;box-shadow:var(--shadow)}
aside h4{font-size:.95rem;margin-bottom:12px}
.cdown{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.cdown div{background:var(--accent-soft);border-radius:8px;padding:8px 2px}
.cdown b{display:block;font-size:1.4rem;color:var(--accent);font-family:Cinzel,serif}
.cdown span{font-size:.65rem;color:var(--muted);text-transform:uppercase}
.small{font-size:.8rem;color:var(--muted);margin-top:10px}
.mini{display:flex;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:.88rem;font-weight:500}
.mini:last-child{border:0}
.mini img{width:64px;height:44px;border-radius:6px;object-fit:cover;flex:none}
.mini:hover{color:var(--accent)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags a{background:var(--bg2);border:1px solid var(--line);padding:4px 10px;border-radius:99px;font-size:.78rem;color:var(--muted)}
.tags a:hover{color:var(--accent);border-color:var(--accent)}

/* ----- Contenu ----- */
.article{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px;box-shadow:var(--shadow)}
.article h2{font-size:1.25rem;margin:28px 0 10px}
.article h2:first-child{margin-top:0}
.article p,.article li{color:#3e372c;margin-bottom:10px}
.article ul{padding-left:20px}
.article figure{margin:18px 0;border-radius:10px;overflow:hidden}
.article figcaption{font-size:.8rem;color:var(--muted);padding:6px 2px}
.info{background:var(--accent-soft);border-left:4px solid var(--accent);padding:12px 16px;border-radius:6px;margin:16px 0;color:#5a4214;font-size:.93rem}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;min-width:560px;background:var(--card)}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:.9rem}
th{background:var(--bg2);color:var(--muted);font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.5px}
tr:last-child td{border:0}
tbody tr:hover{background:#fbf8f2}
.lvl{font-weight:700;color:var(--accent)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.filters button{background:var(--card);border:1px solid var(--line);color:var(--muted);padding:7px 14px;border-radius:8px;font:inherit;font-size:.85rem;cursor:pointer}
.filters button.on{color:#fff;background:var(--accent);border-color:var(--accent)}

.classes{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.cls{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--c);border-radius:10px;padding:16px;box-shadow:var(--shadow)}
.cls h3{font-size:1rem}
.cls p{font-size:.82rem;color:var(--muted)}
.cls .new{font-size:.72rem;color:var(--accent);margin-top:6px;font-weight:700}

.trees{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:14px}
.tree{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:16px}
.tree h3{font-size:1rem;margin-bottom:6px}
.tree p{font-size:.86rem;color:var(--muted);margin:0}

.timeline{border-left:2px solid var(--line);margin-left:8px;padding-left:24px}
.step{position:relative;margin-bottom:24px}
.step::before{content:"";position:absolute;left:-32px;top:5px;width:14px;height:14px;border-radius:50%;border:2px solid var(--accent);background:var(--bg)}
.step.done::before{background:var(--accent)}
.step .d{color:var(--accent);font-weight:700;font-size:.85rem}
.step p{color:var(--muted);font-size:.9rem}

/* ----- Pied de page ----- */
footer{background:var(--text);color:#cfc5b2;padding:42px 0 28px;font-size:.86rem}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;margin-bottom:24px}
footer .logo{color:#fff;margin-bottom:8px}
footer h5{color:#fff;margin-bottom:10px;font-size:.9rem}
footer a{display:block;padding:3px 0}
footer a:hover{color:#f2c25a}
.legal{border-top:1px solid #3d362b;padding-top:18px;font-size:.78rem}

@media (max-width:1000px){ .layout{grid-template-columns:1fr} .tiles{grid-template-columns:repeat(3,1fr)} }
@media (max-width:860px){
  .burger{display:block}
  .menu{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:10px 16px;box-shadow:var(--shadow)}
  .menu.open{display:flex}
  footer .cols{grid-template-columns:1fr}
  .topbar .hide-m{display:none}
}
@media (max-width:520px){ .tiles{grid-template-columns:repeat(2,1fr)} .hero{aspect-ratio:auto;min-height:320px} .cover{aspect-ratio:16/9} .article{padding:20px} }

/* Article à la une : image entière, texte en dessous */
.hero{aspect-ratio:auto;min-height:0;background:var(--card);border:1px solid var(--line)}
.hero::after{display:none}
.hero img{position:static;aspect-ratio:16/9;height:auto}
.hero-body{position:static;color:var(--text);padding:20px 24px 24px}
.hero p{color:var(--muted)}
@media (max-width:520px){ .hero{min-height:0} }

/* Galerie */
.gallery{columns:3 280px;column-gap:16px}
.gal-item{break-inside:avoid;margin:0 0 16px;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);cursor:zoom-in;transition:transform .2s}
.gal-item:hover{transform:translateY(-3px)}
.gal-item img{width:100%;height:auto}
.gal-item figcaption{padding:10px 14px;font-size:.85rem;color:var(--muted)}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(15,11,6,.92);display:flex;align-items:center;justify-content:center;flex-direction:column;padding:20px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:92vw;max-height:80vh;border-radius:8px}
.lightbox p{color:#e9e1d1;margin-top:12px;text-align:center}
.lightbox button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;width:48px;height:48px;border-radius:50%;font-size:1.8rem;cursor:pointer}
.lightbox button:hover{background:rgba(255,255,255,.25)}
.lb-close{top:16px;right:16px}.lb-prev{left:16px;top:50%}.lb-next{right:16px;top:50%}

/* =========================================================
   THÈME PARCHEMIN  (toutes les couleurs se changent ici)
   ========================================================= */
:root{
  --bg:#ecdcb8; --bg2:#e2cea4; --card:#f7ecd2; --line:#cdb284;
  --text:#3b2a17; --muted:#6e5638; --accent:#9c6a16; --accent-soft:#ead4a2;
  --title:#7a2418; --ink:#2b1d0e; --leather:#3a2614;
  --horde:#9e2a1f; --alliance:#24508f; --green:#3c7a3a; --sky:#6a52b3;
  --shadow:0 2px 10px rgba(70,45,15,.12);
  --paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body{background:var(--paper),radial-gradient(ellipse at 50% 0%,#f5e8c8 0%,var(--bg) 55%,#dcc595 100%);background-attachment:fixed;color:var(--text)}
h1,h2,h3,.page-title,.sec-title h2,aside h4{font-family:Cinzel,serif;color:var(--title);letter-spacing:.3px}
.card h3,.cls h3{font-family:Cinzel,serif}
.card,.article,aside .box,.gal-item,.hero,.table-wrap table,.cls,.tree{background:var(--paper),var(--card)}
.card,.article,aside .box,.gal-item,.hero,.table-wrap,.cls{border-color:var(--line)}
.article p,.article li{color:var(--text)}
th{background:var(--bg2);color:var(--muted)}
tbody tr:hover{background:#efdfba}
.badge.grey{background:var(--bg2);color:var(--muted)}
.info{background:var(--accent-soft);color:var(--ink)}
.tags a{background:var(--card)}

/* ----- Bandeau ----- */
.topbar{background:var(--ink)}
.banner{position:relative;height:190px;overflow:hidden;background:#5a4a2a}
.banner > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,18,6,.65) 0%,rgba(30,18,6,.25) 45%,transparent 70%),linear-gradient(transparent 60%,rgba(236,220,184,.9))}
.banner-in{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center}
.logo.big{font-size:clamp(2.2rem,6vw,3.6rem);color:#fff6de;text-shadow:0 3px 14px rgba(0,0,0,.6)}
.logo.big span{color:#f2c25a}
.tagline{color:#f6e9c9;font-weight:500;text-shadow:0 2px 8px rgba(0,0,0,.7);margin-top:2px}

/* ----- Barre de menu (cuir) ----- */
header.navbar{background:linear-gradient(#4a3119,var(--leather));border-top:2px solid #b8893a;border-bottom:2px solid #b8893a;box-shadow:0 3px 10px rgba(40,25,8,.3)}
header.navbar .wrap{height:54px}
.mini-logo{display:none;color:#fff6de;font-size:1.25rem}
.menu a{color:#e9d6ab;font-family:Cinzel,serif;font-weight:700;font-size:.9rem;letter-spacing:.3px}
.menu a:hover{color:#fff;background:rgba(255,255,255,.08)}
.menu a.active{color:#2b1d0e;background:linear-gradient(#f2c25a,#c9922e)}
.burger{background:rgba(255,255,255,.08);border-color:#b8893a;color:#f2c25a}
footer{background:var(--paper),var(--ink)}

@media (max-width:860px){
  .banner{height:130px}
  .mini-logo{display:block}
  .menu{top:54px;background:var(--leather);border-bottom:2px solid #b8893a}
}

/* ----- Fiches de classes ----- */
.legend{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px;font-size:.82rem}
.new-note{color:var(--muted)}
.jumps{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.jump{padding:6px 14px;border-radius:99px;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--c);font-family:Cinzel,serif;font-weight:700;font-size:.85rem}
.jump:hover{background:var(--accent-soft)}
.fiches{display:grid;gap:22px;margin-bottom:24px}
.fiche{background:var(--paper),var(--card);border:1px solid var(--line);border-left:6px solid var(--c);border-radius:12px;padding:24px;box-shadow:var(--shadow);scroll-margin-top:70px}
.fiche header{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:8px}
.fiche h2{font-size:1.5rem;color:var(--c);text-shadow:0 1px 0 rgba(0,0,0,.25)}
.fiche h3{font-size:.95rem;color:var(--title);margin:16px 0 8px}
.fiche p{color:var(--text)}
.roles{display:flex;gap:6px}
.role{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 9px;border-radius:5px;background:var(--bg2);color:var(--muted)}
.races{display:flex;flex-wrap:wrap;gap:6px}
.race{display:inline-flex;gap:6px;align-items:center;padding:4px 10px;border-radius:6px;font-size:.82rem;font-weight:600;color:#fff}
.race.a{background:var(--alliance)}.race.h{background:var(--horde)}.race.s{background:var(--sky)}
.race em{font-style:normal;font-weight:500;opacity:.85;font-size:.74rem}
table.specs{min-width:600px}
table.specs td:last-child{color:var(--muted);font-size:.86rem}
.tier{display:inline-block;width:28px;text-align:center;font-weight:800;border-radius:6px;padding:2px 0;color:#fff;font-family:Cinzel,serif}
.tier.tS{background:#b8322a}.tier.tA{background:#d07a1f}.tier.tB{background:#b89a2a}.tier.tC{background:#6f8a3a}.tier.tD{background:#7d7466}
@media (max-width:560px){ .tagline{display:none} .banner{height:110px} }
html{background:var(--bg)}
body{background-color:var(--bg);background-attachment:scroll}
.fiche header{position:static;background:none;border:0;box-shadow:none;backdrop-filter:none}
.fiche h2{color:color-mix(in srgb,var(--c) 68%,#1e1208);text-shadow:none}
.jump{border-left-color:var(--c)}

/* Liens vers les guides de donjons */
.gl{display:flex;flex-wrap:wrap;gap:6px}
.glink{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;background:var(--card);border:1px solid var(--line);font-size:.8rem;font-weight:600;color:var(--title);white-space:nowrap}
.glink:hover{background:var(--accent-soft);border-color:var(--accent)}
.glink small{font-size:.65rem;font-weight:700;padding:0 4px;border-radius:3px;background:var(--bg2);color:var(--muted)}
.glink.fr small{background:var(--alliance);color:#fff}
.soon{font-size:.8rem;color:var(--muted);font-style:italic}
table{min-width:820px}

/* ----- Page Addons ----- */
.addons{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.addon{background:var(--paper),var(--card);border:1px solid var(--line);border-top:5px solid var(--c);border-radius:12px;padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.addon-head{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.mono{width:54px;height:54px;flex:none;border-radius:12px;background:var(--c);color:#fff;display:flex;align-items:center;justify-content:center;font-family:Cinzel,serif;font-weight:800;font-size:1.6rem;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.addon h2{font-size:1.3rem;margin-bottom:4px}
.addon .badge{background:var(--c)}
.addon ul{padding-left:20px;margin:10px 0}
.addon li{margin-bottom:5px;font-size:.92rem}
.addon .links{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:14px}
.btn-link{padding:7px 14px;border-radius:8px;background:var(--leather);color:#f2dca8;font-weight:600;font-size:.85rem;border:1px solid #b8893a}
.btn-link:hover{background:#5a3c1e;color:#fff}
.btn-link:first-child{background:linear-gradient(#f2c25a,#c9922e);color:var(--ink)}
code{background:var(--bg2);padding:1px 6px;border-radius:4px;font-size:.88em}
@media (max-width:800px){ .addons{grid-template-columns:1fr} }

/* ----- News vidéo ----- */
.vnews{background:var(--paper),var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:24px}
.video{position:relative;aspect-ratio:16/9;background:#000}
.article .video{border-radius:10px;overflow:hidden;margin:12px 0 14px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vnews .hero-body{padding:20px 24px 24px}
.vnews h1{font-size:clamp(1.3rem,3vw,1.9rem);margin:10px 0 8px}
.vnews p{color:var(--text);margin-bottom:8px}
.vnews .small a{color:var(--title);font-weight:600}
.date{font-size:.8rem;color:var(--muted);font-weight:600;margin-left:6px}

/* ===== Calculateur de talents ===== */
.cbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.cbtn{font:inherit;font-family:Cinzel,serif;font-weight:700;font-size:.9rem;padding:8px 14px;border-radius:8px;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-bottom:4px solid var(--c);color:var(--text)}
.cbtn:hover{background:var(--accent-soft)}
.cbtn.on{background:var(--leather);color:#fff6de;border-color:var(--c)}
.tbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:var(--paper),var(--card);border:1px solid var(--line);border-left:6px solid var(--cc);border-radius:12px;padding:12px 16px;box-shadow:var(--shadow)}
.tstat{display:flex;flex-direction:column;min-width:96px}
.tstat b{font-family:Cinzel,serif;font-size:1.35rem;color:var(--title)}
.tstat span{font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.tactions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.tactions .btn-link{cursor:pointer;font:inherit;font-size:.85rem;font-weight:600}
.help{margin:10px 0 18px}
.trees{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tree{background:linear-gradient(180deg,rgba(43,29,14,.92),rgba(58,38,20,.95));border:2px solid #b8893a;border-radius:12px;padding:12px 12px 16px;box-shadow:var(--shadow)}
.tree header{display:flex;align-items:center;gap:8px;margin-bottom:10px;position:static;background:none;border:0;box-shadow:none}
.tree h2{font-size:1.05rem;color:#f2dca8;flex:1}
.tree .tp{font-family:Cinzel,serif;font-weight:800;color:var(--gold,#f2c25a);font-size:1.1rem}
.treset{background:none;border:1px solid #8a6a3a;color:#e9d6ab;border-radius:6px;width:28px;height:28px;cursor:pointer}
.treset:hover{background:rgba(255,255,255,.1)}
.grid{position:relative;display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:repeat(var(--rows),auto);gap:10px;justify-items:center}
.arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.arrows line{stroke:#6b5232;stroke-width:4px;vector-effect:non-scaling-stroke}
.arrows line.on{stroke:#f2c25a}
.tal{position:relative;z-index:1;width:100%;max-width:58px;aspect-ratio:1;border-radius:10px;cursor:pointer;font:inherit;padding:0;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--cc) 75%,#fff),color-mix(in srgb,var(--cc) 55%,#1a1008));
  border:2px solid #7d6440;color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.3);transition:transform .1s,filter .2s}
.tal.active{border-radius:50%}
.tal .ini{font-family:Cinzel,serif;font-weight:800;font-size:.95rem;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.tal .rk{position:absolute;right:-6px;bottom:-6px;font-size:.66rem;font-weight:700;padding:1px 4px;border-radius:5px;background:#1a1008;color:#cbb88f;border:1px solid #7d6440}
.tal .dot{position:absolute;top:-4px;left:-4px;width:10px;height:10px;border-radius:50%;background:#3fbf5f;border:2px solid #1a1008}
.tal.lock{filter:grayscale(1) brightness(.5)}
.tal.open{border-color:#3fbf5f}
.tal.open .rk{color:#7fe08f;border-color:#3fbf5f}
.tal.part{border-color:#3fbf5f;box-shadow:0 0 0 2px rgba(63,191,95,.35),inset 0 -3px 0 rgba(0,0,0,.3)}
.tal.part .rk{color:#7fe08f;border-color:#3fbf5f}
.tal.max{border-color:#f2c25a;box-shadow:0 0 10px rgba(242,194,90,.7),inset 0 -3px 0 rgba(0,0,0,.3)}
.tal.max .rk{color:#f2c25a;border-color:#f2c25a}
.tal:hover{transform:scale(1.07)}
.tal.nope{animation:nope .3s}
@keyframes nope{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.tip{position:fixed;z-index:200;width:330px;max-width:calc(100vw - 16px);background:#1d1309;color:#e9dcc0;border:2px solid #b8893a;border-radius:10px;padding:14px 16px;box-shadow:0 12px 30px rgba(0,0,0,.5);font-size:.88rem;pointer-events:none}
.tip h3{color:#f2c25a;font-size:1.05rem;margin-bottom:2px}
.tip .trank{font-size:.78rem;color:#bfae8a;margin-bottom:6px}
.tip .treq{color:#ff8a7a;font-size:.8rem;margin-bottom:6px}
.tip p{margin:4px 0;color:#f3e7cc}
.tip p.dim{color:#bfae8a}
.tip .tnext{font-size:.75rem;color:#bfae8a;margin-top:8px}
.tip .st{font-weight:700}.tip .st.new{color:#7fe08f}.tip .st.chg{color:#f2c25a}.tip .st.mov{color:#8ab4ff}
.tip details{margin-top:8px;font-size:.8rem}.tip summary{cursor:pointer;color:#bfae8a}
.tip .tbtns{display:flex;gap:8px;margin-top:12px}
.tip .tbtns button{flex:1;font:inherit;font-weight:700;padding:10px;border-radius:8px;border:1px solid #b8893a;background:#3a2614;color:#f2dca8;cursor:pointer}
.tip .tbtns button:disabled{opacity:.35}
.tip .tclose{display:none}
body.hover .tip .tbtns{display:none}
body:not(.hover) .tip{left:8px!important;right:8px;bottom:8px;top:auto!important;width:auto;pointer-events:auto}
body:not(.hover) .tip .tclose{display:block;position:absolute;top:6px;right:10px;background:none;border:0;color:#f2dca8;font-size:1.6rem;cursor:pointer}
@media (max-width:980px){ .trees{grid-template-columns:1fr} .grid{max-width:340px;margin:0 auto} }
/* icônes du calculateur */
.tal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:8px}
.tal.active img{border-radius:50%}
.tal img + .ini{display:none}
.tal{background:#1a1008}
.cbtn{display:inline-flex;align-items:center;gap:8px}
.cbtn img{width:26px;height:26px;border-radius:5px;border:1px solid rgba(0,0,0,.4)}
.ticon{width:30px;height:30px;border-radius:6px;border:1px solid #b8893a}
.tip .thead{display:flex;gap:10px;align-items:center;margin-bottom:2px}
.tip .thead img{width:38px;height:38px;border-radius:6px;border:1px solid #b8893a}
.tal.lock img{filter:grayscale(1) brightness(.55)}
.tal.lock{filter:none}
.article li a{color:var(--title)}
@media (max-width:560px){ a.card[style*="flex-direction:row"]{flex-direction:column!important} a.card[style*="flex-direction:row"] .thumb{width:100%!important} }

/* ----- Page PvP ----- */
.bgs{display:grid;gap:22px}
.bg{display:grid;grid-template-columns:340px 1fr;background:var(--paper),var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);scroll-margin-top:70px}
.bg-img{position:relative}
.bg-img img{width:100%;height:100%;object-fit:cover;min-height:220px}
.bg-img .badge{position:absolute;left:12px;top:12px}
.bg-body{padding:22px 24px}
.bg h3{font-size:1.4rem;margin-bottom:10px}
.bg h3 small{font-family:Inter,sans-serif;font-size:.8rem;color:var(--muted);font-weight:500}
.bg h4{font-family:Cinzel,serif;color:var(--title);font-size:.95rem;margin:14px 0 6px}
.bg ul{padding-left:20px}.bg li{margin-bottom:5px;font-size:.93rem}
.bg-facts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.bg-facts div{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:6px 12px}
.bg-facts span{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.bg-facts b{font-size:.92rem}
.bg-fac{margin-bottom:8px;font-size:.9rem}
.bg-fac .race{font-size:.78rem}
td a{color:var(--title)}
@media (max-width:860px){ .bg{grid-template-columns:1fr} .bg-img img{min-height:0;aspect-ratio:16/8} }

/* ===== Page Héritage ===== */
.hhero{position:relative;border-radius:16px;overflow:hidden;margin-bottom:20px;box-shadow:var(--shadow)}
.hhero img{width:100%;aspect-ratio:21/8;object-fit:cover}
.hhero-txt{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,auto);grid-auto-flow:column;grid-template-rows:auto auto;justify-content:space-around;padding:18px 10px 14px;background:linear-gradient(transparent,rgba(20,12,4,.85));color:#fff;text-align:center}
.hhero-txt b{font-family:Cinzel,serif;font-size:2.2rem;color:#f2c25a;line-height:1}
.hhero-txt span{font-size:.8rem;color:#f3e7cc}
.hcats{display:grid;gap:12px}
.hcat{background:var(--paper),var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.hcat summary{display:flex;align-items:center;gap:14px;padding:12px 16px 12px 12px;cursor:pointer;list-style:none}
.hcat summary::-webkit-details-marker{display:none}
.hcat summary img{width:92px;height:56px;object-fit:cover;border-radius:8px;flex:none}
.hcat summary div{flex:1}
.hcat summary h3{font-size:1.1rem}
.hcat summary p{font-size:.85rem;color:var(--muted)}
.hpts{font-family:Cinzel,serif;font-size:1.1rem;color:var(--title);white-space:nowrap;background:var(--bg2);padding:4px 10px;border-radius:8px}
.hpts.full{background:#3c7a3a;color:#fff}
.hbody{padding:4px 16px 16px;border-top:1px solid var(--line)}
.hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-top:12px}
.hcls{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:6px 10px}
.hcls img{width:28px;height:28px;border-radius:5px}
.hcls span{flex:1;font-weight:600;font-size:.88rem}
.hchk{display:flex;gap:6px}
.hchk label{font-size:.75rem;display:flex;align-items:center;gap:2px;cursor:pointer;color:var(--muted)}
.hline{display:flex;gap:8px;align-items:center;padding:7px 0;border-bottom:1px dashed var(--line);font-size:.92rem;cursor:pointer}
.hline:first-child{margin-top:8px}
input[type=checkbox]{accent-color:#9c6a16;width:16px;height:16px}
.htrees{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.htree{background:var(--paper),var(--card);border:1px solid var(--line);border-top:5px solid var(--c);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.htree-img{position:relative}
.htree-img img{width:100%;aspect-ratio:16/8;object-fit:cover}
.htree-img h3{position:absolute;left:0;right:0;bottom:0;padding:18px 14px 8px;color:#fff6de;background:linear-gradient(transparent,rgba(20,12,4,.85));font-size:1.3rem}
.htree ul{list-style:none;padding:10px 14px 14px}
.htree li{padding:8px 0;border-bottom:1px solid var(--line);font-size:.86rem}
.htree li:last-child{border:0}
.htree li b{display:block;color:var(--title);font-family:Cinzel,serif;font-size:.92rem}
.htree li span{color:var(--text)}
.hbar{position:relative;height:14px;background:var(--bg2);border:1px solid var(--line);border-radius:99px;margin:8px 0 34px}
.hbar-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#c9922e,#f2c25a);transition:width .4s}
.hmark{position:absolute;top:18px;transform:translateX(-50%);font-size:.75rem;font-weight:700;color:var(--muted)}
.hmark::before{content:"";position:absolute;left:50%;top:-20px;width:2px;height:16px;background:var(--title)}
.hrews{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:8px}
.hrew{background:var(--paper),var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);padding-bottom:12px;filter:grayscale(.6);opacity:.85;transition:.3s}
.hrew.ok{filter:none;opacity:1;border-color:#c9922e;box-shadow:0 0 0 2px rgba(242,194,90,.5),var(--shadow)}
.hrew-img{position:relative}
.hrew-img img{width:100%;aspect-ratio:16/10;object-fit:cover}
.hneed{position:absolute;left:8px;top:8px;background:var(--leather);color:#f2c25a;font-weight:700;font-size:.75rem;padding:3px 8px;border-radius:6px;border:1px solid #b8893a}
.hrew h4{font-family:Cinzel,serif;color:var(--title);font-size:.95rem;padding:10px 12px 4px}
.hrew p{font-size:.82rem;padding:0 12px;color:var(--text)}
.hstate{display:inline-block;margin:8px 12px 0;font-size:.75rem;font-weight:700;color:var(--muted)}
.hrew.ok .hstate{color:#3c7a3a}
.hcounter{position:sticky;top:70px}
.hbig{display:flex;align-items:baseline;gap:6px}
.hbig b{font-family:Cinzel,serif;font-size:2.6rem;color:var(--title)}
.hbig span{color:var(--muted);font-weight:600}
@media (max-width:1000px){ .htrees{grid-template-columns:1fr} .hrews{grid-template-columns:repeat(2,1fr)} .hcounter{position:static} }
@media (max-width:560px){ .hhero-txt b{font-size:1.4rem} .hhero-txt span{font-size:.65rem} .hhero img{aspect-ratio:16/10} .hcat summary img{width:60px;height:44px} }

/* ===== Fil de news ===== */
.nfilters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.nfilters button{font:inherit;font-size:.85rem;font-weight:600;padding:7px 14px;border-radius:8px;cursor:pointer;background:var(--card);border:1px solid var(--line);color:var(--muted)}
.nfilters button.on{background:var(--leather);color:#f6e7c4;border-color:#b8893a}
.feed{display:grid;gap:14px}
.nitem{display:grid;grid-template-columns:220px 1fr;background:var(--paper),var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.nitem:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(60,40,10,.14)}
.nthumb{overflow:hidden}
.nthumb img{width:100%;height:100%;min-height:130px;object-fit:cover;transition:transform .35s}
.nitem:hover .nthumb img{transform:scale(1.05)}
.nbody{padding:14px 18px}
.nmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px}
.nnew{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#b8322a}
.nbody h3{font-family:Cinzel,serif;color:var(--title);font-size:1.08rem;margin-bottom:4px}
.nbody p{font-size:.9rem;color:var(--text)}
.nmore{font:inherit;font-weight:700;padding:12px;border-radius:10px;cursor:pointer;background:var(--card);border:1px dashed var(--accent);color:var(--title)}
.nmore:hover{background:var(--accent-soft)}
#featured .hero{margin-bottom:8px}
#featured .hero h1{color:var(--title)}
@media (max-width:620px){ .nitem{grid-template-columns:1fr} .nthumb img{aspect-ratio:16/8;min-height:0} }
.tiles{grid-template-columns:repeat(7,1fr)}
@media (max-width:1000px){ .tiles{grid-template-columns:repeat(4,1fr)} }
@media (max-width:520px){ .tiles{grid-template-columns:repeat(2,1fr)} }

/* ===== Page Métiers ===== */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;margin-bottom:10px}
.mcard{background:var(--paper),var(--card);border:1px solid var(--line);border-top:5px solid var(--c);border-radius:12px;padding:18px 20px;box-shadow:var(--shadow);display:flex;flex-direction:column;scroll-margin-top:70px}
.mhead{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.mhead .mono{width:46px;height:46px;font-size:1.15rem;background:var(--c)}
.mhead h3{font-size:1.25rem}
.mcard>p{font-size:.92rem;margin-bottom:8px}
.mfacts{list-style:none;font-size:.86rem;border-top:1px dashed var(--line);padding-top:8px;margin-bottom:10px}
.mfacts li{padding:3px 0}
.mfacts b{color:var(--title)}
.mlinks{margin-top:auto}
.mlinks>span{display:block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:6px}
.micon{width:46px;height:46px;border-radius:9px;border:2px solid #b8893a;box-shadow:0 2px 6px rgba(0,0,0,.35);image-rendering:auto;flex:none}

/* ----- Sous-menus ----- */
.sub{position:relative;display:flex}
.subbtn{font-family:Cinzel,serif;font-weight:700;font-size:.9rem;letter-spacing:.3px;color:#e9d6ab;background:none;border:0;padding:8px 12px;border-radius:8px;cursor:pointer;white-space:nowrap}
.subbtn:hover,.sub.open .subbtn{color:#fff;background:rgba(255,255,255,.08)}
.sub.active .subbtn{color:#2b1d0e;background:linear-gradient(#f2c25a,#c9922e)}
.subm{display:none;position:absolute;top:100%;left:0;margin-top:6px;min-width:170px;flex-direction:column;padding:6px;border-radius:10px;background:var(--leather);border:2px solid #b8893a;box-shadow:0 10px 24px rgba(0,0,0,.4);z-index:60}
.subm a{display:block}
.sub.open .subm{display:flex}
@media (hover:hover) and (min-width:861px){ .sub:hover .subm{display:flex} .subm::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px} }
@media (max-width:860px){
  .sub{flex-direction:column}
  .subbtn{text-align:left}
  .subm{position:static;display:flex;margin:0 0 4px 14px;border:0;box-shadow:none;background:none;padding:0 0 0 8px;border-left:2px solid #b8893a;border-radius:0}
}

/* ===== Page Races ===== */
:root{--sky:#6a52b3}
.rtable table{min-width:860px}
.rtable th{text-align:center}
.rtable thead th img{display:block;width:28px;height:28px;margin:0 auto 4px;border-radius:5px}
.rtable thead th span{font-size:.65rem}
.rtable th.rname{text-align:left;white-space:nowrap;font-size:.9rem;color:var(--text);text-transform:none;letter-spacing:0;background:var(--card)}
.rtable th.rname a{color:var(--title);font-family:Cinzel,serif}
.rtable th.rname .race{font-size:.62rem;padding:2px 6px;margin-left:4px}
.rtable td{text-align:center;font-weight:800}
.rtable td.ok{color:#3c7a3a;background:rgba(60,122,58,.08)}
.rtable td.no{color:#c9b89a}
.rcards{display:grid;gap:20px;margin-bottom:10px}
.rcard{display:grid;grid-template-columns:300px 1fr;background:var(--paper),var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);scroll-margin-top:70px}
.rimg{position:relative}
.rimg img{width:100%;height:100%;object-fit:cover;min-height:240px}
.rimg .race{position:absolute;left:12px;top:12px}
.rbody{padding:20px 24px}
.rbody h3{font-size:1.45rem}
.racc{color:var(--muted);margin:2px 0 10px}
.rbody h4{font-family:Cinzel,serif;color:var(--title);font-size:.95rem;margin:12px 0 6px;display:flex;align-items:center;gap:8px}
.rbody h4 img{width:22px;height:22px;border-radius:4px}
.cchips{display:flex;flex-wrap:wrap;gap:6px}
.cchip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:99px;background:var(--bg2);border:1px solid var(--line);font-size:.82rem;font-weight:600}
.cchip img{width:22px;height:22px;border-radius:50%}
.cchip:hover{border-color:var(--accent)}
.rlist{list-style:none}
.rlist li{padding:6px 0;border-bottom:1px dashed var(--line);font-size:.9rem}
.rlist li:last-child{border:0}
.rlist li span{display:block;color:var(--text)}
.rtag{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:1px 6px;border-radius:4px;vertical-align:middle}
.rtag.new{background:#3c7a3a;color:#fff}.rtag.chg{background:#b8892a;color:#fff}
.rprst{margin-top:10px;padding:8px 14px;border-radius:10px;background:rgba(232,232,232,.35);border:1px solid var(--line)}
@media (max-width:860px){ .rcard{grid-template-columns:1fr} .rimg img{min-height:0;aspect-ratio:16/8} }
.rlist li span i,.rprst li span i{font-style:normal;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--accent)}
.rlist li span.rtag,.rprst li span.rtag{display:inline-block;color:#fff}

/* ----- Sorts de classe (page Classes) ----- */
.factions{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
details.spells{margin-top:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);overflow:hidden}
details.spells>summary{cursor:pointer;padding:10px 14px;font-family:Cinzel,serif;font-weight:700;color:var(--title);list-style:none;display:flex;align-items:center;gap:8px}
details.spells>summary::before{content:"▸";transition:transform .2s}
details.spells[open]>summary::before{transform:rotate(90deg)}
details.spells>summary::-webkit-details-marker{display:none}
.spl{padding:0 14px 14px}
.spl-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px;font-size:.85rem}
.spl-tools input[type=search]{flex:1;min-width:180px;padding:7px 10px;border-radius:8px;border:1px solid var(--line);background:var(--card);font:inherit}
.spl-count{color:var(--muted);margin-left:auto}
.spl-lvl{display:grid;grid-template-columns:70px 1fr;gap:8px;padding:6px 0;border-top:1px dashed var(--line)}
.spl-lvl>b{font-family:Cinzel,serif;color:var(--accent);font-size:.85rem;padding-top:3px}
.spl-lvl>div{display:flex;flex-wrap:wrap;gap:6px}
.spl-item{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;background:var(--card);border:1px solid var(--line);font-size:.84rem;font-weight:600;color:var(--text)}
.spl-item:hover{border-color:var(--accent)}
.spl-item small{font-size:.68rem;color:var(--muted);font-weight:600}
.spl-item .rtag{display:inline-block;color:#fff}
.spl-item[hidden],.spl-lvl[hidden]{display:none}

/* =========================================================
   THÈME « GRIS » (activé par html[data-theme="gris"])
   ========================================================= */
html[data-theme="gris"]{
  --bg:#e8e9eb; --bg2:#dcdee2; --card:#f8f8f9; --line:#c8cbd0;
  --text:#1c1e21; --muted:#5b6068; --accent:#2f3237; --accent-soft:#e2e4e8;
  --title:#111214; --ink:#111214; --leather:#25272b; --sky:#5e5a7a;
  --paper:linear-gradient(transparent,transparent);
  --shadow:0 1px 3px rgba(0,0,0,.08),0 4px 14px rgba(0,0,0,.06);
}
html[data-theme="gris"] body{background:#e8e9eb}
html[data-theme="gris"] .topbar{background:#111214}
html[data-theme="gris"] .topbar .live{color:#fff}
html[data-theme="gris"] .banner > img{filter:grayscale(.35)}
html[data-theme="gris"] .banner::after{background:linear-gradient(90deg,rgba(10,10,12,.7) 0%,rgba(10,10,12,.25) 45%,transparent 70%),linear-gradient(transparent 60%,rgba(232,233,235,.95))}
html[data-theme="gris"] .logo span,html[data-theme="gris"] .logo.big span{color:#d9dbe0}
html[data-theme="gris"] header.navbar{background:#1f2124;border-color:#3a3d42}
html[data-theme="gris"] .menu a,html[data-theme="gris"] .subbtn{color:#c9ccd1}
html[data-theme="gris"] .menu a:hover,html[data-theme="gris"] .subbtn:hover,html[data-theme="gris"] .sub.open .subbtn{color:#fff;background:rgba(255,255,255,.08)}
html[data-theme="gris"] .menu a.active,html[data-theme="gris"] .sub.active .subbtn{color:#111214;background:#f2f3f5}
html[data-theme="gris"] .subm{background:#1f2124;border-color:#3a3d42}
html[data-theme="gris"] .burger{color:#fff;border-color:#3a3d42}
html[data-theme="gris"] .menu{border-color:#3a3d42}
html[data-theme="gris"] h1,html[data-theme="gris"] h2,html[data-theme="gris"] h3,html[data-theme="gris"] h4{color:var(--title)}
html[data-theme="gris"] .sec-title h2::before{background:#111214}
html[data-theme="gris"] .badge{background:#2f3237;color:#fff}
html[data-theme="gris"] .badge.red{background:#a8322a}
html[data-theme="gris"] .badge.blue{background:#2b5a9e}
html[data-theme="gris"] .badge.green{background:#2f6e3a}
html[data-theme="gris"] .badge.grey{background:#dcdee2;color:#3c4046}
html[data-theme="gris"] .info{background:#eceef1;border-color:#2f3237;color:#1c1e21}
html[data-theme="gris"] .btn-link{background:#25272b;color:#f2f3f5;border-color:#25272b}
html[data-theme="gris"] .btn-link:first-child{background:#f8f8f9;color:#111214;border-color:#2f3237}
html[data-theme="gris"] .btn-link:hover{background:#3a3d42;color:#fff}
html[data-theme="gris"] .cdown div{background:#eceef1}
html[data-theme="gris"] .cdown b,html[data-theme="gris"] .lvl,html[data-theme="gris"] .tp,html[data-theme="gris"] .hbig b{color:#111214}
html[data-theme="gris"] footer{background:#111214}
html[data-theme="gris"] footer a:hover{color:#fff}
html[data-theme="gris"] .glink,html[data-theme="gris"] .crumbs a,html[data-theme="gris"] .sec-title a,html[data-theme="gris"] td a,html[data-theme="gris"] .article li a,html[data-theme="gris"] .vnews .small a{color:#111214}
html[data-theme="gris"] .glink small{background:#dcdee2;color:#3c4046}
html[data-theme="gris"] .glink.fr small{background:#2b5a9e;color:#fff}
html[data-theme="gris"] .filters button.on,html[data-theme="gris"] .nfilters button.on,html[data-theme="gris"] .cbtn.on{background:#25272b;color:#fff;border-color:#25272b}
html[data-theme="gris"] .tree{background:#2a2c30;border-color:#45484e}
html[data-theme="gris"] .tree h2{color:#f2f3f5}
html[data-theme="gris"] .tree .tp{color:#fff}
html[data-theme="gris"] .tip{background:#151618;border-color:#5b6068;color:#e6e7ea}
html[data-theme="gris"] .tip h3{color:#fff}
html[data-theme="gris"] .tip p{color:#f2f3f5}
html[data-theme="gris"] .hpts{background:#dcdee2;color:#111214}
html[data-theme="gris"] .hbar-fill{background:linear-gradient(90deg,#5b6068,#111214)}
html[data-theme="gris"] .hrew.ok{border-color:#111214;box-shadow:0 0 0 2px rgba(17,18,20,.35),var(--shadow)}
html[data-theme="gris"] .mono{box-shadow:none}
html[data-theme="gris"] .micon,html[data-theme="gris"] .ticon{border-color:#5b6068}
html[data-theme="gris"] .rtag.chg{background:#5b6068}
html[data-theme="gris"] .spl-lvl>b{color:#111214}
html[data-theme="gris"] .nnew{color:#a8322a}
html[data-theme="gris"] .tile span,html[data-theme="gris"] .hero::after{filter:none}
html[data-theme="gris"] input[type=checkbox]{accent-color:#111214}

/* Bouton de changement de thème */
.themebtn{background:none;border:1px solid rgba(255,255,255,.35);color:inherit;font:inherit;font-size:.75rem;padding:2px 10px;border-radius:99px;cursor:pointer;margin-left:10px}
.themebtn:hover{background:rgba(255,255,255,.12)}

/* ----- Infobulles Wowhead : on les protège des styles de tableaux du site ----- */
.wowhead-tooltip{background:#0b0f1e!important;border:1px solid #6b7080!important;border-radius:6px!important;box-shadow:0 8px 24px rgba(0,0,0,.45)!important;overflow:hidden}
.wowhead-tooltip table,.wowhead-tooltip tbody,.wowhead-tooltip tr,.wowhead-tooltip th,.wowhead-tooltip td{background:transparent!important;border:0!important;min-width:0!important;box-shadow:none!important}
.wowhead-tooltip th,.wowhead-tooltip td{padding:3px 8px!important;font-size:12px!important;line-height:1.45!important;text-transform:none!important;letter-spacing:0!important;font-weight:normal!important;text-align:left!important;color:#fff;vertical-align:top}
.wowhead-tooltip tbody tr:hover{background:transparent!important}
.wowhead-tooltip b{font-size:14px;font-weight:700}

/* ----- Guides de spécialisation ----- */
.sgc{margin:34px 0;scroll-margin-top:80px}
.sgc-head{display:flex;align-items:center;gap:12px;border-bottom:3px solid var(--c);padding-bottom:8px;margin-bottom:16px}
.sgc-head img{width:40px;height:40px;border-radius:8px}
.sgc-head h2{margin:0;flex:1}
.sgc-head a{font-size:.85rem;font-weight:600}
.sgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.sg{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--c);border-radius:10px;padding:16px 18px;scroll-margin-top:80px;display:flex;flex-direction:column}
.sg-h{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.sg h3{margin:0;font-size:1.2rem}
.sg h4{margin:14px 0 6px;font-size:.78rem;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.sg p{margin:8px 0}
.sg ul{margin:0;padding-left:18px;font-size:.9rem}
.sg-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sg-build{font-size:.88rem}
.sg-stats{font-weight:600;font-size:.9rem}
.sg .btn-link{align-self:flex-start;margin-top:4px}
.sg .race{margin:2px 0}
@media(max-width:560px){.sg-cols{grid-template-columns:1fr}}

/* ----- Leveling ----- */
.lv-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.lv{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 20px;border-top:5px solid var(--alliance)}
.lv-horde{border-top-color:var(--horde)}
.lv h2{margin:0 0 6px}
.lv h4{margin:14px 0 6px;font-size:.78rem;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.lv ol,.lv ul{margin:0;padding-left:20px}
.lv li{margin:4px 0}
.lv a{font-weight:600}
.lv-start{list-style:none;padding:0!important}
.lv-start .race{min-width:120px;justify-content:center;margin-right:6px}
.lv-h{margin-top:30px}
@media(max-width:760px){.lv-grid{grid-template-columns:1fr}}
.lv ol a::after,.lv-start a::after{content:" ↗";opacity:.45;font-size:.8em}

/* ----- Réputations ----- */
.tscroll{overflow-x:auto}
.rep td{text-align:left;vertical-align:top}
.rep td .small{font-weight:400;color:var(--muted)}
.replist{list-style:none;padding:0;columns:2;column-gap:24px}
.replist li{margin:6px 0;break-inside:avoid}
.replist .race{min-width:74px;justify-content:center;font-size:.72rem;padding:2px 6px;margin-right:6px}
@media(max-width:620px){.replist{columns:1}}
.rep td{font-weight:400}.rep td b{font-weight:700}
.rep .race,.replist .race{white-space:nowrap}

/* ----- Leveling pas à pas ----- */
.pp-lv{font-size:1rem;font-weight:600;color:var(--muted);vertical-align:middle;margin-left:8px}
.page-lead .race{margin-right:8px;vertical-align:1px}
.pp-bar{position:sticky;top:70px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:16px 0}
.pp-bar select{font:inherit;padding:4px 8px;border-radius:6px;border:1px solid var(--line);background:var(--bg2);color:inherit}
.pp-prog{flex:1;min-width:120px;height:10px;border-radius:99px;background:var(--bg2);overflow:hidden}
.pp-fill{height:100%;width:0;background:#3c9a4a;transition:width .3s}
.pp-count{font-weight:700;font-size:.88rem;white-space:nowrap}
.pp-bar button{font:inherit;font-size:.82rem;padding:5px 10px;border-radius:6px;border:1px solid var(--line);background:transparent;color:inherit;cursor:pointer}
.pp{list-style:none;padding:0;margin:16px 0}
.pp-st{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:10px;padding:12px 16px;margin:10px 0}
.pp-st.done{opacity:.55;border-left-color:#3c9a4a}
.pp-st.done .ppg,.pp-st.done .pp-tip{display:none}
.st-h{display:flex;align-items:center;gap:10px;cursor:pointer;flex-wrap:wrap}
.st-h input{width:20px;height:20px;accent-color:#3c9a4a;cursor:pointer}
.st-n{min-width:26px;height:26px;border-radius:50%;background:var(--bg2);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem}
.st-t{font-family:Cinzel,Georgia,serif;font-weight:700;font-size:1.05rem}
.st-z{font-size:.75rem;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:1px 8px}
.pp-tip{margin:8px 0 6px;font-size:.92rem;color:var(--muted)}
.ppg{list-style:none;padding:0;margin:6px 0 0}
.ppg li{padding:3px 0;font-size:.93rem}
.ppg .k{display:inline-block;min-width:78px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.ppg .k.acc{color:#c08a12}.ppg .k.tin{color:#3c9a4a}.ppg .k.kil{color:#c0392b}.ppg .k.col{color:#2f7fbf}.ppg .k.cpl{color:#8e5ac8}
.ppg .gc{color:var(--muted);font-size:.86rem}
.ppg a.q{font-weight:600}
.xy{font-family:ui-monospace,Consolas,monospace;font-size:.8rem;background:var(--bg2);border-radius:4px;padding:1px 5px}
.only{display:inline-block;margin-left:6px;font-size:.68rem;font-weight:700;padding:1px 7px;border-radius:99px;background:var(--bg2);border:1px solid var(--line)}
.pp-next{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:20px}
.pp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.pp-card{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;text-decoration:none;color:inherit}
.pp-card:hover{border-color:var(--title)}
.pp-card .race{align-self:flex-start}
.pp-card b{font-family:Cinzel,Georgia,serif;font-size:1.1rem}
@media(max-width:560px){.ppg .k{min-width:0;margin-right:4px}}
.pp-cards{margin-bottom:22px}

/* ----- Logo ForeverWoW ----- */
.fwlogo{display:inline-flex;align-items:center;gap:16px;text-decoration:none}
.fwlogo img{width:clamp(64px,9vw,96px);height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.fw-wm{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.fw-name{font-family:"Cinzel Decorative",Cinzel,serif;font-weight:900;font-size:clamp(2.1rem,6.4vw,4.4rem);letter-spacing:1px;
 background:linear-gradient(#fff4cf 10%,#e6bd62 48%,#a87726 56%,#f4d98f 95%);-webkit-background-clip:text;background-clip:text;color:transparent;
 filter:drop-shadow(0 3px 0 #3a2508) drop-shadow(0 6px 12px rgba(0,0,0,.6))}
.fw-name .fw-w{background:linear-gradient(#e9f8ff 10%,#9fd8ff 50%,#3f93cf 60%,#c8ecff 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.fw-name .fw-tld{font-family:Cinzel,serif;font-size:.46em;font-weight:700;margin-left:4px}
.fw-tag{margin-top:8px;font-family:Cinzel,serif;font-weight:700;font-size:clamp(.62rem,1.4vw,.95rem);letter-spacing:.25em;color:#efdfb3;text-transform:uppercase;padding-left:4px;text-shadow:0 2px 6px rgba(0,0,0,.7)}
.fw-tag:before{content:"";display:inline-block;width:34px;height:1px;background:#c9a24f;vertical-align:.3em;margin-right:12px}
.mini-em{width:26px;height:26px;vertical-align:-6px;margin-right:8px}
footer .logo .mini-em{width:30px;height:30px}
.banner-in .fwlogo{align-self:flex-start}
.mini-logo .mini-em,footer .mini-em{display:inline-block}
.mini-logo{white-space:nowrap}
@media (max-width:560px){.fw-tag{display:none}.fwlogo{gap:10px}}
@media (max-width:560px){.fw-name{font-size:clamp(1.4rem,7.4vw,2.1rem)}.fwlogo img{width:52px}}
.fw-name .fw-tld{font-size:.5em;font-weight:800;margin-left:6px;background:none;-webkit-text-fill-color:#ffe6a0;color:#ffe6a0;letter-spacing:1px}
.fw-name .fw-tld{font-size:.62em;font-weight:900;-webkit-text-stroke:2px #2a1804;paint-order:stroke fill}