/* Paradoxe — pages Guides. S'appuie sur /tokens.css (couleurs des foyers, espacements, rayons). */
:root{
  --head:'Alegreya',Georgia,serif;
  --txt:'Alegreya Sans','Helvetica Neue',Arial,sans-serif;
  --tt-bg:#060b1d; --tt-edge:#8d929c; --tt-title:#ffd100;   /* infobulle du jeu */
  --q0:#9d9d9d; --q1:#f2f2f2; --q2:#1eff00; --q3:#3d9bff; --q4:#b86cf2; --q5:#ff8000;
  --surface:var(--stone); --raise:var(--stone-2);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--parch);font:400 1.0625rem/1.6 var(--txt);font-variant-numeric:lining-nums}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--gold-hi)}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px;border-radius:2px}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.2;margin:0;color:var(--parch);text-wrap:balance}
p{margin:0 0 .9em}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--on-gold);padding:8px 12px;z-index:50}
.skip:focus{left:8px}

/* ---------- barre du haut ---------- */
.top{position:sticky;top:0;z-index:20;background:rgba(var(--night-rgb),.94);border-bottom:1px solid var(--line-soft);backdrop-filter:blur(6px)}
.top .in{max-width:1240px;margin:0 auto;padding:0 16px;height:56px;display:flex;align-items:center;gap:20px}
.mark{font-family:var(--display);font-weight:700;letter-spacing:.14em;color:var(--parch);text-decoration:none;font-size:1.05rem;display:flex;align-items:center;gap:8px;flex:none}
.mark svg{width:14px;height:20px;color:var(--gold)}
.top nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1}
.top nav::-webkit-scrollbar{display:none}
.top nav a{color:var(--mist);text-decoration:none;padding:6px 10px;border-radius:var(--r-sm);white-space:nowrap;font-weight:500}
.top nav a:hover{color:var(--parch);background:var(--surface)}
.top nav a[aria-current]{color:var(--parch);box-shadow:inset 0 -2px 0 var(--gold)}
.top .join{flex:none;background:var(--gold);color:var(--on-gold);text-decoration:none;font-weight:700;padding:7px 14px;border-radius:var(--r-sm)}
.top .join:hover{background:var(--gold-hi);color:var(--on-gold)}
@media (max-width:640px){.top .join{display:none}}

/* ---------- squelette ---------- */
.page{max-width:1240px;margin:0 auto;padding:28px 16px 96px}
.crumbs{font-size:.9375rem;color:var(--mist);margin-bottom:14px}
.crumbs a{color:var(--mist)}
.crumbs span[aria-hidden]{margin:0 6px;opacity:.6}
.intro{margin-bottom:28px;max-width:72ch}
.intro h1{font-size:clamp(2rem,4.6vw,3rem);letter-spacing:-.01em}
.lede{font-size:1.1875rem;color:var(--silver);max-width:60ch;margin:12px 0 0}
.lay{display:grid;gap:24px 40px;grid-template-columns:minmax(0,1fr);grid-template-areas:"side" "toc" "art"}
.side{grid-area:side}.toc{grid-area:toc}.art{grid-area:art}
.side:empty{display:none}
@media (min-width:1000px){.lay{grid-template-columns:190px minmax(0,1fr);grid-template-areas:"toc art" "toc side"}.side{align-self:start}}
@media (min-width:1240px){.lay{grid-template-columns:190px minmax(0,72ch) minmax(240px,1fr);grid-template-areas:"toc art side"}.side{position:sticky;top:80px}}
.page.hub .intro{max-width:none;display:grid;gap:24px}
@media (min-width:1000px){.page.hub .intro{grid-template-columns:minmax(0,1fr) 300px;align-items:start}}
.art{max-width:72ch;min-width:0}

/* sommaire */
.toc{font-size:.9375rem}
.toc details{border:1px solid var(--line-soft);border-radius:var(--r-sm);background:var(--surface)}
.toc summary{cursor:pointer;padding:10px 14px;font-weight:700}
.toc ol{list-style:none;margin:0;padding:4px 0 10px}
.toc a{display:block;padding:5px 14px;color:var(--mist);text-decoration:none;border-left:2px solid transparent}
.toc a:hover{color:var(--parch)}
.toc a.on{color:var(--parch);border-left-color:var(--gold)}
@media (min-width:1000px){
  .toc{position:sticky;top:80px;align-self:start}
  .toc details{border:0;background:none}
  .toc summary{padding:0 0 8px;color:var(--mist);font-weight:500;pointer-events:none;list-style:none}
  .toc summary::-webkit-details-marker{display:none}
  .toc a{padding:5px 12px}
}

