/* ===== Barre de recherche + filtres (sticky, compacte) ===== */
.bar{--bar-top:var(--top-h);position:sticky;top:var(--bar-top);z-index:30;margin:0 calc(var(--gut) * -1);padding:10px var(--gut) 8px;background:linear-gradient(180deg,#0a171ffa 82%,#0a171f00);backdrop-filter:blur(10px)}
.bar-row{display:flex;align-items:center;gap:10px}
.search{position:relative;flex:1 1 320px;min-width:0;display:flex;align-items:center;height:46px;padding:0 14px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line-2);color:var(--muted);transition:border-color var(--ease),box-shadow var(--ease)}
.search:focus-within{border-color:var(--lime);box-shadow:0 0 0 3px #c9f27a1f;color:var(--lime)}
.search input{flex:1;min-width:0;height:100%;margin-left:10px;background:none;border:0;outline:0;font-size:1rem;color:var(--text)}
.search input::placeholder{color:var(--dim)}
.search input::-webkit-search-cancel-button{display:none}
.q-clear{width:26px;height:26px;border-radius:50%;background:#ffffff14;color:var(--text);font-size:1.1rem;line-height:1}
.kbd{margin-left:8px;min-width:22px;height:22px;display:grid;place-items:center;border-radius:6px;border:1px solid var(--line-2);font:600 .72rem var(--font);color:var(--dim)}
.search:focus-within .kbd,.search:has(.q-clear:not([hidden])) .kbd{display:none}
.quick{display:flex;align-items:center;gap:10px;flex:none}
.seg{display:inline-flex;align-items:center;padding:3px;gap:2px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line)}
.seg-b{height:34px;padding:0 13px;border-radius:9px;font-size:.82rem;font-weight:600;color:var(--muted);white-space:nowrap;transition:background-color var(--ease),color var(--ease)}
.seg-b:hover{color:var(--text);background:#ffffff0c}
.seg-b.on{background:var(--surface-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.seg-lab{display:none}
.seg-prism .seg-b.on:not([data-f="pr:normal"]){background:linear-gradient(120deg,#5d3d8a,#2f6f86);color:#fff;box-shadow:0 0 14px #9a74d244}
.sel{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;color:var(--dim)}
.sel select{height:40px;padding:0 30px 0 12px;border-radius:12px;background:var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%2394adb4' stroke-width='2'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 11px center;border:1px solid var(--line);appearance:none;-webkit-appearance:none;font-size:.84rem;font-weight:600}
.more{position:relative;display:inline-flex;align-items:center;gap:8px;flex:none;height:46px;padding:0 15px;border-radius:14px;background:var(--surface);border:1px solid var(--line-2);font-weight:600;font-size:.86rem;transition:border-color var(--ease),background-color var(--ease)}
.more:hover,.more[aria-expanded=true]{border-color:var(--mint);background:var(--surface-2)}
.more b{min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:var(--lime);color:#13321f;font-size:.72rem}

.chips{display:flex;gap:7px;margin-top:9px;padding:2px 2px 6px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.chips::-webkit-scrollbar{display:none}
.chip{--c:var(--mint);flex:none;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c) 28%,var(--line));background:color-mix(in srgb,var(--c) 7%,var(--bg-2));font-size:.84rem;font-weight:600;color:#d3e4e2;white-space:nowrap;scroll-snap-align:start;transition:background-color var(--ease),border-color var(--ease),transform var(--ease)}
.chip:hover{border-color:var(--c);background:color-mix(in srgb,var(--c) 15%,var(--bg-2))}
.chip:active{transform:scale(.97)}
.chip-all{padding:0 15px}
.chip .dot,.dot{width:9px;height:9px;border-radius:50%;background:var(--c,var(--mint));box-shadow:0 0 8px color-mix(in srgb,var(--c,var(--mint)) 55%,transparent);display:inline-block;flex:none}
.chip.on{background:color-mix(in srgb,var(--c) 24%,var(--bg-2));border-color:var(--c);color:#fff;box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent),0 0 16px color-mix(in srgb,var(--c) 22%,transparent)}
.chip-all.on{--c:var(--mint)}
.chip.has-lv{padding:0 4px 0 0;gap:2px}
.chip-main{display:inline-flex;align-items:center;gap:8px;height:100%;padding:0 6px 0 11px;font-weight:600;color:inherit}
.lvseg{display:inline-flex;gap:2px;padding:2px;border-radius:999px;background:#0a171f99}
.lvseg button{width:26px;height:26px;border-radius:50%;font-size:.78rem;font-weight:700;color:var(--muted)}
.lvseg button:hover{color:var(--text)}
.lvseg button.on{background:var(--c,var(--lime));color:#0b1a20}
.chip-sm{height:32px;font-size:.78rem}

.pop{margin-top:6px;padding:14px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--line-2);box-shadow:0 18px 40px #02080c99;display:grid;gap:14px;max-width:760px;animation:pop-in .14s ease-out}
.pop-quick{display:none}
.pop-sec h4{margin:0 0 8px;font:700 .7rem var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--mint)}
.chip-wrap{display:flex;flex-wrap:wrap;gap:6px}
.pop-lv{display:flex;align-items:center;gap:10px;margin-top:9px;font-size:.78rem;color:var(--muted)}
@keyframes pop-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.rhead{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding:12px 0 14px;min-height:54px}
.rhead strong{font:700 1.05rem var(--display)}
.pills{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 6px 0 11px;border-radius:999px;background:color-mix(in srgb,var(--c,var(--mint)) 18%,var(--bg-2));border:1px solid color-mix(in srgb,var(--c,var(--mint)) 55%,transparent);font-size:.78rem;font-weight:600;color:#e8f3ef}
.pill b{width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:#ffffff1c;font-size:.9rem;line-height:1}
.pill:hover{border-color:var(--c,var(--mint))}
.pill-clear{padding:4px 8px;font-size:.78rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px}

/* ===== Grille de cartes ===== */
.grid{--min:208px;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--min),1fr));gap:16px}
.grid.swap{animation:grid-in .16s ease-out}
@keyframes grid-in{from{opacity:.55;transform:translateY(3px)}to{opacity:1;transform:none}}
.empty{grid-column:1/-1;text-align:center;padding:56px 16px;border-radius:var(--r);border:1px dashed var(--line-2);color:var(--muted)}
.empty h3{margin:0 0 6px;font:700 1.2rem var(--display);color:var(--text)}

.card{--c:var(--mint);position:relative;display:flex;flex-direction:column;border-radius:var(--r);background:var(--surface);border:1px solid color-mix(in srgb,var(--c) 20%,var(--line));overflow:hidden;content-visibility:auto;contain-intrinsic-size:auto 380px;transition:transform var(--ease),border-color var(--ease),box-shadow var(--ease)}
.card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 60%,var(--line-2));box-shadow:0 14px 28px #02080c80,0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent)}
.card:active{transform:translateY(-1px) scale(.992)}
.card.is-unavailable{opacity:.7}
.stage{position:relative;aspect-ratio:1/1.08;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(62% 50% at 50% 64%,color-mix(in srgb,var(--c) 34%,transparent),transparent 72%),linear-gradient(180deg,var(--surface-2),var(--surface))}
.stage::after{content:"";position:absolute;left:24%;right:24%;bottom:7%;height:9%;border-radius:50%;background:radial-gradient(closest-side,#02080c88,transparent);pointer-events:none}
.pt{position:absolute;inset:7% 5% 9%;width:90%;height:84%;object-fit:contain;object-position:50% 55%;opacity:0;transition:opacity .22s ease,transform .22s ease;z-index:1;filter:drop-shadow(0 8px 8px #02080c80)}
.pt.ok{opacity:1}
.card:hover .pt.ok{transform:scale(1.035)}
/* anciennes petites vignettes (<300 px) : jamais agrandies, posées sur le sol de la scène */
.pt.is-thumb{inset:auto;left:50%;bottom:11%;width:auto;height:62%;max-width:70%;transform:translateX(-50%);border-radius:12px}
.card:hover .pt.is-thumb.ok{transform:translateX(-50%) scale(1.04)}
.pt-missing{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:4px;color:var(--dim)}
.pt-missing b{font:700 1.7rem var(--display);color:#bddbcc;letter-spacing:.06em}
.pt-missing small{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}
.no{position:absolute;left:10px;top:10px;z-index:3;padding:2px 8px;border-radius:999px;background:#0a171fc4;border:1px solid #ffffff1a;font:700 .7rem var(--display);letter-spacing:.07em;color:var(--lime)}
.tag{position:absolute;right:10px;top:10px;z-index:3;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;background:#25384c;border:1px solid #4d6a86;font-size:.66rem;font-weight:700;color:#d6e7ff}
.tag-prism{background:linear-gradient(120deg,#5d3d8a,#2f6f86);border-color:#c7a6ee;color:#fbf3ff;box-shadow:0 0 12px #9a74d255}
.fcount{position:absolute;right:10px;bottom:9px;z-index:3;display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:999px;background:#0a171fc4;border:1px solid #ffffff1a;font-size:.7rem;font-weight:700;color:var(--muted)}
.peek{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:center;gap:6px;padding:20px 8px 9px;background:linear-gradient(180deg,transparent,#0a171fe6 62%);transform:translateY(100%);opacity:0;transition:transform var(--ease),opacity var(--ease);pointer-events:none}
@media(hover:hover){.card:hover .peek,.card:focus-visible .peek{transform:none;opacity:1}.card:hover .fcount{opacity:0}}
.mini{width:30px;height:30px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--surface);border:1.5px solid var(--line-2);flex:none}
.mini img{width:100%;height:100%;object-fit:contain;object-position:50% 38%;transform:scale(1.3)}
.mini em{font:700 .72rem var(--display);font-style:normal;color:var(--muted)}
.mini.is-prism{border-color:var(--violet);box-shadow:0 0 8px #9a74d255}
.mini.more{width:auto;min-width:30px;padding:0 7px;font:700 .72rem var(--display);color:var(--text);border-radius:999px}
.mini.lg{width:56px;height:56px;border-radius:14px}
.mini.lg img{transform:none;padding:2px}

.body{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px;flex:1}
.body h3{margin:0;font:700 1.18rem/1.1 var(--display);letter-spacing:-.005em;overflow-wrap:anywhere}
.sub{margin:-3px 0 0;font-size:.78rem;color:var(--muted)}
.sks{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.sk{--c:var(--muted);display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 5px 0 9px;border-radius:999px;background:color-mix(in srgb,var(--c) 11%,var(--bg-2));border:1px solid color-mix(in srgb,var(--c) 34%,transparent);font-size:.74rem;font-weight:600;color:#dbe9e6}
.sk .dot{width:7px;height:7px}
.sk b{min-width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#0b1a20;font:700 .7rem var(--display)}
.sk.more{padding:0 9px;color:var(--muted);--c:var(--dim)}
.use{margin:auto 0 0;padding-top:7px;border-top:1px solid #ffffff10;font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.warn-line{margin:2px 0 0;font-size:.74rem;color:var(--warn)}

/* Prismana : liseré irisé */
.card.is-prism{border-color:transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,#b48ee8,#6fd0d9 48%,#eab8f2) border-box;border:1.5px solid transparent}
.card.is-prism .stage{background:radial-gradient(62% 50% at 50% 64%,#a581dd44,#4aa4b222 55%,transparent 74%),linear-gradient(180deg,#24384f,var(--surface))}
.card.is-prism:hover{box-shadow:0 14px 28px #02080c80,0 0 20px #9a74d240}
.card.is-special{--c:#9b8fd0}

/* ===== Responsive ===== */
@media(min-width:1500px){.grid{--min:226px;gap:18px}}
@media(max-width:1100px){.sel span{display:none}.seg-b{padding:0 10px}}
@media(max-width:900px){
  .bar{--bar-top:calc(var(--top-h) + 46px)}
  .quick{display:none}
  .pop-quick{display:grid;gap:10px}
  .pop-quick .seg{display:flex}.pop-quick .seg-b{flex:1}
  .pop-quick .seg-prism .seg-lab{display:inline;padding:0 8px;font-size:.72rem;color:var(--dim)}
  .pop-quick .sel{display:flex}.pop-quick .sel span{display:inline}.pop-quick .sel select{flex:1}
  .kbd{display:none}
  .more span{display:none}.more{padding:0 13px}
  .pop{position:absolute;left:var(--gut);right:var(--gut);z-index:35;max-height:min(70dvh,520px);overflow:auto}
}
@media(max-width:640px){
  .grid{--min:150px;gap:10px}
  .bar{padding-top:8px}.search{height:42px}.more{height:42px}
  .chip{height:34px;font-size:.8rem}
  .body{padding:10px 10px 12px;gap:5px}
  .body h3{font-size:1rem}
  .stage{aspect-ratio:1/1}
  .no{left:7px;top:7px;font-size:.64rem;padding:1px 7px}.tag{right:7px;top:7px;height:20px;font-size:.6rem;padding:0 7px}
  .sk{height:24px;font-size:.68rem;padding:0 4px 0 7px;gap:5px}.sk b{min-width:16px;height:16px;font-size:.64rem}
  .use{font-size:.7rem}
  .fcount{right:7px;bottom:7px}
}
@media(prefers-reduced-motion:reduce){.pop,.grid.swap{animation:none}}

.more .n-m{display:none}
@media(max-width:900px){.more .n-d{display:none!important}.more .n-m:not([hidden]){display:grid}}

/* ===== Icônes officielles des aptitudes (le nom reste toujours visible à côté) ===== */
.abi{width:20px;height:20px;flex:none;object-fit:contain;display:block;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--c,#fff) 35%,transparent))}
.chip{padding:0 14px 0 7px;gap:7px}
.chip-all{padding:0 15px}
.chip .abi{width:24px;height:24px}
.chip.has-lv{padding:0 4px 0 0}
.chip-main{padding:0 6px 0 7px;gap:7px}
.chip-sm{height:34px}.chip-sm .abi{width:22px;height:22px}
.sk{padding:0 5px 0 5px;gap:6px}
.sk .abi{width:20px;height:20px}
.pill{padding:0 6px 0 7px}.pill .abi{width:19px;height:19px}
@media(max-width:640px){
  .chip .abi{width:22px;height:22px}
  .sk{padding:0 4px 0 4px;gap:5px}.sk .abi{width:18px;height:18px}
}

/* ===== Sélection de 2 aptitudes (ET) ===== */
.chip.is-locked{opacity:.38;cursor:not-allowed;filter:saturate(.6)}
.chip.is-locked:hover{border-color:color-mix(in srgb,var(--c) 28%,var(--line));background:color-mix(in srgb,var(--c) 7%,var(--bg-2))}
.selbar{display:flex;align-items:center;gap:8px;margin-top:4px;padding:2px 2px 4px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
.selbar::-webkit-scrollbar{display:none}
.selg{--c:var(--mint);flex:none;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 5px 0 7px;border-radius:999px;background:color-mix(in srgb,var(--c) 18%,var(--bg-2));border:1px solid color-mix(in srgb,var(--c) 60%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--c) 14%,transparent);animation:sel-in .14s ease-out}
@keyframes sel-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.selg b{font-size:.84rem;white-space:nowrap}
.sel-min{font-size:.68rem;color:var(--muted);white-space:nowrap}
.selg .lvseg{padding:2px}
.selg-x{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#ffffff1c;font-size:1rem;line-height:1;color:var(--text)}
.selg-x:hover{background:#ffffff33}
.sel-and{flex:none;font:700 .66rem var(--display);letter-spacing:.1em;color:var(--lime)}
.selhint{flex:none;padding:5px 11px;border-radius:999px;background:#3b2f17;border:1px solid #8a6a2a;color:var(--warn);font-size:.74rem;font-weight:600;white-space:nowrap;animation:sel-in .14s ease-out}
@media(max-width:640px){.selg{height:36px;gap:5px}.selg b{font-size:.78rem}.sel-min{display:none}.selg .lvseg button{width:24px;height:24px}}