:root{
  --bg:#eef1f6; --bg2:#dfe6f0; --surface:rgba(255,255,255,.86); --surface-solid:#fff; --fg:#18223a; --muted:#56627a; --line:#d3dbe7; --line-soft:#e4e9f1;
  --accent:#1f6fb8; --accent-fg:#fff; --glow:#6cc4ff; --gold:#a07a2c;
  --crit:#c4281f; --crit-bg:#fde8e6;
  --high:#b25a00; --high-bg:#fdefd9;
  --mid:#1f6f8b; --mid-bg:#e0f1f6;
  --low:#5b6678; --low-bg:#e9ecf1;
  --shadow:0 10px 28px -18px rgba(24,34,58,.45);
  --sb-thumb:rgba(24,34,58,.26); --sb-thumb-hover:rgba(24,34,58,.48);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --font-display:"Marcellus",Georgia,serif;
  --font-body:"Source Sans 3",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#080c18; --bg2:#0f1830; --surface:rgba(18,26,46,.82); --surface-solid:#121a2e; --fg:#e4ebf7; --muted:#97a3bb; --line:#24314d; --line-soft:#1a2440;
  --accent:#7cc8ff; --accent-fg:#081022; --glow:#4fb4ff; --gold:#e1c27a;
  --crit:#ff8a80; --crit-bg:#3a1c1b; --high:#ffb35c; --high-bg:#3a2a12;
  --mid:#6cc7e3; --mid-bg:#14313b; --low:#9aa5b8; --low-bg:#222c40;
  --shadow:0 14px 34px -18px rgba(0,0,0,.85);
  --sb-thumb:rgba(124,200,255,.24); --sb-thumb-hover:rgba(124,200,255,.48);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#080c18; --bg2:#0f1830; --surface:rgba(18,26,46,.82); --surface-solid:#121a2e; --fg:#e4ebf7; --muted:#97a3bb; --line:#24314d; --line-soft:#1a2440;
  --accent:#7cc8ff; --accent-fg:#081022; --glow:#4fb4ff; --gold:#e1c27a;
  --crit:#ff8a80; --crit-bg:#3a1c1b; --high:#ffb35c; --high-bg:#3a2a12;
  --mid:#6cc7e3; --mid-bg:#14313b; --low:#9aa5b8; --low-bg:#222c40;
  --shadow:0 14px 34px -18px rgba(0,0,0,.85);
  --sb-thumb:rgba(124,200,255,.24); --sb-thumb-hover:rgba(124,200,255,.48);
  color-scheme:dark}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 var(--font-body);overflow-x:hidden}
