/* Atlas — encyclopédie moderne. Clair par défaut, sombre au choix ou selon le système. */
:root {
  --bg: #f3f4f6; --sheet: #ffffff; --ink: #1b1f24; --muted: #5d6673; --line: #dfe3e8; --soft: #f6f7f9;
  --link: #2a5bd7; --link-v: #6a3fc2; --accent: #e0483b; --accent2: #2a5bd7;
  --th: #eef1f4; --sub: #e3f0e6; --hl: #fff3c4; --shadow: 0 1px 2px rgba(16,24,40,.06), 0 6px 18px rgba(16,24,40,.06);
  --r: 12px; --font: "Inter", system-ui, sans-serif; --serif: "Source Serif 4", Georgia, serif; --mono: "JetBrains Mono", ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1015; --sheet: #151a21; --ink: #e6e9ee; --muted: #929bab; --line: #283040; --soft: #1b212b;
    --link: #8ab4ff; --link-v: #c3a6ff; --th: #1e2530; --sub: #1c2d23; --hl: #3a3416; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1015; --sheet: #151a21; --ink: #e6e9ee; --muted: #929bab; --line: #283040; --soft: #1b212b;
  --link: #8ab4ff; --link-v: #c3a6ff; --th: #1e2530; --sub: #1c2d23; --hl: #3a3416; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  color-scheme: dark;
}
:root {
  --t-normal:#A8A77A;--t-fire:#EE8130;--t-water:#6390F0;--t-electric:#F7D02C;--t-grass:#7AC74C;--t-ice:#96D9D6;--t-fighting:#C22E28;--t-poison:#A33EA1;--t-ground:#E2BF65;--t-flying:#A98FF3;--t-psychic:#F95587;--t-bug:#A6B91A;--t-rock:#B6A136;--t-ghost:#735797;--t-dragon:#6F35FC;--t-dark:#705746;--t-steel:#B7B7CE;--t-fairy:#D685AD;--t-stellar:#40B5A5;--t-unknown:#68A090;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.6 var(--font); }
a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; }
img { max-width: 100%; }
.px, img.px { image-rendering: pixelated; }
main { max-width: 1180px; margin: 18px auto 0; padding: 26px 32px 40px; background: var(--sheet); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
body.wide main { max-width: 1480px; }
@media (max-width: 720px) { main { margin: 0; border-radius: 0; border-left: 0; border-right: 0; padding: 18px 16px 30px; } }
h1, h2, h3 { line-height: 1.2; }
.page-title { font: 600 2.1rem/1.15 var(--serif); margin: 4px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.wiki h2, main > h2 { font: 600 1.55rem var(--serif); margin: 30px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line); scroll-margin-top: 70px; }
.wiki h3 { font: 700 1.02rem var(--font); margin: 20px 0 8px; scroll-margin-top: 70px; }
.lead { font-size: 1rem; }
.muted { color: var(--muted); } .tiny { font-size: .75rem; margin: 6px 0 0; }
.note { font-size: .85rem; color: var(--muted); border-left: 3px solid var(--line); padding-left: 10px; }
.sources { color: var(--muted); font-size: .76rem; margin-top: 30px; border-top: 1px solid var(--line); padding-top: 10px; }
.crumbs { font-size: .82rem; color: var(--muted); }

/* En-tête */
.top { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 16px; padding: 9px 22px;
  background: color-mix(in srgb, var(--sheet) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; font: 700 1.25rem var(--serif); color: var(--ink); text-decoration: none !important; }
.brand svg { width: 22px; height: 22px; color: var(--accent); }
.brand em { font: 600 .62rem var(--font); font-style: normal; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); border: 1px solid currentColor; border-radius: 99px; padding: 1px 7px; }
.top nav { display: flex; gap: 2px; }
.top nav a { color: var(--ink); font-weight: 600; padding: 6px 12px; border-radius: 8px; text-decoration: none; }
.top nav a:hover { background: var(--soft); }
.search { position: relative; flex: 1; max-width: 440px; margin-left: auto; }
.search input { width: 100%; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--soft); color: var(--ink); font: inherit; }
.search .results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.search .results a { display: flex; align-items: center; gap: 10px; padding: 6px 12px; color: var(--ink); text-decoration: none; }
.search .results a:hover, .search .results a.sel { background: var(--soft); }
.search .results img { width: 40px; height: 40px; image-rendering: pixelated; }
.search .results span { color: var(--muted); font-size: .85rem; margin-left: auto; }
.theme-toggle, .lang { font: 700 .85rem var(--font); color: var(--ink); border: 1px solid var(--line); background: var(--sheet); border-radius: 9px; padding: 5px 10px; cursor: pointer; text-decoration: none !important; }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; } :root[data-theme="dark"] .theme-toggle .moon { display: inline; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .sun { display: none; } :root:not([data-theme="light"]) .theme-toggle .moon { display: inline; } }
@media (max-width: 760px) { .top { flex-wrap: wrap; gap: 8px; padding: 9px 16px; } .search { order: 5; max-width: none; flex-basis: 100%; } }
.foot { text-align: center; color: var(--muted); font-size: .78rem; padding: 22px 16px 40px; }