/* ---------- l'infobulle du jeu : la signature des guides ---------- */
.tt{background:linear-gradient(180deg,#0a1230,var(--tt-bg));border:1px solid var(--tt-edge);border-radius:4px;box-shadow:inset 0 0 0 1px #000,0 0 0 1px #000;padding:12px 14px;font-size:.9375rem;line-height:1.45;color:#fff}
.tt h2,.tt .tt-t{font-family:var(--txt);font-size:1.0625rem;font-weight:700;color:var(--tt-title);margin:0 0 6px}
.tt dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 14px}
.tt dt{color:#c9c9c9}
.tt dd{margin:0;color:#fff;font-weight:500}
.tt .g{color:var(--q2)}
.tt .note{color:#c9c9c9;margin-top:8px;font-size:.875rem}

/* ---------- contenu ---------- */
.sec{padding-top:8px;margin-top:40px}
.sec:first-child{margin-top:0}
.sec>h2{font-size:1.75rem;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.art h3{font-size:1.3125rem;margin:28px 0 10px}
.art h4{font-size:1.125rem;margin:22px 0 8px}
.art ul,.art ol{padding-left:1.25em;margin:0 0 1em}
.art li{margin:.3em 0}
.art li::marker{color:var(--mist)}
.art pre{background:#04060b;border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:12px 14px;overflow-x:auto;font-size:.875rem;line-height:1.5;color:var(--silver)}
.aside{border-left:3px solid var(--gold);background:var(--surface);padding:12px 16px;margin:0 0 1.2em;border-radius:0 var(--r-sm) var(--r-sm) 0}
.aside>:last-child{margin-bottom:0}

/* liens vers le jeu : icône + couleur de qualité, crochets pour les objets comme dans le chat */
a.e{text-decoration:none;font-weight:500;white-space:normal}
a.e img{display:inline-block;width:18px;height:18px;vertical-align:-3px;margin-right:4px;border:1px solid #000;outline:1px solid rgba(255,255,255,.18);border-radius:3px}
a.e:hover{text-decoration:underline}
a.e.sp{color:#71d5ff}
a.e.qu{color:#ffd100}
a.e.it{color:var(--q1)}
a.e.q0{color:var(--q0)} a.e.q2{color:var(--q2)} a.e.q3{color:var(--q3)} a.e.q4{color:var(--q4)} a.e.q5{color:var(--q5)}

/* tableaux */
.tw{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line-soft);border-radius:var(--r-sm)}
table{border-collapse:collapse;width:100%;font-size:.9375rem}
th,td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top}
thead th{background:var(--surface);color:var(--mist);font-weight:500;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* onglets (Alliance / Horde…) */
.tabs{margin:0 0 1.2em}
.tabs [role=tablist]{display:flex;gap:4px;border-bottom:1px solid var(--line-soft);margin-bottom:14px}
.tabs [role=tab]{background:none;border:0;border-bottom:2px solid transparent;color:var(--mist);font:500 .9375rem var(--txt);padding:8px 12px;cursor:pointer;margin-bottom:-1px}
.tabs [role=tab][aria-selected=true]{color:var(--parch);border-bottom-color:var(--gold)}
.tabs [role=tab].al[aria-selected=true]{border-bottom-color:#4a7fd4}
.tabs [role=tab].ho[aria-selected=true]{border-bottom-color:#c0392b}

/* forces / faiblesses */
.pc{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:0 0 1.2em}
.pc>div{border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:14px 16px;background:var(--surface)}
.pc h3{margin:0 0 6px;font-size:1.0625rem;font-family:var(--txt)}
.pc .plus h3{color:var(--ok)} .pc .moins h3{color:var(--danger-hi)}
.pc ul{margin:0;padding-left:1.1em}

/* images */
figure{margin:0 0 1.2em}
figcaption{font-size:.875rem;color:var(--mist);margin-top:6px}
.gal{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:0 0 1.2em}
.gal a,figure a{display:block;border:1px solid var(--line-soft);border-radius:var(--r-sm);overflow:hidden}
.gal img,figure img{width:100%}

/* monstres à surveiller */
.mobs{display:grid;gap:12px;margin:0 0 1.2em}
@media (min-width:700px){.mobs{grid-template-columns:1fr 1fr}}
.mob{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:start;padding:12px;border:1px solid var(--line-soft);border-radius:var(--r-sm)}
.mob img{width:64px;height:64px;object-fit:cover;border-radius:3px;border:1px solid #000}
.mob h3{font-size:1rem;margin:0 0 4px;font-family:var(--txt)}
.mob ul,.mob p{margin:0;font-size:.9375rem}
.mob ul{padding-left:1.05em}

/* boss : portrait, tactique, butin */
.boss{display:grid;gap:16px 20px;padding:20px 0;border-top:1px solid var(--line-soft)}
.boss:first-of-type{border-top:0;padding-top:4px}
@media (min-width:700px){.boss{grid-template-columns:150px minmax(0,1fr)}}
.boss .pt img{width:150px;aspect-ratio:1;object-fit:cover;border-radius:var(--r-sm);border:1px solid #000;box-shadow:0 0 0 1px var(--line-soft)}
.boss h3{margin:0 0 8px;font-size:1.375rem}
.boss .n{color:var(--mist);font:500 .9375rem var(--txt);margin-right:8px}
.loot{margin-top:12px}
.loot .tt-t{font-size:.9375rem}
.loot ul{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.loot li{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.loot li small{color:#c9c9c9;font-size:.8125rem;text-align:right;flex:none}

/* talents */
.tal{border:1px solid var(--line-soft);border-radius:var(--r-sm);margin:0 0 1.4em;background:var(--surface)}
.tal-h{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line-soft)}
.tal-h .split{font-weight:700;font-variant-numeric:tabular-nums}
.tal-h .split span{color:var(--mist);font-weight:400}
.tal-h a.go{background:var(--gold);color:var(--on-gold);text-decoration:none;font-weight:700;padding:6px 12px;border-radius:var(--r-sm);font-size:.9375rem}
.tal-h a.go:hover{background:var(--gold-hi)}
.tal-h .warn{font-size:.875rem;color:var(--mist)}
.tal details{padding:4px 14px 12px}
.tal summary{cursor:pointer;padding:8px 0;color:var(--mist)}
.tal ol{list-style:none;margin:0;padding:0;display:grid;gap:2px 16px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));font-size:.9375rem}
.tal li{display:flex;gap:8px;align-items:center;padding:2px 0}
.tal li b{width:2.2em;text-align:right;color:var(--mist);font-weight:500;font-variant-numeric:tabular-nums;flex:none}
.tal li img{width:20px;height:20px;border-radius:3px;border:1px solid #000;flex:none}
.tal li.t1 span{color:#cfe3ff} .tal li.t2 span{color:#ffe0b8}

/* mini-arbres de talents */
.trees{display:flex;flex-wrap:wrap;gap:16px 28px;padding:14px}
.tree{margin:0}
.tree figcaption{font-size:.875rem;color:var(--mist);margin:0 0 6px}
.tree figcaption span{color:var(--parch);font-weight:700;margin-left:4px}
.tg{display:grid;grid-template-columns:repeat(4,38px);gap:0;background:repeating-linear-gradient(0deg,transparent 0 37px,rgba(255,255,255,.035) 37px 38px)}
.tn{position:relative;width:34px;height:34px;margin:2px;border:1px solid #1eff00;border-radius:4px;box-shadow:0 0 0 1px #000}
.tn.mx{border-color:#ffd100}
.tn img{width:100%;height:100%;border-radius:3px}
.tn b{position:absolute;right:-5px;bottom:-5px;background:#000;color:#1eff00;font:700 .6875rem/1 var(--txt);padding:2px 3px;border-radius:3px;border:1px solid #333}
.tn.mx b{color:#ffd100}

/* hub */
.grp{margin-top:48px}
.grp>h2{font-size:1.75rem;margin-bottom:6px}
.grp>p{color:var(--mist);max-width:62ch}
.dj td:first-child a{font-weight:700;color:var(--parch);text-decoration:none}
.dj td:first-child a:hover{color:var(--gold-hi);text-decoration:underline}
.dj .fac{font-size:.875rem;color:var(--mist)}
.cls{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));margin-top:14px}
.cls a{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:var(--r-sm);text-decoration:none;color:var(--c);font-weight:700;background:var(--surface)}
.cls a:hover{border-color:var(--c)}
.cls img{width:28px;height:28px;border-radius:3px;border:1px solid #000}
.cls .soon{color:var(--mist);font-weight:400;border-style:dashed;background:none}
.specs{columns:2 220px;margin-top:14px;padding:0;list-style:none}
.specs li{break-inside:avoid;padding:3px 0}
.specs .wip{color:var(--mist)}

.foot{border-top:1px solid var(--line-soft);margin-top:64px;padding:24px 16px;color:var(--mist);font-size:.875rem}
.foot .in{max-width:1240px;margin:0 auto}
@media print{.top,.toc,.foot{display:none}.lay{display:block}body{background:#fff;color:#000}}
.tal-n{margin:0;padding:8px 14px;border-bottom:1px solid var(--line-soft);font-size:.875rem;color:var(--mist)}

/* guides de classe : spés disponibles / à venir */
.specs{columns:auto;list-style:none;padding:0;margin-top:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:14px 28px}
.specs li{padding:0}
.spn{display:flex;align-items:center;gap:8px;margin:0 0 6px;color:var(--c);font-weight:700}
.spn img{border-radius:3px;border:1px solid #000}
.spl{display:flex;flex-wrap:wrap;gap:6px}
.spc{display:inline-flex;flex-direction:column;gap:1px;padding:6px 10px;border:1px dashed var(--line-soft);border-radius:4px;color:var(--mist);font-size:.9375rem;line-height:1.2}
.spc span{font-size:.75rem;opacity:.8}
.spc.on{border:1px solid var(--gold);background:var(--surface);color:var(--parch);text-decoration:none;font-weight:700}
.spc.on span{color:var(--gold);opacity:1;font-weight:500}
.spc.on:hover{background:var(--raise);border-color:var(--gold-hi)}