[hidden]{display:none!important}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Lueur d'éther en fond */
.aether{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(42rem 22rem at 50% -6rem,color-mix(in srgb,var(--glow) 30%,transparent),transparent 70%),
    radial-gradient(30rem 30rem at 100% 30%,color-mix(in srgb,#7a5cff 12%,transparent),transparent 70%),
    radial-gradient(30rem 30rem at 0% 70%,color-mix(in srgb,var(--glow) 10%,transparent),transparent 70%),
    linear-gradient(180deg,var(--bg2),var(--bg) 36rem)}

.hero{position:relative;text-align:center;padding:40px 16px 26px;max-width:900px;margin:0 auto}
.wings{display:block;width:min(320px,80%);height:auto;margin:0 auto 6px;color:var(--gold);filter:drop-shadow(0 0 10px color-mix(in srgb,var(--gold) 45%,transparent))}
.eyebrow{margin:0;font:700 .74rem var(--font-body);letter-spacing:.26em;text-transform:uppercase;color:var(--accent)}
h1{font:400 clamp(2.2rem,6vw,3.4rem)/1.1 var(--font-display);margin:6px 0 4px;letter-spacing:.04em;text-wrap:balance;
  background:linear-gradient(180deg,var(--fg) 35%,color-mix(in srgb,var(--glow) 70%,var(--fg)));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--muted);margin:0;font-size:.95rem}
.hero p{margin-inline:auto}

.tabs{position:sticky;top:0;z-index:5;display:flex;justify-content:center;gap:6px;padding:10px 16px;overflow-x:auto;
  background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-block:1px solid var(--line-soft)}
.tab{font:700 .93rem var(--font-body);background:transparent;border:1px solid transparent;color:var(--muted);padding:7px 18px;border-radius:99px;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s,background .15s}
.tab:hover{color:var(--fg);border-color:var(--line)}
.tab[aria-selected="true"]{color:var(--accent-fg);background:var(--accent);border-color:var(--accent);box-shadow:0 0 18px -4px var(--glow)}

.wrap{max-width:900px;margin-inline:auto;padding:4px 16px 64px}
h2{font:400 1.45rem/1.25 var(--font-display);margin:40px 0 10px;text-wrap:balance;display:flex;align-items:center;gap:12px;letter-spacing:.02em}
h2::before{content:"";flex:none;width:10px;height:10px;transform:rotate(45deg);border:1.5px solid var(--gold);box-shadow:0 0 8px color-mix(in srgb,var(--gold) 60%,transparent)}
p{margin:8px 0;max-width:70ch}
.note{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;padding:10px 14px;color:var(--muted);font-size:.93rem}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 0}
.chip{font:700 .85rem var(--font-body);border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:99px;padding:5px 14px;cursor:pointer;transition:border-color .15s}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface);margin:12px 0;box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;min-width:560px}
th,td{text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid var(--line-soft);font-size:.93rem}
th{font:700 .72rem var(--font-body);text-transform:uppercase;letter-spacing:.1em;color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
td:first-child{font-weight:600;min-width:200px}
.badge{display:inline-block;font:700 .76rem var(--font-body);border-radius:99px;padding:2px 10px;white-space:nowrap}
.b-crit{color:var(--crit);background:var(--crit-bg)}.b-high{color:var(--high);background:var(--high-bg)}
.b-mid{color:var(--mid);background:var(--mid-bg)}.b-low{color:var(--low);background:var(--low-bg)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:12px 0}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow);overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:linear-gradient(90deg,var(--glow),transparent)}
.card h3{font:400 1.1rem var(--font-display);margin:0 0 4px}.card p{margin:0;font-size:.92rem;color:var(--muted)}
ol.flow{list-style:none;padding:0;margin:12px 0;display:flex;gap:8px;flex-wrap:wrap;counter-reset:s}
ol.flow li{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:.92rem;flex:1 1 150px;display:flex;align-items:center}
ol.flow li::before{content:counter(s);flex:none;display:inline-grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--accent);color:var(--accent-fg);font-weight:700;font-size:.8rem;margin-right:10px;box-shadow:0 0 10px -2px var(--glow)}
ul.src{padding-left:20px}ul.src li{margin:4px 0}

