.veil{position:fixed;inset:0;z-index:60;background:#02080c80;opacity:0;pointer-events:none;transition:opacity .18s ease}
.veil.open{opacity:1;pointer-events:auto}
.drawer{--c:var(--mint);position:fixed;z-index:61;top:0;right:0;bottom:0;width:min(540px,100vw);overflow-y:auto;overscroll-behavior:contain;background:linear-gradient(180deg,#15303c,#0f212b 46%);border-left:1px solid var(--line-2);border-radius:24px 0 0 24px;box-shadow:-24px 0 60px #02080ca0;transform:translateX(104%);visibility:hidden;transition:transform .2s cubic-bezier(.2,.8,.3,1),visibility 0s linear .2s}
.drawer.open{transform:none;visibility:visible;transition:transform .2s cubic-bezier(.2,.8,.3,1),visibility 0s}
.drawer[data-ab=Fire]{--c:#ff9f74}.drawer[data-ab=Grass]{--c:#9ad66f}.drawer[data-ab=Water]{--c:#70c9f2}.drawer[data-ab=Earth]{--c:#d4ad74}.drawer[data-ab=Lightning]{--c:#ecd55f}.drawer[data-ab=Ice]{--c:#9adff2}.drawer[data-ab=Wind]{--c:#7ed2be}.drawer[data-ab=Dark]{--c:#bc95df}.drawer[data-ab=Light]{--c:#ffe68d}.drawer[data-ab=Hauling]{--c:#9db7cb}.drawer[data-ab=Artisanship]{--c:#d7a7f0}.drawer[data-ab=Leisure]{--c:#ef9fc7}.drawer[data-ab=Perfumery]{--c:#df95c9}
.drawer.is-prism{--c:#a581dd}
.d-grip{display:none}
.d-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#13272ff0;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.d-no{font:700 .8rem var(--display);letter-spacing:.1em;color:var(--lime)}
.d-nav{display:flex;gap:6px}
.d-nav button{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line-2);color:var(--text);transition:background-color var(--ease),border-color var(--ease)}
.d-nav button:hover:not(:disabled){border-color:var(--mint);background:var(--surface-2)}
.d-nav button:disabled{opacity:.35;cursor:default}
.d-close{margin-left:6px}
.d-body{padding:0 20px 36px}
.hero{margin:0 -20px;padding:18px 20px 6px;background:radial-gradient(70% 62% at 50% 34%,color-mix(in srgb,var(--c) 32%,transparent),transparent 72%)}
.hero.swap{animation:hero-swap .18s ease-out}
@keyframes hero-swap{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:none}}
.hero-stage{position:relative;height:min(40vh,340px);display:grid;place-items:center}
.hero-stage::after{content:"";position:absolute;left:28%;right:28%;bottom:3%;height:7%;border-radius:50%;background:radial-gradient(closest-side,#02080c99,transparent)}
.hero-stage .tag{top:0;right:0}
.hero-stage .pt{inset:2% 4% 5%;width:92%;height:93%;filter:drop-shadow(0 14px 14px #02080ca0)}
.hero-stage .pt.is-thumb{inset:auto;left:50%;bottom:7%;width:auto;height:min(260px,78%);max-width:64%;transform:translateX(-50%)}
.hero-info{text-align:center;padding-top:4px}
.kicker{margin:0;font:700 .72rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.hero-info h2{margin:4px 0 0;font:700 clamp(1.7rem,5vw,2.1rem)/1.08 var(--display);letter-spacing:-.01em}
.en{margin:3px 0 0;color:var(--muted)}
.sks-hero{justify-content:center;margin-top:14px}
.sk-big{height:32px;padding:0 12px 0 10px;gap:8px;font-size:.84rem}
.pips{display:inline-flex;gap:3px}
.pips i{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--c,var(--mint)) 25%,transparent)}
.pips i.on{background:var(--c,var(--mint));box-shadow:0 0 6px color-mix(in srgb,var(--c,var(--mint)) 60%,transparent)}
.sec{margin-top:22px;padding-top:18px;border-top:1px solid #ffffff12}
.sec h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:700 .74rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--mint)}
.sec h3 .count{padding:1px 7px;border-radius:999px;background:#ffffff12;color:var(--muted);letter-spacing:0}
.sec.note p,.muted{margin:0 0 10px;color:var(--muted);font-size:.86rem}
.use-chips{display:flex;flex-wrap:wrap;gap:8px}
.use-chips span{padding:8px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line-2);font-weight:600;font-size:.88rem;color:#d9ebe5}
.use-chips span.main{background:color-mix(in srgb,var(--c) 20%,var(--surface));border-color:color-mix(in srgb,var(--c) 60%,var(--line-2));color:#fff;font-size:1rem}
.ab-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ab-list li{--c:var(--muted);display:grid;grid-template-columns:auto 1fr auto auto;gap:4px 12px;align-items:center;padding:11px 14px;border-radius:14px;background:var(--surface);border-left:3px solid var(--c)}
.ab-list b{font-size:.95rem}.ab-list small{display:block;color:var(--muted);font-size:.8rem;margin-top:1px}
.ab-list em{font-style:normal;font:700 .78rem var(--display);color:var(--c);min-width:34px;text-align:right}
.form-row{display:flex;gap:9px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin;scroll-snap-type:x proximity}
.form-tile{flex:none;width:92px;display:grid;justify-items:center;gap:6px;padding:10px 6px 9px;border-radius:16px;background:var(--surface);border:1.5px solid var(--line-2);text-align:center;scroll-snap-align:start;transition:border-color var(--ease),background-color var(--ease),transform var(--ease)}
.form-tile b{font-size:.76rem;line-height:1.15}
.form-tile small{color:var(--violet);height:12px}
.form-tile:hover{border-color:var(--mint);transform:translateY(-1px)}
.form-tile.active{border-color:var(--lime);background:#25483c;box-shadow:0 0 0 1px #c9f27a55}
.form-tile.is-prism:not(.active){border-color:#9a74d2}
.job-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.job-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:12px;background:var(--surface)}
.job-list b{font-size:.9rem}.job-list small{display:block;color:var(--muted);font-size:.76rem}
.job-ab{display:inline-flex;gap:5px}
.alt-grid{display:grid;gap:8px}
.alt{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;text-align:left;padding:10px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);transition:border-color var(--ease),background-color var(--ease)}
.alt:hover{border-color:var(--mint);background:var(--surface-2)}
.alt .mini{grid-row:1/3}
.alt-t{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.alt-t b{font-size:.94rem}.alt-t small{color:var(--muted);font-size:.74rem}
.sks-mini .sk{height:22px;font-size:.66rem;padding:0 4px 0 7px}.sks-mini .sk b{min-width:15px;height:15px;font-size:.6rem}
.src{margin:22px 0 0;font-size:.8rem}.src a{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}

@media(max-width:700px){
  .drawer{top:auto;left:0;right:0;width:100%;height:auto;max-height:92dvh;border-left:0;border-top:1px solid var(--line-2);border-radius:24px 24px 0 0;box-shadow:0 -20px 60px #02080ca0;transform:translateY(104%)}
  .drawer.open{transform:none}
  .d-grip{display:block;position:absolute;left:50%;top:6px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:#6a8a92;z-index:6}
  .d-head{padding-top:18px}
  .d-body{padding:0 14px 28px}.hero{margin:0 -14px;padding:12px 14px 4px}
  .hero-stage{height:min(34vh,280px)}
  .d-nav button:not(.d-close){display:none}
}
@media(prefers-reduced-motion:reduce){.drawer,.veil,.hero.swap{transition:none!important;animation:none!important}}

/* Icônes d'aptitudes dans la fiche */
.sk-big{padding:0 12px 0 6px}.sk-big .abi{width:26px;height:26px}
.ab-list li{grid-template-columns:auto 1fr auto auto}
.ab-list .abi{width:34px;height:34px}
.job-ab{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end;max-width:52%}
.jab{--c:var(--muted);display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 4px;border-radius:999px;background:color-mix(in srgb,var(--c) 11%,var(--bg-2));border:1px solid color-mix(in srgb,var(--c) 30%,transparent);font-size:.72rem;font-weight:600;color:#d5e6e2}
.jab .abi{width:18px;height:18px}
.sks-mini .sk .abi{width:16px;height:16px}