/* Boutons */
.chip { font: 600 .8rem var(--font); border: 1px solid var(--line); background: var(--sheet); color: var(--ink); padding: 5px 11px; border-radius: 99px; cursor: pointer; }
.chip:hover { border-color: var(--muted); }
.chip.on, .chip[aria-pressed="true"] { background: var(--ink); color: var(--sheet); border-color: var(--ink); }
.chip.accent, .mini.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.mini { font: 600 .75rem var(--font); border: 1px solid var(--line); background: var(--soft); color: var(--ink); padding: 3px 8px; border-radius: 7px; cursor: pointer; }
.mini:hover { border-color: var(--muted); }
.type { display: inline-block; font: 700 .68rem var(--font); text-transform: uppercase; letter-spacing: .04em; color: #fff; padding: 2px 8px; border-radius: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.25); margin: 1px 2px 1px 0; }
.t-normal{background:var(--t-normal)}.t-fire{background:var(--t-fire)}.t-water{background:var(--t-water)}.t-electric{background:var(--t-electric)}.t-grass{background:var(--t-grass)}.t-ice{background:var(--t-ice)}.t-fighting{background:var(--t-fighting)}.t-poison{background:var(--t-poison)}.t-ground{background:var(--t-ground)}.t-flying{background:var(--t-flying)}.t-psychic{background:var(--t-psychic)}.t-bug{background:var(--t-bug)}.t-rock{background:var(--t-rock)}.t-ghost{background:var(--t-ghost)}.t-dragon{background:var(--t-dragon)}.t-dark{background:var(--t-dark)}.t-steel{background:var(--t-steel)}.t-fairy{background:var(--t-fairy)}.t-stellar{background:var(--t-stellar)}.t-unknown{background:var(--t-unknown)}
.gb { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 4px; font: 800 .72rem var(--font); color: #fff; background: var(--g); border-radius: 5px; margin-right: 2px; }
.gb.off { background: transparent; color: var(--muted); opacity: .45; border: 1px solid var(--line); }

/* Mise en page wiki + encadré */
.wiki-layout { display: grid; grid-template-columns: minmax(0, 1fr) 14px var(--ib-w, 440px); gap: 0 12px; align-items: start; }
.wiki-layout.resizing { user-select: none; }
.wiki-layout.resizing .infobox, .wiki-layout.resizing .wiki { pointer-events: none; }
/* Poignée entre l'article et le panneau : glisser pour élargir, double-clic pour agrandir / réduire */
.splitter { position: sticky; top: 64px; height: calc(100vh - 76px); cursor: col-resize; display: grid; place-items: center; touch-action: none; border-radius: 8px; }
.splitter::before { content: ""; width: 4px; height: 64px; border-radius: 99px; background: var(--line); transition: background .15s, height .15s; }
.splitter:hover::before, .resizing .splitter::before { background: var(--accent); height: 120px; }
.ib-tools { position: absolute; right: 8px; top: 8px; z-index: 3; display: flex; gap: 4px; }
.ib-tools button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.25); color: #fff; cursor: pointer; font-size: .9rem; }
.ib-tools button:hover { background: rgba(0,0,0,.45); }
.ib-head { position: relative; }
@media (max-width: 1080px) { .wiki-layout { grid-template-columns: 1fr; } .splitter, .ib-tools { display: none; } .infobox { position: static !important; max-height: none !important; order: -1; } }
.infobox { position: sticky; top: 64px; max-height: calc(100vh - 76px); overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--sheet); box-shadow: var(--shadow); scrollbar-width: thin; }
.ib-head { padding: 10px 14px; text-align: center; background: linear-gradient(135deg, var(--c1, var(--ib, #4caf6a)), var(--c2, var(--ib, #4caf6a))); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.ib-head small { display: block; font-size: .75rem; opacity: .9; } .ib-head b { font: 700 1.35rem var(--serif); }
.ib-sec { background: var(--th); font-weight: 700; text-align: center; padding: 6px; font-size: .85rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ib-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.ib-table th { text-align: right; width: 42%; color: var(--muted); font-weight: 600; padding: 6px 10px; background: var(--soft); border-bottom: 1px solid var(--line); vertical-align: top; }
.ib-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); }
.ib-table em { color: var(--muted); font-size: .8em; }
.ib-conn { display: grid; justify-items: center; gap: 2px; padding: 10px; font-size: .9rem; }
.ib-conn b { padding: 2px 10px; background: var(--th); border-radius: 6px; }
.toc { display: inline-block; min-width: 260px; margin: 8px 0 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); padding: 4px 16px 6px 12px; font-size: .9rem; }
.toc summary { font-weight: 700; cursor: pointer; padding: 6px 0; }
.toc ol { margin: 0 0 4px; padding-left: 22px; counter-reset: toc; list-style: none; }
.toc li { counter-increment: toc; } .toc li::before { content: counters(toc, ".") ". "; color: var(--muted); font-variant-numeric: tabular-nums; }
.toc ol ol { padding-left: 18px; font-size: .86rem; }

/* Tableaux façon wiki */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; }
.wiki-table { border: 1px solid var(--line); border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: .9rem; min-width: 60%; }
.wiki-table th { background: var(--th); text-align: left; padding: 7px 10px; font-size: .78rem; font-weight: 700; border-bottom: 1px solid var(--line); }
.wiki-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.wiki-table tr:last-child td { border-bottom: 0; }
.wiki-table tr.sub th { background: var(--sub); text-align: center; font-size: .82rem; }
.wiki-table tr.sub small { font-weight: 500; color: var(--muted); }
.wiki-table td.n { text-align: right; font-family: var(--mono); font-size: .82rem; white-space: nowrap; }
.wiki-table td.mon { white-space: nowrap; font-weight: 600; }
.wiki-table td.mon img { width: 40px; height: 40px; vertical-align: middle; margin: -8px 4px -8px -4px; image-rendering: pixelated; }
.wiki-table td.games { white-space: nowrap; }
[data-atlas] { cursor: pointer; transition: background .15s; }
tr[data-atlas]:hover td, li[data-atlas]:hover { background: var(--soft); }
.wiki-table tr.hl td, .trainer.hl, li.hl { background: var(--hl) !important; }
.dex th { width: 32%; vertical-align: top; } .dex td { font-size: .9rem; }
.stats { min-width: 0; width: 100%; max-width: 560px; } .stats th { background: transparent; border: 0; font-size: .85rem; width: 110px; }
.stats td { border: 0; padding: 4px 8px; } .stats td.bar { width: 100%; }
.stats i { display: block; height: 10px; border-radius: 99px; background: var(--line); position: relative; overflow: hidden; }
.stats i::after { content: ""; position: absolute; inset: 0; width: calc(var(--v) * 100%); border-radius: inherit; background: #f59e0b; animation: grow .9s cubic-bezier(.2,.8,.2,1); transform-origin: left; }
.stats i.lo::after { background: #ef4444; } .stats i.hi::after { background: #22c55e; }
.stats tr.total th, .stats tr.total td { border-top: 1px solid var(--line); font-weight: 700; }
@keyframes grow { from { transform: scaleX(0); } }
.abil { padding-left: 18px; } .abil li { margin: 4px 0; } .abil em { color: var(--muted); font-size: .85em; }
.paths { list-style: none; padding: 0; } .paths li { margin: 6px 0; }
.path-btn { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; cursor: pointer; font-size: .7rem; vertical-align: middle; margin-right: 6px; }
.people { padding-left: 0; list-style: none; } .people li { padding: 4px 6px; border-radius: 6px; } .people code { font-family: var(--mono); font-size: .76rem; color: var(--muted); margin-right: 6px; }

/* Dresseurs */
.trainers { display: grid; gap: 10px; }
.trainer { display: grid; grid-template-columns: 210px 1fr; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.tr-id { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 10px; background: var(--soft); border-right: 1px solid var(--line); }
.tr-id img { width: 80px; height: 80px; image-rendering: pixelated; object-fit: contain; }
.tr-id span { font-size: .78rem; color: var(--muted); }
.tr-btns { display: flex; gap: 6px; margin-top: 6px; }
.party { list-style: none; margin: 0; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-content: center; }
.party li { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: .9rem; }
.party img { width: 48px; height: 48px; image-rendering: pixelated; } .party small { color: var(--muted); font-weight: 500; }
@media (max-width: 640px) { .trainer { grid-template-columns: 1fr; } .tr-id { border-right: 0; border-bottom: 1px solid var(--line); } }

/* Carte (dans l'encadré) */
.map-box .vtabs { display: flex; gap: 4px; padding: 8px 8px 0; }
.vtab { flex: 1; font: 700 .8rem var(--font); border: 1px solid var(--line); background: var(--soft); color: var(--ink); border-radius: 9px 9px 0 0; padding: 7px 6px; cursor: pointer; }
.vtab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.atlas-stage { position: relative; height: var(--map-h, min(56vh, 600px)); min-height: 260px; background: #0b0e14; touch-action: none; overflow: hidden; }
.map-grip { height: 12px; cursor: row-resize; display: grid; place-items: center; background: var(--soft); border-top: 1px solid var(--line); touch-action: none; }
.map-grip::before { content: ""; width: 48px; height: 4px; border-radius: 99px; background: var(--line); }
.map-grip:hover::before { background: var(--accent); }
.atlas-stage:fullscreen { height: 100vh; }
.atlas-stage canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.atlas-stage canvas.dragging { cursor: grabbing; } .atlas-stage canvas.pointer { cursor: pointer; }
.atlas-tools { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 5px; }
.atlas-tools button { width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255,255,255,.15); background: rgba(15,20,30,.75); color: #fff; font-size: 1.05rem; cursor: pointer; }
.atlas-coords { position: absolute; left: 10px; bottom: 10px; font: 500 .72rem var(--mono); color: #fff; background: rgba(15,20,30,.75); padding: 3px 8px; border-radius: 7px; pointer-events: none; }
.atlas-coords:empty { display: none; }
.atlas-tip { position: absolute; pointer-events: none; background: rgba(15,20,30,.92); color: #fff; font-size: .78rem; font-weight: 600; padding: 4px 8px; border-radius: 7px; transform: translate(-50%, calc(-100% - 12px)); white-space: nowrap; z-index: 2; }
.layer-toggles { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 12px; font-size: .8rem; border-bottom: 1px solid var(--line); align-items: center; }
.layer-toggles label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.layer-toggles select { margin-left: auto; font: inherit; padding: 2px 6px; border-radius: 7px; border: 1px solid var(--line); background: var(--soft); color: var(--ink); }
.panel { padding: 10px 14px; font-size: .86rem; min-height: 64px; }
.panel h4 { font: 700 1rem var(--font); margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.panel .sprite-prev { image-rendering: pixelated; background-repeat: no-repeat; flex: none; }
.panel .kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 6px 0; } .panel .kv dt { color: var(--muted); } .panel .kv dd { margin: 0; }
.panel table { width: 100%; font-size: .82rem; } .panel td { padding: 2px 4px; border-bottom: 1px solid var(--line); }
.panel td img { width: 36px; height: 36px; vertical-align: middle; image-rendering: pixelated; margin: -6px 0; }
.panel td.pct { white-space: nowrap; font-family: var(--mono); text-align: right; }
.panel p { margin: 4px 0; }

/* Combat */
.battle { position: absolute; inset: 0; z-index: 5; overflow: hidden; font-family: var(--font); }
.battle .wipe { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(8, 1fr); }
.battle .wipe i { background: #000; transform: scaleX(0); animation: wipe .45s ease-in forwards; }
.battle .wipe i:nth-child(odd) { transform-origin: left; } .battle .wipe i:nth-child(even) { transform-origin: right; }
@keyframes wipe { to { transform: scaleX(1); } }
.battle .scene { position: absolute; inset: 0; opacity: 0; animation: fadein .3s .5s forwards; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #cfe9ff 0%, #eaf7e3 55%, #b9dfa1 100%); }
.battle.gen1 .scene { background: #e0f8d0; }
.battle .field { position: relative; flex: 1; }
.battle .plat { position: absolute; width: 46%; height: 16%; border-radius: 50%; background: radial-gradient(ellipse at center, #9ccf7a 0%, #7fb35d 60%, transparent 62%); }
.battle.gen1 .plat { background: radial-gradient(ellipse at center, #88c070 0%, #88c070 58%, transparent 60%); }
.battle .plat.foe { right: 6%; top: 34%; } .battle .plat.me { left: 4%; bottom: 4%; }
.battle .foe-pic { position: absolute; right: 12%; top: 6%; width: 34%; max-width: 160px; image-rendering: pixelated; animation: slidein .7s .7s both cubic-bezier(.2,.8,.2,1); }
.battle .me-pic { position: absolute; left: 10%; bottom: 8%; width: 30%; max-width: 140px; image-rendering: pixelated; animation: slideinl .7s .7s both cubic-bezier(.2,.8,.2,1); }
@keyframes slidein { from { transform: translateX(160%); } } @keyframes slideinl { from { transform: translateX(-160%); } }
@keyframes fadein { to { opacity: 1; } }
.battle .balls { position: absolute; right: 8%; top: 4%; display: flex; gap: 4px; padding: 4px 8px; background: rgba(0,0,0,.5); border-radius: 99px; animation: fadein .3s 1.3s both; }
.battle .balls i { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(#e44 50%, #fff 50%); border: 1.5px solid #222; }
.battle .team { position: absolute; left: 4%; right: 4%; top: 52%; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.battle .team div { background: rgba(255,255,255,.88); border-radius: 10px; padding: 2px 8px 4px; text-align: center; font: 600 .72rem var(--font); color: #222; opacity: 0; animation: pop .35s both; }
.battle .team img { width: 56px; height: 56px; display: block; margin: 0 auto -4px; image-rendering: pixelated; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.8); } to { opacity: 1; transform: none; } }
.battle .box { margin: 0 8px 8px; padding: 10px 14px; background: #fff; color: #222; border: 3px solid #3a4a5c; border-radius: 10px; font: 600 .9rem var(--font); min-height: 58px; box-shadow: inset 0 0 0 2px #c8d6e5; }
.battle.gen1 .box { border-radius: 2px; border-color: #081820; box-shadow: none; font-family: var(--mono); font-size: .8rem; text-transform: uppercase; background: #e0f8d0; }
.battle .bbtns { position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; }
.battle .bbtns button { font: 700 .75rem var(--font); border: 0; border-radius: 7px; padding: 5px 10px; background: rgba(15,20,30,.8); color: #fff; cursor: pointer; }

/* Pokémon : navigation et encadré */
.mon-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px; margin-bottom: 10px; font-size: .88rem; }
.mon-nav a { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.mon-nav .next { justify-content: flex-end; text-align: right; }
.mon-nav img { width: 56px; height: 56px; image-rendering: pixelated; }
.mon-nav b { display: block; color: var(--link); } .mon-nav small { color: var(--muted); font-family: var(--mono); }
.mon-nav .cur { text-align: center; } .mon-nav .cur b { color: var(--ink); }
.viewer { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); }
.viewer .stage { position: relative; aspect-ratio: 16 / 10; min-height: 220px; max-height: 62vh; display: grid; place-items: center; border-radius: 12px; overflow: hidden;
  background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--c1) 35%, transparent), transparent 65%), var(--soft); }
.viewer .stage img { max-width: 78%; max-height: 84%; object-fit: contain; position: relative; z-index: 1; transform-origin: 50% 90%; }
.viewer .stage img.px { min-width: 45%; min-height: 60%; object-fit: contain; }
.viewer .stage img.idle { animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: translateY(-5px) scaleY(1.025) scaleX(.985); } }
.viewer .stage img.lunge { animation: lunge .5s cubic-bezier(.3,.1,.3,1); }
@keyframes lunge { 30% { transform: translateX(-14px) scale(.97); } 55% { transform: translateX(26px) scale(1.06); } 100% { transform: none; } }
.viewer .stage img.charge { animation: charge .6s ease-in-out; }
@keyframes charge { 40% { transform: scale(1.06); filter: brightness(1.5) drop-shadow(0 0 14px var(--fx, #fff)); } 100% { transform: none; } }
.viewer .stage img.shake { animation: shake .4s; } @keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.viewer .fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; image-rendering: pixelated; }
.viewer .stage img { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.viewer .stage.attacking img { translate: -22% 0; }
.viewer .stage .target { position: absolute; right: 9%; top: 50%; width: 22%; aspect-ratio: 1; border-radius: 50%; translate: 0 -50%; border: 2px dashed color-mix(in srgb, var(--muted) 45%, transparent); opacity: 0; transition: opacity .3s; z-index: 1; }
.viewer .stage.attacking .target { opacity: 1; }
/* 1re génération : écran vert Game Boy */
.viewer .stage.gen1 { background: #e0f8d0; }
.viewer .stage.gen1 img { filter: grayscale(1) sepia(1) hue-rotate(45deg) saturate(1.7) brightness(.82) contrast(1.35); } .viewer .stage.gen1 .target { border-color: #88c070; }
.viewer .stage.gen2, .viewer .stage.gen3 { background: radial-gradient(circle at 50% 75%, #c8e6b0, #f4f8ec 70%); }
:root[data-theme="dark"] .viewer .stage.gen2, :root[data-theme="dark"] .viewer .stage.gen3 { background: radial-gradient(circle at 50% 75%, #3c5a34, #1b212b 70%); }
.learnset tr[data-move] { cursor: pointer; }
.learnset tr[data-move]:hover td { background: var(--soft); }
.learnset tr.playing td { background: var(--hl) !important; }
.learnset tr[data-move] td:first-child { position: relative; }
.learnset tr[data-move]:hover td:last-child::after { content: " ▶"; color: var(--accent); }
.move-banner { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 3; background: rgba(15,20,30,.85); color: #fff; font: 700 .85rem var(--font); padding: 4px 12px; border-radius: 99px; white-space: nowrap; animation: pop .25s both; }
.viewer-bar { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; align-items: center; }
.viewer-bar select { flex: 1; min-width: 0; font: 600 .8rem var(--font); padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--soft); color: var(--ink); }
.shiny-on .viewer .stage img { filter: drop-shadow(0 0 10px rgba(255, 220, 90, .6)); }
.cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 12px 0; padding: 12px 16px; border-radius: 12px; background: linear-gradient(120deg, #1e293b, #312e81); color: #fff; }
.cta.tool { background: linear-gradient(120deg, #7c2d12, #be123c); }
.cta small { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; opacity: .7; font-size: .66rem; display: block; }
.cta p { margin: 2px 0 0; opacity: .85; font-size: .88rem; }
.btn { white-space: nowrap; background: #fff; color: #111; font-weight: 700; padding: 8px 14px; border-radius: 10px; font-size: .85rem; } .btn.disabled { opacity: .7; }
.evo { overflow-x: auto; padding-bottom: 6px; }
.evo-node { display: flex; align-items: center; } .evo-kids { display: flex; flex-direction: column; gap: 10px; } .evo-branch { display: flex; align-items: center; }
.evo-arrow { font-size: .76rem; color: var(--muted); min-width: 110px; text-align: center; padding: 0 8px; }
.evo-arrow::after { content: "→"; display: block; font-size: 1.3rem; color: var(--ink); }
.evo-card { display: flex; flex-direction: column; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid transparent; min-width: 112px; color: var(--link); }
.evo-card:hover, .evo-card.current { border-color: var(--line); background: var(--soft); text-decoration: none; }
.evo-card img { width: 92px; height: 92px; } .evo-card span { font: .74rem var(--mono); color: var(--muted); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.gallery figure { margin: 0; text-align: center; border: 1px solid var(--line); border-radius: 10px; padding: 8px 4px; background: var(--soft); }
.gallery img { height: 92px; width: auto; object-fit: contain; } .gallery figcaption { font-size: .7rem; color: var(--muted); line-height: 1.3; }
.ls-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.ls-tabs .g { width: 100%; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 4px; }
.ls-tabs .chip { font-size: .75rem; padding: 3px 9px; }
.learnset table { width: 100%; }
.cat { display: inline-block; width: 24px; height: 14px; border-radius: 4px; vertical-align: middle; } .cat-1 { background: #9aa3b2; } .cat-2 { background: #e2683c; } .cat-3 { background: #5b7cf2; }

/* Roue des cartes du JCC */
.wheel { position: relative; padding: 12px 0 10px; }
.wheel-track { position: relative; height: 300px; perspective: 1000px; touch-action: pan-y; user-select: none; cursor: grab; }
.wheel-track.dragging { cursor: grabbing; }
.wcard { position: absolute; left: 50%; top: 8px; width: 190px; aspect-ratio: 63 / 88; margin-left: -95px; border-radius: 4.5% / 3.3%; transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .4s, filter .4s; transform-style: preserve-3d; background: #222; box-shadow: 0 10px 26px rgba(0,0,0,.35); overflow: hidden; }
.wcard img { width: 100%; height: 100%; display: block; border-radius: inherit; pointer-events: none; }
.wcard .holo, .wcard .glitter { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: color-dodge; }
.wcard .holo { opacity: .55; background: linear-gradient(115deg, transparent 20%, rgba(255,0,170,.45) 35%, rgba(0,230,255,.45) 48%, rgba(255,245,0,.45) 60%, transparent 76%);
  background-size: 260% 260%; background-position: var(--mx, 50%) var(--my, 50%); }
.wcard .glitter { opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 9 -6.2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
  radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.85), transparent 42%);
  background-size: 120px 120px, 100% 100%; background-position: calc(var(--mx, 50%) * .4) calc(var(--my, 50%) * .4), center; }
.wcard:not(.front) .holo, .wcard:not(.front) .glitter { opacity: 0; }
.wheel-meta { text-align: center; font-size: .8rem; margin-top: 6px; min-height: 2.6em; } .wheel-meta b { display: block; }
.wheel-nav { display: flex; justify-content: center; align-items: center; gap: 12px; font: .78rem var(--mono); color: var(--muted); }
.wheel-nav button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--soft); color: var(--ink); cursor: pointer; }
.tcg-zoom { position: fixed; inset: 0; background: rgba(5,8,15,.85); display: grid; place-items: center; z-index: 100; perspective: 1200px; cursor: zoom-out; }
.tcg-zoom .wcard { position: relative; left: auto; top: auto; margin: 0; width: min(420px, 80vw); }

/* Listes et accueil */
.filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dex-filter { margin-left: auto; padding: 6px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--soft); color: var(--ink); font: inherit; }
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 16px; }
.dex-card { border: 1px solid var(--line); border-radius: 12px; padding: 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--ink); text-decoration: none !important; background: var(--sheet); transition: transform .15s, box-shadow .15s; }
.dex-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.dex-card img { image-rendering: pixelated; } .dex-card .num { font: 500 .72rem var(--mono); color: var(--muted); }
.dex-card .types { display: flex; gap: 2px; margin-top: 3px; } .dex-card .type { font-size: .56rem; padding: 1px 5px; }
.places { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.place { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; color: var(--ink); text-decoration: none !important; }
.place img { height: 130px; object-fit: cover; object-position: top; image-rendering: pixelated; }
.place b { padding: 8px 12px 0; } .place span { padding: 2px 12px 10px; }
.home-hero { text-align: center; padding: 20px 0 0; }
.home-hero h1 { font: 600 clamp(1.5rem, 3.6vw, 2.4rem)/1.2 var(--serif); max-width: 780px; margin: 0 auto 16px; }
.strip { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; } .strip img { width: 92px; height: 92px; transition: transform .2s; } .strip a:hover img { transform: translateY(-6px); }
.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 24px 0; }
.tile { display: block; color: var(--ink); text-decoration: none !important; border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: var(--soft); }
.tile:hover { border-color: var(--muted); } .tile h2 { margin: 0 0 6px; font: 600 1.3rem var(--serif); border: 0; } .tile p { margin: 0; color: var(--muted); }
.tile h2 small { font: 700 .66rem var(--font); color: var(--accent); text-transform: uppercase; }
tr.go { cursor: pointer; } tr.go:hover td { background: var(--soft); } tr.go td:last-child::after { content: "  ↗"; color: var(--muted); }
.langs { display: flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.langs a { font: 700 .76rem var(--font); color: var(--muted); padding: 5px 9px; text-decoration: none !important; }
.langs a.on { background: var(--ink); color: var(--sheet); }
.langs a:hover:not(.on) { background: var(--soft); color: var(--ink); }
/* Lien calculateur dans les tableaux d'attaques */
.learnset td.calc a { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); text-decoration: none; font-size: .8rem; }
.learnset td.calc a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.learnset tr[data-move]:hover td:last-child::after { content: none; }
/* Calculateurs */
.tool { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 20px; align-items: start; margin-top: 12px; }
@media (max-width: 980px) { .tool { grid-template-columns: 1fr; } }
.tool-form { display: grid; gap: 12px; }
.tool-form .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.tool-form label { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; font-weight: 600; color: var(--muted); min-width: 90px; }
.tool-form label.wide { flex: 1; min-width: 200px; }
.tool-form label.chk { flex-direction: row; align-items: center; gap: 6px; color: var(--ink); min-width: 0; }
.tool-form input, .tool-form select { font: 500 .9rem var(--font); color: var(--ink); background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.tool-form input[type=range] { padding: 0; accent-color: var(--accent); }
.sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
@media (max-width: 640px) { .sides { grid-template-columns: 1fr; } }
.side { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 12px; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.side legend { font: 700 .85rem var(--font); padding: 0 6px; }
.side label { min-width: 70px; flex: 1; } .side label.wide { flex-basis: 100%; }
.result { position: sticky; top: 70px; margin: 0; }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; text-align: center; }
.vs.single { grid-template-columns: 1fr 1fr; }
.vs figure { margin: 0; } .vs img { width: 120px; height: 120px; object-fit: contain; } .vs figcaption { font-weight: 700; }
.vs-mid { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .85rem; } .vs-mid small { color: var(--muted); } .vs-mid em { color: var(--accent); font-style: normal; font-weight: 700; }
.hpbar { position: relative; height: 16px; border-radius: 99px; background: #e5484d33; overflow: hidden; margin: 14px 0 6px; display: flex; }
.hpbar .rest { background: #22c55e; } .hpbar .band { background: repeating-linear-gradient(45deg, #f59e0b, #f59e0b 6px, #fbbf24 6px, #fbbf24 12px); }
.result .big { font: 700 1.6rem var(--serif); margin: 6px 0 2px; text-align: center; } .result .big span { font: 500 .95rem var(--font); color: var(--muted); }
.result .ko { text-align: center; font-weight: 700; margin: 0 0 10px; }
.result details { font-size: .85rem; } .result .mono { font-family: var(--mono); font-size: .78rem; word-break: break-word; }
.cbars { display: grid; gap: 6px; margin: 10px 0; }
.cbar { display: grid; grid-template-columns: 44px 1fr 70px; align-items: center; gap: 8px; font-size: .82rem; }
.cbar i { height: 10px; border-radius: 99px; background: var(--line); position: relative; overflow: hidden; }
.cbar i::after { content: ""; position: absolute; inset: 0; width: calc(var(--v) * 100%); background: var(--accent); border-radius: inherit; }
.cbar b { font-family: var(--mono); text-align: right; font-size: .78rem; }
.ib-table a { white-space: nowrap; }
/* Énigmes */
.pz-bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; } .pz-bar i { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.try-row { display: flex; flex-wrap: wrap; gap: 6px; }
/* Sélection plus lisible : la ligne ou la carte choisie grossit un peu */
.wiki-table tr td { transition: font-size .2s, padding .2s, background .2s; }
.wiki-table tr.hl td { font-size: 1.06rem; font-weight: 600; padding-top: 10px; padding-bottom: 10px; }
.wiki-table tr.hl td.mon img { width: 52px; height: 52px; margin: -12px 4px -12px -6px; transition: width .2s, height .2s; }
.wiki-table tr.hl td .gb { transform: scale(1.12); }
.trainer { transition: transform .2s, box-shadow .2s; }
.trainer.hl { transform: scale(1.025); box-shadow: 0 8px 24px rgba(0,0,0,.18); position: relative; z-index: 1; }
.trainer.hl .party img { width: 56px; height: 56px; }
li.hl { font-size: 1.04rem; font-weight: 600; }
/* Lignes de rencontres habillées selon la version et la zone (couleur douce + petites tuiles du jeu) */
.enc-row { --encc: #7ac74c; }
.enc-row.v-rb { --encc: #88c070; } .enc-row.v-frlg { --encc: #58b848; } .enc-row.v-e { --encc: #48a860; }
.enc-row.enc-surf, .enc-row.enc-old_rod, .enc-row.enc-good_rod, .enc-row.enc-super_rod { --encc: #5a9be8; }
.enc-row.enc-cave { --encc: #a77c4f; }
.enc-row td { background: color-mix(in srgb, var(--encc) 13%, var(--sheet)); }
tr.enc-row:hover td { background: color-mix(in srgb, var(--encc) 22%, var(--sheet)); }
.enc-row .deco { display: inline-block; width: 18px; height: 18px; background: var(--deco) center / contain no-repeat; image-rendering: pixelated; vertical-align: middle; opacity: .9; margin: -4px 6px -4px 0; transform-origin: 50% 100%; }
.enc-row td:last-child .deco { margin: -4px 0 -4px 8px; }
/* 3e génération : les herbes bougent doucement, comme en jeu */
.enc-row.enc-grass:not(.v-rb) .deco { animation: sway 3.4s ease-in-out infinite; }
.enc-row.enc-grass:not(.v-rb) td:last-child .deco { animation-delay: -1.7s; }
@keyframes sway { 0%, 100% { transform: skewX(0); } 50% { transform: skewX(-7deg) scaleY(.97); } }
@media (prefers-reduced-motion: reduce) { .enc-row .deco { animation: none !important; } }
/* Attaques : teinte pâle du type */
.learnset tr.tint td { background: color-mix(in srgb, var(--tc) 10%, var(--sheet)); }
.learnset tr.tint:hover td { background: color-mix(in srgb, var(--tc) 20%, var(--sheet)); }
/* --- Lignes de rencontres, version 2 : fond franchement coloré + herbe « plantée » (sprite du jeu) --- */
.enc-row.v-rb { --encc: #9bbc0f; } .enc-row.v-frlg { --encc: #4cbf4c; } .enc-row.v-e { --encc: #2fae66; }
.enc-row.enc-surf, .enc-row.enc-old_rod, .enc-row.enc-good_rod, .enc-row.enc-super_rod { --encc: #3a8ee8; }
.enc-row.enc-cave { --encc: #b9804a; }
.enc-row { background: linear-gradient(90deg, color-mix(in srgb, var(--encc) 46%, var(--sheet)) 0%, color-mix(in srgb, var(--encc) 24%, var(--sheet)) 55%, color-mix(in srgb, var(--encc) 34%, var(--sheet)) 100%); }
.enc-row td, tr.enc-row:hover td { background: none; }
tr.enc-row:hover { filter: saturate(1.25) brightness(1.04); }
.wiki-table tr.enc-row.hl td { background: color-mix(in srgb, var(--hl) 70%, transparent) !important; }
/* L'herbe pousse depuis le bas de la ligne : sprite transparent, posé sur le bord */
.enc-row.fx td:first-child { position: relative; padding-left: 52px; }
.enc-row.fx td:last-child { position: relative; padding-right: 40px; }
.enc-row.fx .deco { position: absolute; bottom: 0; left: 6px; width: 26px; height: 26px; margin: 0; opacity: 1; animation: none;
  background: var(--fx) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; transform: none; }
.enc-row.fx .deco.d2 { left: 26px; width: 20px; height: 20px; }
.enc-row.fx td:last-child .deco { left: auto; right: 8px; }
/* 3e génération : sAnim_TallGrass = images 1, 2, 3, 4 puis 0, 10 images de jeu (1/6 s) chacune */
.enc-row.fx-anim .deco { background-size: 500% 100%; animation: tallgrass 3.6s step-end infinite; }
@keyframes tallgrass { 0% { background-position: 25% 0; } 4.63% { background-position: 50% 0; } 9.26% { background-position: 75% 0; } 13.89% { background-position: 100% 0; } 18.52%, 100% { background-position: 0 0; } }
.enc-row.fx-anim .deco.d2 { animation-delay: -1.3s; }
.enc-row.fx-anim td:last-child .deco { animation-delay: -2.4s; }
.enc-row.fx-anim:nth-child(3n+1) .deco { animation-duration: 4.1s; } .enc-row.fx-anim:nth-child(3n+2) .deco { animation-duration: 3.2s; }
@media (prefers-reduced-motion: reduce) { .enc-row.fx-anim .deco { animation: none; } }
.enc-row.fx .deco { width: 32px; height: 32px; bottom: -1px; left: 4px; }
.enc-row.fx .deco.d2 { left: 28px; width: 24px; height: 24px; }
.enc-row.fx td:first-child { padding-left: 58px; }
.enc-row.enc-grass.fx-anim .deco { animation-name: tallgrass; animation-timing-function: step-end; animation-iteration-count: infinite; }
.enc-row.enc-grass.fx:not(.fx-anim) .deco { animation: none; }
.table-wrap > table.enc, .table-wrap > table.wiki-table { width: max-content; min-width: 100%; }
/* --- Lignes de rencontres, version 3 : le fond reprend la vraie tuile de la zone (herbe, eau, grotte),
       adoucie au milieu pour le texte ; touffes d'herbe du jeu plantées au début et à la fin --- */
.enc-row { image-rendering: pixelated;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sheet) 8%, transparent) 0%, color-mix(in srgb, var(--sheet) 70%, transparent) 20%,
              color-mix(in srgb, var(--sheet) 74%, transparent) 78%, color-mix(in srgb, var(--sheet) 12%, transparent) 100%),
              var(--deco) 0 0 / 32px 32px repeat; }
.enc-row td { text-shadow: 0 0 3px var(--sheet), 0 0 1px var(--sheet); }
.enc-row:not(.fx) .deco { display: none; }
.enc-row:not(.fx) td:first-child { padding-left: 16px; }
.enc-row.fx .deco, .enc-row.enc-grass.fx .deco { position: absolute; bottom: -1px; left: 6px; width: 32px; height: 32px; margin: 0; opacity: 1;
  background: var(--tuft) center bottom / 100% 100% no-repeat; animation: none; transform: none; }
.enc-row.fx .deco.d2 { left: 30px; width: 26px; height: 26px; }
.enc-row.fx td:last-child .deco { left: auto; right: 6px; }
.enc-row.fx td:first-child { padding-left: 62px; }
.enc-row.fx td:last-child { padding-right: 44px; }
/* 3e génération : bruissement du jeu par-dessus la touffe (images 1-2-3-4, 1/6 s chacune, puis rien) */
.enc-row.fx-anim .deco::after { content: ""; position: absolute; inset: 0; background: var(--rustle) 0 0 / 500% 100% no-repeat;
  animation: rustle 3.6s step-end infinite; }
@keyframes rustle { 0% { background-position: 0 0; } 4.63% { background-position: 25% 0; } 9.26% { background-position: 50% 0; }
  13.89% { background-position: 75% 0; } 18.52%, 100% { background-position: 100% 0; } }
.enc-row.fx-anim .deco.d2::after { animation-delay: -1.3s; }
.enc-row.fx-anim td:last-child .deco::after { animation-delay: -2.4s; }
.enc-row.fx-anim:nth-child(3n+1) .deco::after { animation-duration: 4.1s; }
.enc-row.fx-anim:nth-child(3n+2) .deco::after { animation-duration: 3.1s; }
@media (prefers-reduced-motion: reduce) { .enc-row.fx-anim .deco::after { animation: none; background-position: 100% 0; } }
/* Adoucissement case par case (le fond de ligne est peint par cellule) : la tuile reste bien visible sur les bords */
.enc-row { background: var(--deco) 0 0 / 32px 32px repeat; }
.enc-row td, tr.enc-row:hover td { background: color-mix(in srgb, var(--sheet) 66%, transparent); }
.enc-row td:first-child { background: linear-gradient(90deg, color-mix(in srgb, var(--sheet) 0%, transparent) 0, color-mix(in srgb, var(--sheet) 66%, transparent) 64px); }
.enc-row td:last-child { background: linear-gradient(270deg, color-mix(in srgb, var(--sheet) 0%, transparent) 0, color-mix(in srgb, var(--sheet) 66%, transparent) 50px); }
tr.enc-row:hover td { background-color: color-mix(in srgb, var(--sheet) 52%, transparent); }
/* Herbes : le fond est le sol vert de la route (l'herbe rase autour des herbes hautes), les touffes y sont plantées */
.enc-row.fx { background: var(--ground) 0 0 / 32px 32px repeat; }
.enc-row.fx td, tr.enc-row.fx:hover td { background: color-mix(in srgb, var(--sheet) 38%, transparent); }
.enc-row.fx td:first-child { background: linear-gradient(90deg, transparent 0, transparent 56px, color-mix(in srgb, var(--sheet) 38%, transparent) 76px); }
.enc-row.fx td:last-child { background: linear-gradient(270deg, transparent 0, transparent 34px, color-mix(in srgb, var(--sheet) 38%, transparent) 52px); }
tr.enc-row.fx:hover td { background-color: transparent; }
.enc-row.fx td a { font-weight: 700; }
/* Une fleur de la route, semée de temps en temps (la fleur du jeu, sol retiré autour) */
.enc-row.fx.has-flower:nth-child(3n+1) td:nth-child(3), .enc-row.fx.has-flower:nth-child(3n) td:nth-child(4) { position: relative; padding-right: 36px; }
.enc-row.fx.has-flower:nth-child(3n+1) td:nth-child(3)::after, .enc-row.fx.has-flower:nth-child(3n) td:nth-child(4)::after {
  content: ""; position: absolute; right: 4px; bottom: 0; width: 26px; height: 26px; background: var(--flower) center bottom / 100% 100% no-repeat; image-rendering: pixelated; }
/* Image de la fiche : centrée dans le cadre quelle que soit sa taille */
.viewer .stage img { position: absolute; inset: 0; margin: auto; max-width: 78%; max-height: 84%; width: auto; height: auto; object-fit: contain; }
.viewer .stage img.px { min-width: 0; min-height: 0; width: 62%; height: 74%; }
/* Sprites recadrés (vide retiré) : un peu plus grands, pixels nets */
.wiki-table td.mon img { width: 44px; height: 44px; object-fit: contain; margin: -10px 6px -10px -2px; }
.wiki-table tr.hl td.mon img { width: 54px; height: 54px; margin: -14px 6px -14px -4px; }
.party img { width: 52px; height: 52px; object-fit: contain; }
.panel td img { width: 40px; height: 40px; object-fit: contain; }
.battle .team img { width: 60px; height: 60px; object-fit: contain; }
.dex-card img { object-fit: contain; }
img.crop { image-rendering: pixelated; }
.mon-nav img { width: 48px; height: 48px; object-fit: contain; }
.viewer .stage img.crop:not(.px) { image-rendering: auto; }

/* Atlas complet : régions > lieux > cartes */
.region-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 18px; }
.region-nav a { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; }
.loc-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; align-items: start; }
.loc { display: flex; flex-direction: column; gap: 6px; }
.loc .place img { image-rendering: auto; background: var(--soft, #0001); }
.loc ul { margin: 0; padding: 0 0 0 14px; font-size: .86em; columns: 1; }
.loc li { margin: 1px 0; }
.exits { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 14px; }
.exits li { padding: 3px 6px; border-radius: 6px; cursor: default; }
.exits li[data-atlas] { cursor: pointer; }
.exits code { font-size: .8em; color: var(--muted); margin-right: 4px; }
.exits .dir { display: inline-block; min-width: 3.5em; font-weight: 600; color: var(--muted); }

/* Fiche 3e génération : ce qui a changé depuis est surligné */
.wiki-table.g3 th { width: 34%; text-align: left; }
.wiki-table.g3 tr.chg td, .g3-stats .chg { background: color-mix(in srgb, #f2b33d 22%, transparent); border-radius: 4px; }
.g3-stats { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.g3-stats span { padding: 0 4px; white-space: nowrap; }

/* Surf et cannes : une allée d'eau entière (la tuile d'eau libre de la carte), voile léger pour le texte */
.enc-row.wfx { background: var(--water) 0 0 / 32px 32px repeat; }
.enc-row.wfx td, .enc-row.wfx td:first-child, .enc-row.wfx td:last-child, tr.enc-row.wfx:hover td {
  background: color-mix(in srgb, var(--sheet) 28%, transparent); }
tr.enc-row.wfx:hover td { background: color-mix(in srgb, var(--sheet) 14%, transparent); }
.enc-row.wfx td a { font-weight: 700; }
/* Cannes : le joueur du jeu en train de pêcher, à gauche, la ligne tendue vers l'eau */
.enc-row.wfx.rod td:first-child { position: relative; padding-left: 74px; }
.enc-row.wfx .fish { position: absolute; left: 4px; bottom: 1px; width: 66px; height: 30px; pointer-events: none;
  background: var(--fish) left bottom / auto 100% no-repeat; image-rendering: pixelated; }
.enc-row.wfx.v-rb .fish { height: 26px; bottom: 3px; }

.enc-row.v-rs { --encc: #c4283c; }

/* « Où le trouver » : une section par jeu */
tr.game-head th { text-align: left; background: var(--soft); font-size: .95em; padding: 8px 10px; }
tr.game-head .gb { margin-right: 6px; }
/* Rival : une équipe par starter choisi */
.party li.variant { display: block; width: 100%; margin: 4px 0; }
.party li.variant > ul.party { margin-top: 4px; }
.party li.note { display: block; width: 100%; font-size: .85em; color: var(--muted); }
/* Pages objets / attaques */
.wiki-table.flav th { width: 32%; text-align: left; font-weight: 600; font-size: .9em; }
.wiki-table.bygen td.chg, .wiki-table.bygen td.chg .type { outline: 2px solid color-mix(in srgb, #f2b33d 70%, transparent); outline-offset: -2px; }
.item-grid, .mon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.item-grid a, .mon-grid a { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; font-size: .9em; }
.item-grid img, .mon-grid img { width: 32px; height: 32px; image-rendering: pixelated; object-fit: contain; }
.mini-mon { display: inline-flex; align-items: center; gap: 2px; margin: 2px 8px 2px 0; }
.mini-mon img { width: 32px; height: 32px; image-rendering: pixelated; }
.ib-img img.big { width: 96px; height: 96px; image-rendering: pixelated; object-fit: contain; }
a.mv-link { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }

/* Fonds des rencontres, version 4 (demandée) : une étendue unie du terrain — eau libre, sol de grotte, sable —
   prise au milieu d'une zone uniforme de la carte ; icône à gauche seulement quand elle a un sens */
.enc-row:not(.fx):not(.wfx):not(.lfx) { background: none; }
.enc-row.lfx { background: var(--floor) 0 0 / 32px 32px repeat; }
.enc-row.lfx td, .enc-row.lfx td:first-child, .enc-row.lfx td:last-child, tr.enc-row.lfx:hover td {
  background: color-mix(in srgb, var(--sheet) 30%, transparent); }
tr.enc-row.lfx:hover td { background: color-mix(in srgb, var(--sheet) 16%, transparent); }
.enc-row.lfx td a { font-weight: 700; }
/* Éclate-Roc : la roche du jeu à gauche */
.enc-row.lfx.rock td:first-child { position: relative; padding-left: 52px; }
.enc-row.lfx .rk { position: absolute; left: 10px; bottom: 3px; width: 32px; height: 32px; pointer-events: none;
  background: var(--rock) center / contain no-repeat; image-rendering: pixelated; }

/* Guides : étapes à gauche, carte à droite qui suit l'étape choisie */
.guide-step { border: 1px solid var(--line); border-radius: 12px; padding: 4px 16px 8px; margin: 14px 0; transition: border-color .2s, box-shadow .2s; }
.guide-step.on { border-color: #4caf6a; box-shadow: 0 0 0 3px color-mix(in srgb, #4caf6a 25%, transparent); }
.guide-step h2 { border: 0; margin-top: 10px; }
.guide-step .num { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: #4caf6a; color: #fff; font-size: .8em; margin-right: 6px; }
.guide-step .sources code { font-size: .8em; }
aside.guide-ref { border: 1px solid #4caf6a; border-radius: 10px; padding: 8px 14px; margin: 10px 0; background: color-mix(in srgb, #4caf6a 8%, var(--sheet)); }
aside.guide-ref ul { margin: 4px 0 0; padding-left: 18px; }

/* Fonds des rencontres, version 5 (demandée) : la ligne reste sobre ; le terrain n'habille que la colonne
   « Lieu » (Herbes, Surf, Canne…) ; l'icône du terrain reste au début de la ligne, à gauche */
.enc-row.fx, .enc-row.wfx, .enc-row.lfx { background: none; }
.enc-row.fx td, .enc-row.wfx td, .enc-row.lfx td,
.enc-row.fx td:first-child, .enc-row.wfx td:first-child, .enc-row.lfx td:first-child,
.enc-row.fx td:last-child, .enc-row.wfx td:last-child, .enc-row.lfx td:last-child { background: transparent; }
tr.enc-row.fx:hover td, tr.enc-row.wfx:hover td, tr.enc-row.lfx:hover td { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.enc-row td a { font-weight: 600; }
.enc-row.fx td:nth-child(3) { background: linear-gradient(color-mix(in srgb, var(--sheet) 22%, transparent), color-mix(in srgb, var(--sheet) 22%, transparent)), var(--ground) 0 0 / 32px 32px repeat; }
.enc-row.wfx td:nth-child(3) { background: linear-gradient(color-mix(in srgb, var(--sheet) 22%, transparent), color-mix(in srgb, var(--sheet) 22%, transparent)), var(--water) 0 0 / 32px 32px repeat; }
.enc-row.lfx td:nth-child(3) { background: linear-gradient(color-mix(in srgb, var(--sheet) 22%, transparent), color-mix(in srgb, var(--sheet) 22%, transparent)), var(--floor) 0 0 / 32px 32px repeat; }
.enc-row.fx td:nth-child(3), .enc-row.wfx td:nth-child(3), .enc-row.lfx td:nth-child(3) { font-weight: 700; text-shadow: 0 0 3px var(--sheet), 0 0 2px var(--sheet), 0 0 1px var(--sheet); border-radius: 0; }
/* une seule touffe, au début (plus de touffe ni de fleur au bout de la ligne) */
.enc-row.fx td:last-child .deco, .enc-row.fx td:last-child::after { display: none; }
.enc-row.fx td:last-child { padding-right: 12px; }
/* Surf : un carré d'eau libre ; grotte / sable : un carré du sol */
.enc-row.wfx.surf td:first-child, .enc-row.lfx.flr-row td:first-child { position: relative; padding-left: 50px; }
.enc-row .wave, .enc-row .flr { position: absolute; left: 10px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 6px; pointer-events: none;
  image-rendering: pixelated; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); }
.enc-row .wave { background: var(--water) 0 0 / 32px 32px repeat; }
.enc-row .flr { background: var(--floor) 0 0 / 32px 32px repeat; }
.enc-row.fx.has-flower td:nth-child(4)::after { display: none; }
.guide-nav { display: flex; justify-content: space-between; gap: 12px; margin: 18px 0; }
.guide-step h3 { margin: 12px 0 4px; font-size: 1em; }

/* Guide complet : chapitres et sommaire */
.guide-chapter { margin: 34px 0 6px; padding: 10px 16px; border-left: 5px solid #4caf6a; background: color-mix(in srgb, #4caf6a 9%, var(--sheet)); border-radius: 0 10px 10px 0; }
.guide-chapter h2 { border: 0; margin: 0 0 2px; font-size: 1.35em; }
.guide-chapter p { margin: 0; font-size: .92em; }
.guide-toc { border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; margin: 12px 0; }
.guide-toc ol { margin: 6px 0 0; padding-left: 22px; columns: 2; column-gap: 28px; }
@media (max-width: 700px) { .guide-toc ol { columns: 1; } }

/* Barre de lecture de la carte : pause, vitesse, enchaînement */
.atlas-play { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 11px; background: rgba(15,20,30,.78); border: 1px solid rgba(255,255,255,.14); }
.atlas-play button { width: 30px; height: 28px; border-radius: 8px; border: 0; background: transparent; color: #fff; font-size: .95rem; cursor: pointer; }
.atlas-play button:hover { background: rgba(255,255,255,.14); }
.atlas-play button.on { background: #4caf6a; }
.atlas-play .spd { min-width: 34px; text-align: center; color: #fff; font: 600 .78rem var(--mono); }
/* Guides : petits sprites dans le texte, résumé d'un trajet */
.emo { height: 1.5em; width: auto; vertical-align: -0.38em; margin: 0 1px 0 3px; image-rendering: pixelated; }
.emo.mon { height: 1.9em; vertical-align: -0.55em; margin: -0.3em 0 -0.2em 1px; }
.emo.it { height: 1.35em; vertical-align: -0.3em; }
.leg-info { display: inline-flex; gap: 6px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); margin-left: 4px; }
.leg-info b { color: #e0483b; font-weight: 700; }
.emo.bld { height: 2.1em; vertical-align: -0.7em; border-radius: 4px; margin: -0.3em 2px -0.3em 4px; }
.leg-places { display: inline-block; margin: 0 0 4px 2px; }