.ico{border-radius:8px;border:1px solid var(--line);background:#0d1424;flex:none;display:block}
.sub-h{font:400 1.1rem var(--font-display);margin:22px 0 8px;color:var(--fg)}
h3{font:700 .78rem var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
h3.mt{margin-top:18px}

/* En-tête de classe */
.g-hero{display:flex;gap:22px;align-items:center;margin:30px 0 14px}
.emblem{flex:none;width:128px;height:128px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,color-mix(in srgb,var(--glow) 30%,transparent),transparent 70%);filter:drop-shadow(0 0 18px color-mix(in srgb,var(--gold) 35%,transparent))}
.emblem img{width:118px;height:118px}
.g-id{min-width:0}
.g-title{font:400 clamp(2rem,5vw,2.6rem)/1.1 var(--font-display);margin:2px 0 6px}
.g-title::before{display:none}
.tagline{color:var(--muted);margin:0 0 12px}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.facts div{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px 12px}
.facts dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.facts dd{margin:0;font-weight:700;font-size:.9rem}
.core{background:linear-gradient(135deg,color-mix(in srgb,var(--glow) 14%,var(--surface-solid)),var(--surface-solid));border:1px solid color-mix(in srgb,var(--glow) 40%,var(--line));border-radius:12px;padding:14px 18px;margin:12px 0}
.core strong{color:var(--accent);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}
.core p{margin:4px 0 0;max-width:none}
.sw{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.sw section{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
ul.plus,ul.minus{list-style:none;padding:0;margin:0;display:grid;gap:4px}
ul.plus li,ul.minus li{padding-left:22px;position:relative;font-size:.93rem}
ul.plus li::before{content:"✓";position:absolute;left:0;color:#5cc98a;font-weight:700}
ul.minus li::before{content:"✕";position:absolute;left:0;color:var(--crit);font-weight:700}
details.global{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;padding:10px 14px;margin:12px 0}
details.global summary{cursor:pointer;font-weight:700}
details.global ul{margin:8px 0 0;padding-left:20px;font-size:.92rem;color:var(--muted)}

/* Situations */
.sit-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}
.sit-tabs button{flex:none;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:12px;padding:6px 14px 6px 6px;font:700 .88rem var(--font-body);cursor:pointer;transition:border-color .15s,background .15s}
.sit-tabs button img{width:30px;height:30px;border-radius:7px}
.sit-tabs button:hover{border-color:var(--accent)}
.sit-tabs button[aria-selected="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--surface-solid));box-shadow:0 0 16px -6px var(--glow)}
.sit-intro{font-size:1rem;margin:12px 0}
.sit-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;align-items:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:0 0 12px;box-shadow:var(--shadow)}
.stigma-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.stig{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;min-width:0}
.stig-ico{position:relative}
.stig-ico img{width:56px;height:56px;border-radius:12px;border:1px solid color-mix(in srgb,var(--gold) 60%,transparent);box-shadow:0 0 14px -4px color-mix(in srgb,var(--gold) 70%,transparent)}
.stig-ico b{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);font-size:.66rem;white-space:nowrap;background:var(--gold);color:#1a1405;border-radius:99px;padding:0 6px}
.stig strong{font-size:.8rem;line-height:1.2;margin-top:6px}
.stig small{font-size:.74rem;color:var(--muted);line-height:1.25}
.swaps{list-style:none;padding:10px 0 0;margin:12px 0 0;border-top:1px dashed var(--line);display:grid;gap:6px;font-size:.86rem}
.swaps li{display:flex;gap:8px;align-items:center}
.swaps img{border-radius:6px;flex:none}
.levels{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.levels li{display:grid;grid-template-columns:32px minmax(0,1fr) 70px 26px;align-items:center;gap:8px;font-size:.88rem}
.levels img{border-radius:7px}
.lv-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-bar{height:6px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.lv-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--glow));border-radius:inherit}
.lv-val{text-align:right;font-variant-numeric:tabular-nums}
.passive-chain{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px;counter-reset:p}
.passive-chain li{counter-increment:p;display:flex;align-items:center;gap:6px;background:var(--surface-solid);border:1px solid var(--line);border-radius:99px;padding:3px 10px 3px 3px;font-size:.8rem;font-weight:600}
.passive-chain li::before{content:counter(p);font-size:.7rem;color:var(--muted);margin-left:6px;order:2}
.passive-chain img{width:28px;height:28px;border-radius:50%}
/* Rotation en images */
.rot{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px 0;align-items:flex-start}
.rot li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;width:112px;padding:0 6px}
.rot li:not(:last-child)::after{content:"";position:absolute;right:-5px;top:24px;width:10px;height:10px;border-top:2px solid var(--accent);border-right:2px solid var(--accent);transform:rotate(45deg);opacity:.8}
.rot-ico{position:relative}
.rot-ico img{width:52px;height:52px;border-radius:12px}
.rot li.loop .rot-ico img{box-shadow:0 0 0 2px var(--accent),0 0 18px -2px var(--glow)}
.rot-n{position:absolute;top:-6px;left:-6px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-fg);font-size:.7rem}
.rot-loop{position:absolute;bottom:-6px;right:-8px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#1a1405;font-size:.85rem}
.rot strong{font-size:.78rem;line-height:1.2;margin-top:6px}
.rot small{font-size:.72rem;color:var(--muted);line-height:1.25}
.tips ul{margin:0;padding-left:20px;display:grid;gap:4px;font-size:.93rem}

/* Cartes de compétences */
.spec-cols{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.skills{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.skill{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.skill header{display:flex;gap:10px;align-items:center}
.skill header img{border-radius:10px}
.skill header strong{display:block;line-height:1.2}
.skill header small{color:var(--muted);font-size:.78rem}
.skill>p{margin:0;font-size:.86rem;color:var(--muted)}
.specs{list-style:none;padding:0;margin:0;display:grid;gap:3px}
.specs li{display:grid;grid-template-columns:20px 1fr auto;gap:8px;align-items:center;font-size:.8rem;padding:3px 6px;border-radius:7px;border:1px solid transparent;opacity:.6}
.specs li b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--line-soft);font-size:.7rem}
.specs li i{font-style:normal;font-size:.68rem;color:var(--muted)}
.specs li.on{opacity:1;border-color:color-mix(in srgb,var(--accent) 50%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent);font-weight:600}
.specs li.on b{background:var(--accent);color:var(--accent-fg)}
.specs.bonus li{opacity:1;grid-template-columns:24px 1fr}
.specs.bonus li b{width:24px;height:20px;border-radius:6px;background:color-mix(in srgb,var(--gold) 30%,transparent);color:var(--fg)}
.passives{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.passive{display:flex;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.passive img{border-radius:50%;flex:none}
.passive strong{font-size:.9rem}
.passive small{margin-left:6px;color:var(--muted);font-size:.74rem}
.passive p{margin:2px 0 0;font-size:.82rem;color:var(--muted)}

/* Barre de raccourcis */
.hotbar{display:grid;gap:8px;margin:10px 0}
.hb-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hb-label{flex:0 0 190px;font-weight:700;font-size:.86rem}
.hb-slots{display:flex;gap:6px;flex-wrap:wrap;padding:6px;border-radius:12px;background:#0b1120;border:1px solid #2a3a5c;box-shadow:inset 0 0 12px rgba(0,0,0,.5)}
.hb-slot{position:relative}
.hb-slot img{width:48px;height:48px;border-radius:9px;border-color:#3a4c72}
.hb-slot b{position:absolute;right:2px;bottom:1px;font-size:.68rem;color:#fff;text-shadow:0 1px 2px #000}
.manual-slot img{width:44px;height:44px}
.macro{font-size:.9rem;background:var(--surface);border:1px dashed var(--line);border-radius:10px;padding:8px 12px}
.manual{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:10px 0}
.manual p{flex:1 1 100%;margin:0;font-size:.88rem;color:var(--muted)}
/* Chemin vers le niveau 20 */
.path{list-style:none;padding:0;margin:10px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:x}
.path li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 8px}
.path li::before{content:"";position:absolute;top:22px;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--glow));z-index:0}
.path li:first-child::before{left:50%}
.path li:last-child::before{right:50%}
.path b{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--surface-solid);border:2px solid var(--accent);font:400 1.2rem var(--font-display);box-shadow:0 0 14px -4px var(--glow)}
.path strong{margin-top:6px;font-size:.88rem}
.path small{font-size:.78rem;color:var(--muted)}

@media (max-width:720px){
  .g-hero{flex-direction:column;text-align:center;gap:8px}
  .facts{justify-content:center}
  .sw,.sit-grid{grid-template-columns:1fr}
  .stigma-bar{grid-template-columns:repeat(2,1fr);row-gap:16px}
  .rot li{width:96px}
  .hb-label{flex-basis:100%}
  .path{grid-template-columns:1fr 1fr;row-gap:16px}
  .path li::before{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Bouton clair / sombre (script commun /_shared/theme.js) */
.theme-toggle{width:36px;height:36px;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer;display:grid;place-items:center;padding:0;transition:border-color .15s,color .15s}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.theme-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.theme-toggle .i-moon{fill:currentColor;stroke:none}
.theme-toggle[data-mode="dark"] .i-moon,.theme-toggle:not([data-mode="dark"]) .i-sun{display:none}
.hero>.theme-toggle{position:absolute;top:16px;right:16px}

/* ====================== Finitions ====================== */

html{scrollbar-gutter:stable}
*{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) transparent}
@supports not (scrollbar-color:auto){
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:99px;border:3px solid transparent;background-clip:content-box}
  ::-webkit-scrollbar-thumb:hover{background-color:var(--sb-thumb-hover)}
}
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* Rythme vertical */
.wrap{padding:var(--s2) var(--s4) var(--s7)}
h2{margin:var(--s7) 0 var(--s3)}
.panel{padding:var(--s4) var(--s4) var(--s4);margin:0 0 var(--s3)}
.sit-grid,.skills,.passives,.cards{gap:var(--s3)}

/* Onglets : jamais coupés à gauche quand ils débordent */
.tabs{justify-content:flex-start;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs>.tab:first-child{margin-left:auto}
.tabs>.tab:last-child{margin-right:auto}
.tab{flex:none}

/* Animations discrètes */
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@keyframes grow{from{width:0}}
[role="tabpanel"]:not([hidden]){animation:rise .35s var(--ease) both}
.sit-panel>*{animation:rise .35s var(--ease) both}
.sit-panel>:nth-child(2){animation-delay:40ms}
.sit-panel>:nth-child(3){animation-delay:80ms}
.sit-panel>:nth-child(n+4){animation-delay:120ms}
.rot li{animation:rise .4s var(--ease) both;animation-delay:calc(var(--i,0) * 50ms)}
.lv-bar span{animation:grow .9s var(--ease) both}
.skill,.passive,.card,.spell{transition:border-color .2s,transform .2s var(--ease),box-shadow .2s}
.skill:hover,.passive:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.stig-ico img,.rot-ico img,.hb-slot img{transition:transform .2s var(--ease)}
.stig:hover .stig-ico img,.rot li:hover .rot-ico img,.hb-slot:hover img{transform:translateY(-2px) scale(1.04)}
.theme-toggle svg{transition:transform .4s var(--ease)}
.theme-toggle:hover svg{transform:rotate(20deg)}

/* Situations : grille sur petit écran plutôt qu'une rangée qui défile */
@media (max-width:720px){
  .sit-tabs{display:grid;grid-template-columns:1fr 1fr;overflow:visible;padding:0}
  .sit-tabs button{min-width:0}
  .sit-tabs button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sit-tabs button:last-child:nth-child(odd){grid-column:1/-1}
}

/* Tableaux : lignes en cartes sur petit écran */
@media (max-width:640px){
  .stack table{min-width:0}
  .stack thead{display:none}
  .stack tbody tr{display:block;padding:12px 14px;border-bottom:1px solid var(--line-soft)}
  .stack tbody tr:last-child{border-bottom:0}
  .stack tbody td{display:block;padding:2px 0;border:0;min-width:0}
  .stack tbody td:first-child{font-weight:700;margin-bottom:4px}
  .stack tbody td[data-label]::before{content:attr(data-label);display:block;font:700 .66rem var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:6px 0 1px}
  .stack tbody td[data-label="Importance"]::before{display:none}
}

/* Sélecteur de classe */
.class-picker{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--s2);margin:var(--s3) 0 var(--s2)}
.class-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 8px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--fg);cursor:pointer;font:700 .8rem var(--font-body);transition:border-color .2s,background .2s,transform .2s var(--ease)}
.class-btn img{width:52px;height:52px;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--gold) 30%,transparent));transition:transform .25s var(--ease)}
.class-btn:hover{border-color:var(--accent);transform:translateY(-2px)}
.class-btn:hover img{transform:scale(1.06)}
.class-btn[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface-solid));box-shadow:0 0 18px -8px var(--glow)}
.class-btn.soon img{opacity:.55;filter:grayscale(.4)}
.class-btn small{position:absolute;top:6px;right:6px;font-size:.58rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--surface-solid);border:1px solid var(--line);border-radius:99px;padding:0 5px}
@media (max-width:720px){.class-picker{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Routine : rythme de jeu */
.paces{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin:var(--s3) 0}
.pace{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--fg);cursor:pointer;font:inherit;transition:border-color .2s,background .2s,box-shadow .2s,transform .2s var(--ease)}
.pace:hover{border-color:var(--accent);transform:translateY(-1px)}
.pace[aria-checked="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface-solid));box-shadow:0 0 20px -8px var(--glow)}
.pace strong{font-size:1rem}
.pace small{color:var(--muted);font-size:.84rem}
.pace-dots{display:flex;gap:4px;margin-bottom:6px}
.pace-dots i{width:18px;height:5px;border-radius:99px;background:var(--line)}
.pace-dots i.on{background:var(--accent)}
.pace-card{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:var(--s4);align-items:center;animation:rise .35s var(--ease) both}
.pace-card p{margin:0;max-width:none}
.pace-stats{display:flex;gap:var(--s3);margin:0}
.pace-stats div{text-align:center;min-width:76px;background:var(--surface-solid);border:1px solid var(--line-soft);border-radius:10px;padding:6px 10px}
.pace-stats dt{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.pace-stats dd{margin:0;font:400 1.4rem var(--font-display)}
h2 .count{margin-left:auto;font:700 .78rem var(--font-body);color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:1px 10px}
.meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.tag{font:700 .68rem var(--font-body);letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:0 8px;white-space:nowrap}
.tag.time{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
td strong{font-weight:700}
/* Renvois numérotés vers les sources */
.refs{display:inline-flex;gap:3px;vertical-align:super;line-height:1}
.ref{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:99px;font:700 .62rem var(--font-body);text-decoration:none;color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.ref:hover{background:var(--accent);color:var(--accent-fg)}
ol.src{padding-left:24px}
ol.src li{margin:6px 0;padding:2px 6px;border-radius:6px;transition:background .6s}
ol.src li.flash{animation:flash 1.6s ease}
@keyframes flash{0%,40%{background:color-mix(in srgb,var(--accent) 22%,transparent)}100%{background:transparent}}
/* Semaine type */
.week{list-style:none;padding:0;margin:var(--s3) 0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.week li{display:flex;flex-direction:column;gap:3px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px;min-width:0}
.week b{font:400 1.1rem var(--font-display)}
.week strong{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.week span{font-size:.8rem;color:var(--muted);line-height:1.35}
.week li.reset{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface-solid))}
.week li.reset strong{color:var(--accent)}
.week li.last{border-color:color-mix(in srgb,var(--crit) 60%,var(--line))}
.week li.last strong{color:var(--crit)}
/* Ce qui se garde, ce qui se perd */
.banks{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.bank{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.bank.keep{border-top:3px solid #5cc98a}
.bank.lose{border-top:3px solid var(--crit)}
.bank ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.bank li{display:flex;justify-content:space-between;gap:12px;font-size:.88rem;padding-bottom:6px;border-bottom:1px dashed var(--line-soft)}
.bank li span{color:var(--muted);text-align:right}
.banks-src{grid-column:1/-1;margin:0;text-align:right}
@media (max-width:720px){
  .paces{grid-template-columns:1fr}
  .pace{flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px 10px}
  .pace-dots{margin:0}
  .pace small{margin-left:auto}
  .pace-card{grid-template-columns:1fr}
  .pace-stats div{flex:1;min-width:0}
  .week{grid-template-columns:1fr}
  .week li{display:grid;grid-template-columns:48px 1fr;column-gap:10px}
  .week li b{grid-row:span 2}
  .banks{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ====================== Débuter ====================== */
.small{font-size:.82rem}.muted{color:var(--muted)}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--s3);margin-top:var(--s3)}
.pick{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;animation:rise .4s var(--ease) both;animation-delay:calc(var(--i,0)*40ms);transition:border-color .2s,transform .2s var(--ease)}
.pick:hover{border-color:var(--accent);transform:translateY(-2px)}
.pick header{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pick header img{width:52px;height:52px;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--gold) 35%,transparent))}
.pick h3{margin:0;font:400 1.2rem var(--font-display);text-transform:none;letter-spacing:0;color:var(--fg)}
.pick header small{color:var(--muted)}
.rec{flex-basis:100%;width:max-content;font:700 .68rem var(--font-body);text-transform:uppercase;letter-spacing:.06em;color:#1d7a46;background:color-mix(in srgb,#5cc98a 22%,transparent);border-radius:99px;padding:2px 10px}
.pick-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0}
.pick-stats div{background:var(--surface-solid);border:1px solid var(--line-soft);border-radius:8px;padding:5px 6px;text-align:center}
.pick-stats dt{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.pick-stats dd{margin:2px 0 0}
.tier{font:400 1.1rem var(--font-display)}
.t-S{color:var(--gold)}.t-A{color:var(--accent)}.t-B{color:var(--muted)}
.pips{display:inline-flex;gap:2px}
.pips i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.pips i.on{background:var(--accent)}
.plus-line,.minus-line{margin:0;font-size:.84rem;padding-left:18px;position:relative;max-width:none}
.plus-line::before{content:"✓";position:absolute;left:0;color:#5cc98a;font-weight:700}
.minus-line::before{content:"✕";position:absolute;left:0;color:var(--crit);font-weight:700}
.btn-link{margin-top:auto;align-self:flex-start;background:none;border:0;padding:4px 0;color:var(--accent);font:700 .86rem var(--font-body);cursor:pointer}
.btn-link:hover{text-decoration:underline}
.phases{display:grid;gap:var(--s2);margin:var(--s3) 0}
.phase{display:grid;grid-template-columns:86px 1fr;gap:var(--s3);align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.phase>b{font:400 1.05rem var(--font-display);color:var(--accent)}
.phase p{margin:2px 0;font-size:.88rem}
.phase small{color:var(--muted)}
.milestones{list-style:none;padding:0;margin:var(--s3) 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s2)}
.milestones li{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;animation:rise .4s var(--ease) both;animation-delay:calc(var(--i,0)*30ms)}
.milestones b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:2px solid var(--accent);font:400 1rem var(--font-display);box-shadow:0 0 12px -4px var(--glow)}
.milestones strong{display:block;font-size:.9rem}
.milestones span{font-size:.8rem;color:var(--muted)}
.tips-list{list-style:none;padding:0;margin:var(--s3) 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s2)}
.tips-list li{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.tips-list span{font-size:.86rem;color:var(--muted)}

/* ====================== Équipement ====================== */
.ladder{list-style:none;padding:0;margin:var(--s3) 0;display:grid;gap:6px;counter-reset:l}
.ladder li{display:grid;grid-template-columns:84px 1fr;gap:var(--s3);align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;position:relative;animation:rise .4s var(--ease) both;animation-delay:calc(var(--i,0)*50ms)}
.ladder li>b{font:400 1.25rem var(--font-display);color:var(--gold);text-align:center;border-right:1px solid var(--line);padding-right:var(--s3)}
.ladder li:last-child{border-color:var(--gold);box-shadow:0 0 22px -12px var(--gold)}
.ladder strong{display:block}
.ladder span{font-size:.86rem;color:var(--muted)}
.rates{display:grid;gap:6px;max-width:560px;margin:var(--s3) 0}
.rate{display:grid;grid-template-columns:90px 1fr 48px;gap:10px;align-items:center;font-size:.88rem}
.rate em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.rate-bar{height:8px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.rate-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--glow));animation:grow .9s var(--ease) both}
.cost-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s2);margin:var(--s3) 0}
.cost-grid div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column}
.cost-grid strong{font:400 1.3rem var(--font-display);color:var(--gold)}
.cost-grid span{font-size:.84rem;color:var(--muted)}
.chain{list-style:none;padding:0;margin:var(--s3) 0;display:flex;flex-wrap:wrap;gap:6px 0}
.chain li{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 12px;position:relative;margin-right:22px}
.chain li:not(:last-child)::after{content:"→";position:absolute;right:-18px;top:50%;transform:translateY(-50%);color:var(--accent);font-weight:700}
.chain span{font-size:.8rem;color:var(--muted)}
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s3)}
.rule{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.rule ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:.88rem}
.r-waste{border-top:3px solid var(--crit)}.r-early{border-top:3px solid #5cc98a}.r-save{border-top:3px solid var(--gold)}.r-fast{border-top:3px solid var(--accent)}
@media (max-width:640px){
  .phase{grid-template-columns:1fr}
  .ladder li{grid-template-columns:64px 1fr}
  .pick-stats{grid-template-columns:repeat(2,1fr)}
}

/* ====================== Donjons ====================== */
.dg-picker{display:flex;flex-wrap:wrap;gap:6px;margin:var(--s3) 0}
.chip.soon{opacity:.5;cursor:default;border-style:dashed}
.dg{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:var(--s4);box-shadow:var(--shadow);animation:rise .35s var(--ease) both}
.dg-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);align-items:flex-start}
.dg-head h3{margin:2px 0;font:400 1.8rem var(--font-display);color:var(--fg);text-transform:none;letter-spacing:.02em}
.dg-head .eyebrow{margin:0}
.gates{display:flex;flex-wrap:wrap;gap:6px;margin:0;align-items:stretch}
.gates div{background:var(--surface-solid);border:1px solid var(--line-soft);border-radius:10px;padding:6px 12px;text-align:center}
.gates dt{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.gates dd{margin:0;font:400 1.1rem var(--font-display);color:var(--gold)}
.gate-src{flex-basis:100%;margin:0;font-size:.74rem;color:var(--muted);text-align:right}
.dg-intro{margin:var(--s3) 0;max-width:none}
.bosses{display:grid;gap:var(--s3)}
.boss{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface-solid);animation:rise .4s var(--ease) both;animation-delay:calc(var(--i,0)*60ms)}
.boss.final{border-color:color-mix(in srgb,var(--crit) 55%,var(--line));box-shadow:0 0 22px -14px var(--crit)}
.boss header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.boss h4{margin:0;font:400 1.15rem var(--font-display)}
.boss small{color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em}
.boss.final small{color:var(--crit)}
.boss-n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--accent);font:700 .85rem var(--font-body);flex:none}
.boss.final .boss-n{border-color:var(--crit);color:var(--crit)}
.mech{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mech li{display:grid;gap:2px;padding-left:14px;border-left:2px solid var(--line)}
.mech strong{font-size:.92rem}
.mech span{font-size:.88rem;color:var(--muted)}
.loot{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s3);margin-top:var(--s3)}
.loot div{border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:12px;padding:10px 12px}
.loot h4{margin:0 0 4px;font:700 .74rem var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.loot p{margin:0;font-size:.88rem}
@media (max-width:600px){
  .tabs{flex-wrap:wrap;justify-content:center;overflow:visible;gap:4px;padding:8px 10px}
  .tabs>.tab:first-child,.tabs>.tab:last-child{margin:0}
  .tab{padding:6px 12px;font-size:.86rem}
}