/* ============================================================
   PF2026 — Mini-site Légendes Pokémon : Z-A (+ Méga-Dimension)
   Gabarits : template-parts/guides/hub-za.php, template-parts/za-nav.php
   Shortcodes : inc/za-hub.php · JS : assets/js/za.js
   Identité : Illumis la nuit, néons verts du logo Z-A, pentagones du Royale,
   aura violette de la Méga-Évolution. Police de titrage : Chakra Petch.
   ============================================================ */

.pf-za {
  --za-night: #070B18;
  --za-night-2: #0D1430;
  --za-night-3: #16204A;
  --za-green: #2FE38A;
  --za-green-d: #0E9F5A;
  --za-lime: #B6F24A;
  --za-mag: #FF2E88;
  --za-vio: #8B5CF6;
  --za-cyan: #2BD9FF;
  --za-gold: #FFC93C;
  --za-paper: #F4F6FB;
  --za-line: #E1E6F2;
  --za-ink: #0E1321;
  --za-muted: #5A6480;
  --za-display: 'Chakra Petch', 'Space Grotesk', system-ui, sans-serif;
  --za-pent: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  --za-hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  --za-cut: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

/* ============================================================
   PAGES DE GUIDE
   ============================================================ */

/* ---------- Bannière ---------- */
.za-banner { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(260px, 30vw, 380px); margin: 0 0 14px; border-radius: 26px; background: var(--za-night); color: #fff; clip-path: var(--za-cut); }
.za-banner__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); }
.za-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 11, 24, .94) 0%, rgba(7, 11, 24, .72) 45%, rgba(7, 11, 24, .1) 100%), linear-gradient(0deg, rgba(7, 11, 24, .85), transparent 55%); }
.za-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--za-green), var(--za-cyan) 45%, var(--za-vio) 75%, var(--za-mag)); }
.za-banner--mega-dimension::after { background: linear-gradient(90deg, #FFD43B, #FF5DA2 40%, #8B5CF6 70%, #2BD9FF); }
.za-banner__inner { position: relative; max-width: 640px; padding: 28px 34px 30px; }
.za-banner__logo { display: inline-block; margin-bottom: 14px; }
.za-banner__logo img { display: block; width: 150px; height: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .5)); }
.za-banner__kicker { margin: 0 0 8px; font-family: var(--za-display); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--za-green); }
.za-banner--mega-dimension .za-banner__kicker { color: #FFB7DA; }
.za-banner__title { margin: 0; font-family: var(--za-display); font-weight: 700; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.04; letter-spacing: -.01em; color: #fff; text-wrap: balance; text-shadow: 0 4px 24px rgba(0, 0, 0, .45); }
.za-banner__hook { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .82); max-width: 520px; }
.za-banner__rank { position: absolute; right: 26px; top: 24px; display: grid; place-items: center; width: 92px; height: 92px; clip-path: var(--za-pent); background: linear-gradient(160deg, var(--za-green), var(--za-green-d)); color: #04140B; font-family: var(--za-display); font-weight: 700; font-size: 44px; line-height: 1; padding-top: 10px; box-shadow: 0 0 40px rgba(47, 227, 138, .45); }
.za-banner__rank small { position: absolute; top: 24px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.za-banner__hoopa { position: absolute; right: 14px; bottom: 6px; width: clamp(110px, 16vw, 170px); height: auto; filter: drop-shadow(0 10px 30px rgba(139, 92, 246, .6)); animation: za-float 5s ease-in-out infinite; }
@keyframes za-float { 50% { transform: translateY(-10px) rotate(-3deg); } }

/* ---------- Progression + starter ---------- */
.za-progress { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0 0 12px; padding: 12px 16px; border-radius: 18px; background: var(--za-night); color: #fff; }
.za-progress ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.za-progress li a { position: relative; display: grid; place-items: center; width: 38px; height: 40px; clip-path: var(--za-pent); background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7); text-decoration: none; font-family: var(--za-display); font-weight: 700; font-size: 14px; line-height: 1; padding-top: 4px; transition: background .2s, color .2s, transform .2s; }
.za-progress li a small { position: absolute; bottom: 3px; font-size: 8px; letter-spacing: .05em; opacity: .7; }
.za-progress li a span { margin-top: -6px; }
.za-progress li.is-done a { background: rgba(47, 227, 138, .28); color: #CFFBE5; }
.za-progress li.is-current a { background: var(--za-green); color: #04140B; transform: scale(1.1); }
.za-progress li a:hover { background: rgba(255, 255, 255, .25); color: #fff; }
.za-starter { display: flex; align-items: center; gap: 6px; }
.za-starter > span { margin-right: 4px; font-family: var(--za-display); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.za-starter button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 2px solid rgba(255, 255, 255, .15); border-radius: 50%; background: rgba(255, 255, 255, .06); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.za-starter button img { width: 34px; height: 34px; filter: grayscale(.8) brightness(.9); transition: filter .2s; }
.za-starter button:hover img, .za-starter button.is-on img { filter: none; }
.za-starter button.is-on { border-color: var(--za-green); background: rgba(47, 227, 138, .18); transform: scale(1.08); }

/* ---------- Raccourcis ---------- */
.za-quick { display: flex; gap: 6px; margin: 0 0 22px; padding: 4px; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--za-line); border-radius: 999px; background: #fff; }
.za-quick::-webkit-scrollbar { display: none; }
.za-quick a { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; font-family: var(--za-display); font-size: 13px; font-weight: 600; color: var(--za-muted); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.za-quick a:hover { background: var(--za-paper); color: var(--za-ink); }
.za-quick a.is-on { background: var(--za-night); color: var(--za-green); }

/* ---------- Typo de l'article ---------- */
.pf-za .guide-article__body h2 { position: relative; margin-top: 2.2em; padding-left: 20px; font-family: var(--za-display); font-weight: 700; letter-spacing: -.01em; }
.pf-za .guide-article__body h2::before { content: ""; position: absolute; left: 0; top: .2em; width: 10px; height: 1em; clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%); background: linear-gradient(180deg, var(--za-green), var(--za-cyan)); }
.pf-za .guide-article__body h3 { font-family: var(--za-display); font-weight: 700; }
.pf-za .guide-article__body a:not([class]) { color: #0B7E48; text-decoration-color: rgba(47, 227, 138, .6); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pf-za .guide-article__body .za-lead, .pf-za .guide-article__body > p:first-child { font-size: 1.12em; line-height: 1.65; color: #26304A; }
.pf-za .guide-article__body img { height: auto; }

/* ---------- Encadrés ---------- */
.za-box { position: relative; margin: 1.6em 0; padding: 16px 20px 16px 22px; border-radius: 16px; background: #F1FBF6; border: 1px solid #CDEFDD; }
.za-box::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--za-green); }
.za-box__title { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-family: var(--za-display); font-size: 15px; letter-spacing: .02em; }
.za-box__title i { font-style: normal; }
.za-box p { margin: .4em 0 0; }
.za-box p:first-of-type { margin-top: 0; }
.za-box--warn { background: #FFF5F7; border-color: #FFD3E1; }
.za-box--warn::before { background: var(--za-mag); }
.za-box--info { background: #F0F7FF; border-color: #D3E6FF; }
.za-box--info::before { background: #2B8CFF; }
.za-box--secret { background: #F6F1FF; border-color: #E2D4FF; }
.za-box--secret::before { background: var(--za-vio); }
.za-box--get { background: linear-gradient(135deg, #FFFBEA, #FFF3D1); border-color: #FBE3A1; }
.za-box--get::before { background: var(--za-gold); }

.za-spoil { margin: 1.6em 0; border-radius: 16px; background: var(--za-night); color: #fff; overflow: hidden; }
.za-spoil summary { padding: 14px 18px; cursor: pointer; font-family: var(--za-display); font-weight: 600; list-style: none; }
.za-spoil summary::-webkit-details-marker { display: none; }
.za-spoil summary span { border-bottom: 1px dashed rgba(255, 255, 255, .4); }
.za-spoil > div { padding: 0 18px 16px; color: rgba(255, 255, 255, .86); }
.za-spoil[open] summary { color: var(--za-green); }

/* ---------- En bref ---------- */
.za-brief { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; margin: 1.4em 0 1.8em; border-radius: 18px; overflow: hidden; background: var(--za-line); border: 1px solid var(--za-line); }
.za-brief > div { padding: 12px 16px; background: #fff; }
.za-brief dt { margin: 0 0 2px; font-family: var(--za-display); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--za-muted); }
.za-brief dd { margin: 0; font-weight: 600; line-height: 1.4; }

/* ---------- Étapes ---------- */
.za-steps { counter-reset: za; margin: 1.2em 0 1.6em; padding: 0; list-style: none; }
.za-steps > li { position: relative; counter-increment: za; margin: 0 0 10px; padding: 12px 16px 12px 58px; border-radius: 14px; background: var(--za-paper); line-height: 1.55; }
.za-steps > li::before { content: counter(za); position: absolute; left: 12px; top: 10px; display: grid; place-items: center; width: 32px; height: 34px; clip-path: var(--za-pent); background: var(--za-night); color: var(--za-green); font-family: var(--za-display); font-weight: 700; font-size: 14px; padding-top: 4px; }

/* ---------- Captures ---------- */
.za-shot, .za-wide { margin: 1.4em 0; }
.za-shot .za-zoom, .za-wide .za-zoom { display: block; width: 100%; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: var(--za-night); cursor: zoom-in; box-shadow: 0 18px 40px -26px rgba(7, 11, 24, .8); }
.za-shot img, .za-wide img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s ease; }
.za-shot .za-zoom:hover img, .za-wide .za-zoom:hover img { transform: scale(1.03); }
.za-shot figcaption, .za-wide figcaption { margin-top: 8px; font-size: 13.5px; color: var(--za-muted); }
.za-shot figcaption::before, .za-wide figcaption::before { content: "▸ "; color: var(--za-green-d); }
.za-wide img { aspect-ratio: auto; max-height: 560px; }
.za-shots { display: grid; gap: 14px; margin: 1.4em 0; }
.za-shots .za-shot { margin: 0; }
.za-shots--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.za-shots--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.za-shots--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Visionneuse */
.za-lightbox { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 24px; background: rgba(4, 6, 14, .92); cursor: zoom-out; animation: za-fade .2s ease; }
.za-lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.za-lightbox p { position: absolute; bottom: 14px; left: 0; right: 0; margin: 0; text-align: center; color: rgba(255, 255, 255, .8); font-size: 14px; }
@keyframes za-fade { from { opacity: 0; } }

/* ---------- Cartes ---------- */
.za-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin: 1.4em 0; }
.za-card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--za-line); box-shadow: 0 16px 34px -28px rgba(7, 11, 24, .6); }
.za-card__img { margin: 0; aspect-ratio: 16 / 10; background: var(--za-night); overflow: hidden; }
.za-card__img img { width: 100%; height: 100% !important; object-fit: cover; }
.za-card__img.is-contain { background: radial-gradient(circle at 50% 60%, #1C2A5E, var(--za-night)); }
.za-card__img.is-contain img { object-fit: contain; padding: 12px; }
.za-card__body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.za-card__tag { align-self: flex-start; margin-bottom: 6px; padding: 3px 9px; border-radius: 999px; background: var(--za-night); color: var(--za-green); font-family: var(--za-display); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.za-card h3 { margin: 0 0 6px !important; font-size: 17px; }
.za-card p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; color: #3A4460; }
.za-card__more { margin-top: auto; font-weight: 700; color: #0B7E48; text-decoration: none; }

/* ---------- Mission ---------- */
.za-mission { display: flex; align-items: stretch; margin: 2em 0 1em; border-radius: 16px; overflow: hidden; background: var(--za-night); color: #fff; scroll-margin-top: 90px; }
.za-mission__num { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 108px; padding: 10px 12px; background: linear-gradient(160deg, var(--za-green), var(--za-green-d)); color: #04140B; font-family: var(--za-display); font-weight: 700; font-size: 30px; line-height: 1; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.za-mission__num small { margin-bottom: 4px; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; text-align: center; opacity: .75; }
.za-mission--extra .za-mission__num { background: linear-gradient(160deg, #FF5DA2, var(--za-vio)); color: #fff; }
.za-mission--side .za-mission__num { background: linear-gradient(160deg, var(--za-cyan), #2B8CFF); }
.za-mission__body { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 12px 18px; }
.za-mission__body b { font-family: var(--za-display); font-size: 19px; line-height: 1.2; }
.za-mission__rew { font-size: 13.5px; color: rgba(255, 255, 255, .72); }

/* ---------- Types, niveaux, pastilles ---------- */
.za-types { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.za-types .type-badge { font-size: 10.5px; padding: 2px 8px; }
.za-lvl { display: inline-block; padding: 1px 7px; border-radius: 6px; background: var(--za-night); color: var(--za-green); font-family: var(--za-display); font-size: 12px; font-weight: 700; }
.za-dchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--d) 14%, #fff); color: color-mix(in srgb, var(--d) 70%, #0E1321); font-size: 12px; font-weight: 700; line-height: 1.3; }
.za-dchip::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: var(--d); }
.za-new { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 5px; background: var(--za-mag); color: #fff; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .04em; vertical-align: 2px; }

.za-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 8px; }
.za-chip { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 14px; background: #fff; border: 1px solid var(--za-line); color: var(--za-ink); text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; }
a.za-chip:hover { border-color: var(--za-green); transform: translateY(-2px); box-shadow: 0 10px 20px -16px rgba(7, 11, 24, .6); }
.za-chip img { flex: 0 0 auto; width: 48px; height: 48px; object-fit: contain; }
.za-chip__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.za-chip__name { font-weight: 700; font-size: 14px; line-height: 1.2; }
.za-chip__sub { font-size: 12px; color: var(--za-muted); line-height: 1.35; }
.za-chip__sub em { font-style: normal; font-weight: 700; color: #B4235F; }

/* ---------- Pokémon présentés ---------- */
.za-mons { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 1.4em 0; padding: 0; list-style: none; }
.za-mons > li { margin: 0; padding: 0; border-radius: 18px; background: #fff; border: 1px solid var(--za-line); overflow: hidden; }
.za-mons a { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 10px; color: var(--za-ink); text-decoration: none; text-align: center; }
.za-mons__img { display: grid; place-items: center; width: 96px; height: 96px; }
.za-mons__img img { max-width: 100%; max-height: 100%; }
.za-mons--art .za-mons__img { width: 100%; height: 130px; border-radius: 14px; background: radial-gradient(circle at 50% 60%, #E7F7EF, #fff 70%); }
.za-mons--art .za-mons__img img { max-height: 120px; width: auto; }
.za-mons b { font-size: 15px; line-height: 1.2; }
.za-mons p { margin: 0; padding: 0 12px 12px; font-size: 13px; line-height: 1.5; color: var(--za-muted); text-align: center; }

/* ---------- Combats ---------- */
.za-boss { margin: 1.8em 0; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--za-line); box-shadow: 0 24px 50px -40px rgba(7, 11, 24, .8); }
.za-boss__head { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--boss) 45%, transparent), transparent 60%), linear-gradient(120deg, var(--za-night), var(--za-night-3)); color: #fff; }
.za-boss__portrait { flex: 0 0 auto; width: 96px; height: 96px !important; object-fit: cover; object-position: top; border-radius: 18px; background: rgba(255, 255, 255, .08); }
.za-boss__portrait.is-pent { clip-path: var(--za-pent); border-radius: 0; background: linear-gradient(160deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .05)); object-fit: contain; }
.za-boss__id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.za-boss__kicker { font-family: var(--za-display); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--za-green); }
.za-boss__name { margin: 0 !important; font-family: var(--za-display); font-size: 24px !important; color: #fff; line-height: 1.1; }
.za-boss__role, .za-boss__place { font-size: 13.5px; color: rgba(255, 255, 255, .75); }
.za-boss__rank { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 62px; height: 62px; clip-path: var(--za-pent); background: var(--za-green); color: #04140B; font-family: var(--za-display); font-weight: 700; font-size: 18px; padding-top: 6px; white-space: nowrap; }
.za-boss__body { padding: 16px 18px 6px; }
.za-boss__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; font-size: 13.5px; color: var(--za-muted); }
.za-boss__tips { margin: 6px 18px 18px; padding: 14px 16px; border-radius: 14px; background: var(--za-paper); }
.za-boss__tips > b { display: block; margin-bottom: 4px; font-family: var(--za-display); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #0B7E48; }
.za-boss__tips p { margin: .3em 0 0; line-height: 1.6; }
.za-boss--light .za-boss__head { background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--boss) 35%, transparent), transparent 60%), linear-gradient(120deg, #142045, #1E2D63); }

.za-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.za-team__mon { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; padding: 10px 12px 12px; border-radius: 16px; background: var(--za-paper); border: 1px solid transparent; transition: border-color .2s; }
.za-team__mon:hover { border-color: color-mix(in srgb, var(--boss, var(--za-green)) 60%, transparent); }
.za-team__img { align-self: center; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, #fff 55%, transparent 56%); }
.za-team__img img { width: 72px; height: 72px; object-fit: contain; }
.za-team__id { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; }
.za-team__id b { font-size: 15px; line-height: 1.2; }
.za-team__moves { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 0; padding: 0; list-style: none; }
.za-team__moves li { margin: 0; padding: 2px 7px; border-radius: 6px; background: #fff; border: 1px solid var(--za-line); font-size: 11.5px; line-height: 1.4; }
.za-team__moves li.is-plus { border-color: #FFB7D2; background: #FFF0F6; }
.za-team__moves li.is-plus::after { content: " +"; font-weight: 800; color: var(--za-mag); }
.za-team__item { font-size: 12px; color: var(--za-muted); }

/* ---------- Onglets ---------- */
.za-tabs__bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.za-tabs__btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border: 1px solid var(--za-line); border-radius: 999px; background: #fff; color: var(--za-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.za-tabs__btn img { width: 26px; height: 26px; }
.za-tabs__btn[aria-selected="true"] { border-color: var(--za-night); background: var(--za-night); color: #fff; }

/* ---------- Méga-Ferox ---------- */
.za-ferox { position: relative; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 0; margin: 2em 0; border-radius: 24px; overflow: hidden; background: linear-gradient(135deg, #12082A, #1A0F3D 50%, #0A1230); color: #fff; box-shadow: 0 30px 60px -40px rgba(60, 20, 120, .9); }
.za-ferox__art { position: relative; display: grid; place-items: center; min-height: 280px; overflow: hidden; }
.za-ferox__aura { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(196, 120, 255, .75), rgba(139, 92, 246, .3) 45%, transparent 70%); filter: blur(10px); animation: za-pulse 3.2s ease-in-out infinite; }
@keyframes za-pulse { 50% { transform: scale(1.12); opacity: .75; } }
.za-ferox__art img { position: relative; width: 88% !important; max-width: 280px; height: auto; filter: drop-shadow(0 0 18px rgba(186, 120, 255, .8)) drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); }
.za-ferox__body { padding: 22px 24px 20px; }
.za-ferox__kicker { font-family: var(--za-display); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #D6B4FF; }
.za-ferox__name { margin: 4px 0 10px !important; font-family: var(--za-display); font-size: 28px !important; color: #fff; }
.za-ferox__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.za-ferox__lvl { padding: 3px 10px; border-radius: 8px; background: #fff; color: #1A0F3D; font-family: var(--za-display); font-weight: 700; }
.za-ferox__weak { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); }
.za-ferox__weak > b { padding-top: 3px; font-family: var(--za-display); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.za-weak { display: flex; flex-direction: column; gap: 6px; }
.za-weak__row { display: flex; align-items: center; gap: 8px; }
.za-weak__row > b { min-width: 26px; font-family: var(--za-display); font-size: 13px; color: var(--za-mag); }
.za-ferox .za-weak__row > b { color: #FF9AC6; }
.za-weak__row--imm > b { color: var(--za-muted); }
.za-ferox__tips { margin-top: 14px; color: rgba(255, 255, 255, .86); line-height: 1.6; }
.za-ferox__tips p { margin: .4em 0 0; }
.za-ferox__tips strong { color: #fff; }
.za-ferox__reward { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 8px 12px; border-radius: 12px; background: rgba(255, 201, 60, .12); color: #FFE7A8; font-size: 14px; }
.za-ferox__reward img { width: 34px; height: 34px !important; border-radius: 50%; background: rgba(255, 255, 255, .1); object-fit: contain; }

/* ---------- Zones sauvages ---------- */
.za-zone { margin: 2.2em 0; border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid var(--za-line); scroll-margin-top: 90px; }
.za-zone__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--za-night); color: #fff; }
.za-zone__shot { margin: 0; }
.za-zone__shot .za-zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.za-zone__shot img { display: block; width: 100%; height: 100% !important; min-height: 200px; object-fit: cover; }
.za-zone__id { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 22px 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--d) 30%, var(--za-night)), var(--za-night) 70%); }
.za-zone__num { position: absolute; right: 18px; top: 10px; font-family: var(--za-display); font-weight: 700; font-size: 64px; line-height: 1; color: rgba(255, 255, 255, .08); }
.za-zone__id h3 { margin: 0 !important; font-family: var(--za-display); font-size: 26px !important; color: #fff; }
.za-zone__where { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: rgba(255, 255, 255, .8); font-size: 14px; }
.za-zone__unlock, .za-zone__note { margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, .7); }
.za-zone__group { padding: 14px 18px 4px; }
.za-zone__group h4 { margin: 0 0 10px !important; font-family: var(--za-display); font-size: 14px !important; letter-spacing: .06em; text-transform: uppercase; color: var(--za-muted); }
.za-zone__group.is-baron { background: linear-gradient(180deg, #FFF6F9, transparent); }
.za-zone__group.is-baron h4 { color: #B4235F; }
.za-zone__group.is-baron .za-chip { border-color: #FFD3E1; }
.za-zone__group.is-special h4 { color: #6D3FD8; }
.za-zone__items { margin: 12px 18px 18px; border-radius: 14px; background: var(--za-paper); }
.za-zone__items summary { padding: 12px 14px; cursor: pointer; font-weight: 700; }
.za-zone__items .za-table { margin: 0 14px 14px; width: calc(100% - 28px); }

.za-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.za-table th, .za-table td { padding: 8px 10px; border-bottom: 1px solid var(--za-line); text-align: left; vertical-align: top; }
.za-table thead th { font-family: var(--za-display); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--za-muted); }

/* ---------- Filtres (Méga-Gemmes, missions) ---------- */
.za-filter__bar { position: sticky; top: 70px; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; padding: 10px; border-radius: 18px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border: 1px solid var(--za-line); }
.za-filter__bar input[type="search"], .za-dex__bar input[type="search"], .za-dex__bar select { flex: 1 1 220px; min-width: 0; padding: 10px 14px; border: 1px solid var(--za-line); border-radius: 12px; font: inherit; font-size: 14.5px; background: #fff; }
.za-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.za-seg button { padding: 8px 12px; border: 1px solid var(--za-line); border-radius: 10px; background: #fff; color: var(--za-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.za-seg button[style] { border-left: 4px solid var(--d); }
.za-seg button.is-on { background: var(--za-night); border-color: var(--za-night); color: #fff; }
.za-filter__empty { padding: 20px; text-align: center; color: var(--za-muted); }

.za-stones { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.za-stone { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 12px; margin: 0; padding: 12px; border-radius: 18px; background: #fff; border: 1px solid var(--za-line); }
.za-stone[hidden] { display: none; }
.za-stone__art { grid-row: span 2; display: grid; place-items: center; width: 76px; height: 76px; clip-path: var(--za-hex); background: radial-gradient(circle, #F3EEFF, #E2D6FF); }
.za-stone__art img { width: 68px; height: 68px !important; object-fit: contain; }
.za-stone__id { display: flex; flex-direction: column; gap: 3px; }
.za-stone__name { font-family: var(--za-display); font-size: 16px; }
.za-stone__mega { font-size: 13px; color: var(--za-muted); }
.za-stone__loc { margin: 0; font-size: 13px; line-height: 1.5; color: #3A4460; }

.za-side { margin: 0; padding: 0; list-style: none; }
.za-sidem { display: flex; gap: 14px; margin: 0 0 8px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--za-line); }
.za-sidem[hidden] { display: none; }
.za-sidem__num { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 50px; clip-path: var(--za-pent); background: linear-gradient(160deg, var(--za-cyan), #2B8CFF); color: #04203A; font-family: var(--za-display); font-weight: 700; font-size: 14px; padding-top: 5px; }
.za-sidem__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.za-sidem__body b { font-size: 15.5px; line-height: 1.3; }
.za-sidem__todo, .za-sidem__rew { margin: 0; font-size: 13.5px; line-height: 1.5; color: #3A4460; }
.za-sidem__rew { color: var(--za-muted); }

/* ---------- Méga-Évolutions (galerie) ---------- */
.za-megas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 1.2em 0; padding: 0; list-style: none; }
.za-mega { margin: 0; }
.za-mega a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; padding: 12px 10px 14px; border-radius: 20px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--t) 28%, #fff), #fff 70%); border: 1px solid color-mix(in srgb, var(--t) 25%, var(--za-line)); color: var(--za-ink); text-decoration: none; text-align: center; transition: transform .25s, box-shadow .25s; }
.za-mega a:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -26px color-mix(in srgb, var(--t) 80%, #000); }
.za-mega__art { display: grid; place-items: center; width: 100%; aspect-ratio: 1; }
.za-mega__art img { width: 92%; height: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .18)); transition: transform .3s; }
.za-mega a:hover .za-mega__art img { transform: scale(1.06); }
.za-mega b { font-size: 14px; line-height: 1.25; }

/* ---------- Pokédex ---------- */
.za-dex__bar { position: sticky; top: 70px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px; border-radius: 18px; background: rgba(7, 11, 24, .94); backdrop-filter: blur(8px); }
.za-dex__bar .za-seg button { background: transparent; border-color: rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .75); }
.za-dex__bar .za-seg button small { margin-left: 4px; opacity: .6; }
.za-dex__bar .za-seg button.is-on { background: var(--za-green); border-color: var(--za-green); color: #04140B; }
.za-dex__bar input[type="search"], .za-dex__bar select { flex: 1 1 160px; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .15); color: #fff; }
.za-dex__bar select option { color: var(--za-ink); }
.za-dex__mega { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.za-dex__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.za-dexc { margin: 0; }
.za-dexc[hidden] { display: none; }
.za-dexc a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; padding: 22px 8px 12px; border-radius: 18px; background: #fff; border: 1px solid var(--za-line); color: var(--za-ink); text-decoration: none; text-align: center; transition: transform .2s, box-shadow .2s, border-color .2s; }
.za-dexc a:hover { transform: translateY(-3px); border-color: var(--za-green); box-shadow: 0 16px 30px -24px rgba(7, 11, 24, .7); }
.za-dexc__num { position: absolute; left: 10px; top: 8px; font-family: var(--za-display); font-size: 12px; font-weight: 700; color: var(--za-muted); }
.za-dexc__img { width: 88px; height: 88px !important; object-fit: contain; }
.za-dexc b { font-size: 14px; line-height: 1.2; }
.za-dexc__mega { position: absolute; right: 6px; top: 6px; display: flex; gap: 2px; }
.za-dexc__mega img { width: 30px; height: 30px !important; border-radius: 50%; background: #F3EEFF; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--za-vio); object-fit: contain; }

/* ---------- Échelle du Royale ---------- */
.za-ladder { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 1.4em 0; padding: 0; list-style: none; counter-reset: none; }
.za-ladder__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; padding: 16px 10px 14px; border-radius: 20px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); text-align: center; color: #fff; }
.za-ladder__rank { display: grid; place-items: center; width: 50px; height: 52px; clip-path: var(--za-pent); background: linear-gradient(160deg, var(--za-mag), #B8124F); font-family: var(--za-display); font-weight: 700; font-size: 22px; padding-top: 6px; }
.za-ladder__step.is-start .za-ladder__rank { background: rgba(255, 255, 255, .2); }
.za-ladder__step.is-final .za-ladder__rank { background: linear-gradient(160deg, var(--za-green), var(--za-green-d)); color: #04140B; }
.za-ladder__pic { width: 72px; height: 72px !important; object-fit: contain; clip-path: var(--za-pent); background: rgba(255, 255, 255, .1); }
.za-ladder__pic.is-mon { clip-path: none; border-radius: 50%; }
.za-ladder__who { display: flex; flex-direction: column; gap: 2px; }
.za-ladder__who b { font-family: var(--za-display); font-size: 16px; }
.za-ladder__who small { font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.za-ladder__who em { margin-top: 4px; font-style: normal; font-size: 11.5px; line-height: 1.4; color: var(--za-green); }
.za-ladder__who em i { display: block; font-style: normal; white-space: nowrap; color: #fff; opacity: .85; }
.za-ladder__step.is-final { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 18px; padding: 16px 20px; background: linear-gradient(90deg, rgba(47, 227, 138, .18), rgba(43, 217, 255, .1)); border-color: rgba(47, 227, 138, .45); text-align: left; }
.za-ladder__step.is-final .za-ladder__who b { font-size: 20px; }
.za-ladder__skip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; margin: 0; padding: 10px; border: 1px dashed rgba(255, 255, 255, .25); border-radius: 14px; color: rgba(255, 255, 255, .5); font-family: var(--za-display); font-size: 13px; letter-spacing: .2em; text-decoration: line-through; text-decoration-color: var(--za-mag); }
.za-ladder__skip span { line-height: 1.6; }
.za-ladder__skip small { text-decoration: none; letter-spacing: 0; font-family: var(--font); color: rgba(255, 255, 255, .75); }
/* Échelle dans un article (fond clair) */
.guide-article__body .za-ladder { padding: 16px; border-radius: 24px; background: var(--za-night); }

/* ---------- Personnages ---------- */
.za-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 1.4em 0; padding: 0; list-style: none; }
.za-char { display: flex; flex-direction: column; margin: 0; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--za-line); }
.za-char figure { margin: 0; display: grid; place-items: end center; height: 260px; background: radial-gradient(circle at 50% 70%, #23336E, var(--za-night)); overflow: hidden; }
.za-char figure img { width: 100%; height: 100% !important; object-fit: contain; object-position: bottom; }
.za-char.has-full figure img { width: auto; max-width: 100%; height: 250px !important; object-fit: contain; }
.za-char > div { padding: 12px 16px 16px; }
.za-char__role { display: block; font-family: var(--za-display); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #0B7E48; }
.za-char b { display: block; margin: 2px 0 4px; font-family: var(--za-display); font-size: 20px; }
.za-char p { margin: 0; font-size: 14px; line-height: 1.55; color: #3A4460; }

/* ---------- Grille Méga-Ferox ---------- */
.za-fxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 1em 0; padding: 0; list-style: none; }
.za-fxgrid li { margin: 0; }
.za-fxgrid a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; padding: 12px 8px 14px; border-radius: 20px; background: linear-gradient(170deg, #1C1040, #0B0F24); border: 1px solid rgba(139, 92, 246, .35); color: #fff; text-decoration: none; text-align: center; overflow: hidden; transition: transform .25s, border-color .25s, box-shadow .25s; }
.za-fxgrid a::before { content: ""; position: absolute; left: 50%; top: 18%; width: 120px; height: 120px; margin-left: -60px; border-radius: 50%; background: radial-gradient(circle, rgba(186, 120, 255, .55), transparent 70%); filter: blur(6px); }
.za-fxgrid a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--fx); }
.za-fxgrid a:hover { transform: translateY(-4px); border-color: #C49BFF; box-shadow: 0 18px 40px -20px rgba(139, 92, 246, .8); }
.za-fxgrid__art { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; }
.za-fxgrid__art img { width: 90%; height: auto; filter: drop-shadow(0 0 10px rgba(186, 120, 255, .7)); }
.za-fxgrid__lvl { position: absolute; left: 10px; top: 10px; padding: 1px 7px; border-radius: 6px; background: #fff; color: #1A0F3D; font-family: var(--za-display); font-size: 12px; font-weight: 700; }
.za-fxgrid b { position: relative; font-size: 14px; line-height: 1.2; }
.za-fxgrid small { position: relative; font-size: 11.5px; color: rgba(255, 255, 255, .6); }

/* ---------- Comparatif ---------- */
.za-vs { margin: 1.6em 0; overflow-x: auto; border-radius: 20px; border: 1px solid var(--za-line); }
.za-vs table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; }
.za-vs th, .za-vs td { padding: 12px 14px; border-bottom: 1px solid var(--za-line); text-align: left; vertical-align: top; }
.za-vs thead th { background: var(--za-night); color: #fff; font-family: var(--za-display); font-size: 15px; }
.za-vs thead th.za-vs__c0 { border-top: 4px solid #E60012; }
.za-vs thead th.za-vs__c1 { border-top: 4px solid var(--za-green); }
.za-vs tbody th { width: 26%; font-weight: 700; background: var(--za-paper); }
.za-vs td.is-win { background: #F0FCF5; font-weight: 600; }
.za-vs td.is-win::before { content: "✓ "; color: #0B7E48; font-weight: 800; }
.za-vs tbody tr:last-child > * { border-bottom: 0; }

/* ---------- Note du test ---------- */
.za-score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 24px; align-items: center; margin: 1.8em 0; padding: 22px; border-radius: 24px; background: linear-gradient(135deg, var(--za-night), var(--za-night-3)); color: #fff; }
.za-score__ring { position: relative; display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; background: conic-gradient(var(--za-green) calc(var(--p) * 1%), rgba(255, 255, 255, .1) 0); }
.za-score__ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--za-night); }
.za-score__ring b { position: relative; font-family: var(--za-display); font-size: 46px; line-height: 1; }
.za-score__ring small { position: absolute; bottom: 30px; font-size: 13px; color: rgba(255, 255, 255, .6); }
.za-score__verdict span { font-family: var(--za-display); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--za-green); }
.za-score__verdict p { margin: 6px 0 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .9); }
.za-score__lists { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.za-score__lists ul { margin: 0; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .06); list-style: none; }
.za-score__lists li { position: relative; margin: 0 0 6px; padding-left: 22px; font-size: 14.5px; line-height: 1.5; }
.za-score__lists .is-pro li::before { content: "+"; position: absolute; left: 0; font-weight: 800; color: var(--za-green); }
.za-score__lists .is-con li::before { content: "–"; position: absolute; left: 0; font-weight: 800; color: var(--za-mag); }
.za-score--mini { grid-template-columns: auto minmax(0, 1fr); margin: 14px 0; padding: 0; background: none; }
.za-score--mini .za-score__ring { width: 104px; height: 104px; }
.za-score--mini .za-score__ring b { font-size: 36px; }
.za-score--mini .za-score__ring small { bottom: 22px; }
.za-score--mini .za-score__verdict p { font-size: 14.5px; }
.za-game__test .za-score--mini { grid-template-columns: 1fr; justify-items: start; }

/* ---------- Liens ---------- */
.za-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #0B7E48; text-decoration: none; border-bottom: 2px solid rgba(47, 227, 138, .5); }
.za-go::after { content: "→"; transition: transform .2s; }
.za-go:hover::after { transform: translateX(3px); }
.za-missing { color: #B4235F; font-weight: 700; }

/* ============================================================
   HUB
   ============================================================ */
.za-hub { background: #fff; color: var(--za-ink); overflow-x: clip; }
.za-crumbs { background: var(--za-night); }
.za-crumbs .breadcrumb { padding: 12px 0; margin: 0; background: none; border: 0; box-shadow: none; color: rgba(255, 255, 255, .6); }
.za-crumbs .breadcrumb a { color: rgba(255, 255, 255, .8); }
.za-crumbs .breadcrumb-current { color: #fff; }

.za-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 12px; background: rgba(255, 255, 255, .08); color: #fff; font-family: var(--za-display); font-weight: 700; font-size: 15px; letter-spacing: .02em; text-decoration: none; transition: transform .2s, background .2s, box-shadow .2s; }
.za-btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .16); }
.za-btn--primary { border-color: transparent; background: linear-gradient(135deg, var(--za-green), #22C7A0); color: #04140B; box-shadow: 0 10px 30px -10px rgba(47, 227, 138, .7); }
.za-btn--primary:hover { background: linear-gradient(135deg, #5BF0A6, #2FD8B0); }
.za-btn--ghost { background: transparent; }
.za-btn--md { border-color: transparent; background: linear-gradient(135deg, #FF5DA2, var(--za-vio)); }
.za-sec .za-btn:not(.za-btn--primary) { border-color: var(--za-line); background: #fff; color: var(--za-ink); }
.za-royale .za-btn:not(.za-btn--primary), .za-cast .za-btn:not(.za-btn--primary) { border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; }

.za-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--za-display); font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #0B7E48; }
.za-eyebrow::before { content: ""; width: 10px; height: 10px; clip-path: var(--za-pent); background: currentColor; }
.za-sec { position: relative; padding: clamp(56px, 7vw, 96px) 0; }
.za-sec__head { max-width: 760px; margin: 0 0 28px; }
.za-sec__head h2 { margin: 8px 0 10px; font-family: var(--za-display); font-weight: 700; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; }
.za-sec__head p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--za-muted); }
.za-sec__head--row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 40px; align-items: end; max-width: none; }
.za-sec__head--light h2 { color: #fff; }
.za-sec__head--light p { color: rgba(255, 255, 255, .72); }
.za-sec__head--light .za-eyebrow { color: var(--za-green); }
.za-center { margin: 26px 0 0; text-align: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---------- Héros ---------- */
.za-hero { position: relative; isolation: isolate; min-height: clamp(560px, 62vw, 820px); display: flex; align-items: flex-end; color: #fff; background: var(--za-night); overflow: hidden; }
.za-hero__bg { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; animation: za-kenburns 30s ease-in-out infinite alternate; }
@keyframes za-kenburns { to { transform: scale(1.08) translate(-1%, -1%); } }
.za-hero__veil { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(7, 11, 24, .92) 0%, rgba(7, 11, 24, .55) 42%, rgba(7, 11, 24, 0) 70%), linear-gradient(0deg, var(--za-night) 2%, rgba(7, 11, 24, 0) 45%); }
.za-hero__grid { position: absolute; inset: 0; z-index: -1; opacity: .25; background-image: linear-gradient(rgba(47, 227, 138, .25) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 227, 138, .25) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: linear-gradient(0deg, #000, transparent 40%); mask-image: linear-gradient(0deg, #000, transparent 40%); }
.za-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; padding-top: 60px; padding-bottom: 54px; }
.za-hero__copy { max-width: 620px; }
.za-hero__logo { display: block; width: clamp(240px, 32vw, 440px); height: auto; margin: 0 0 18px -8px; filter: drop-shadow(0 12px 40px rgba(0, 0, 0, .6)); }
.za-hero__title { margin: 0 0 12px; font-family: var(--za-display); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; color: #fff; }
.za-hero__title span { display: block; font-size: .62em; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--za-green); }
.za-hero__lead { margin: 0 0 20px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: rgba(255, 255, 255, .85); }
.za-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.za-hero__chips li { display: flex; flex-direction: column; padding: 8px 14px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(6px); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.za-hero__chips b { font-family: var(--za-display); font-size: 15px; letter-spacing: 0; text-transform: none; color: #fff; }
.za-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.za-hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.za-hero__stats li { display: flex; flex-direction: column; justify-content: center; width: 150px; height: 140px; padding: 14px 12px 10px; clip-path: var(--za-pent); background: rgba(7, 11, 24, .55); backdrop-filter: blur(10px); text-align: center; }
.za-hero__stats li:nth-child(2n) { transform: translateY(26px); }
.za-hero__stats b { font-family: var(--za-display); font-size: 34px; line-height: 1; color: var(--za-green); }
.za-hero__stats span { margin-top: 4px; font-size: 11.5px; line-height: 1.3; color: rgba(255, 255, 255, .75); }

/* ---------- Accès rapide ---------- */
.za-tiles { position: relative; z-index: 2; background: var(--za-night); padding: 0 0 56px; }
.za-tiles__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.za-tiles__grid a { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 18px 16px; border-radius: 18px; background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .1); color: #fff; text-decoration: none; overflow: hidden; transition: transform .25s, border-color .25s, background .25s; }
.za-tiles__grid a::after { content: ""; position: absolute; right: -30px; bottom: -30px; width: 90px; height: 90px; clip-path: var(--za-pent); background: rgba(47, 227, 138, .08); transition: transform .4s; }
.za-tiles__grid a:hover { transform: translateY(-4px); border-color: rgba(47, 227, 138, .6); background: linear-gradient(160deg, rgba(47, 227, 138, .16), rgba(255, 255, 255, .02)); }
.za-tiles__grid a:hover::after { transform: scale(1.6) rotate(20deg); }
.za-tiles__ico { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 4px; border-radius: 12px; background: rgba(47, 227, 138, .15); color: var(--za-green); }
.za-tiles__ico svg { width: 24px; height: 24px; }
.za-tiles__grid b { font-family: var(--za-display); font-size: 17px; }
.za-tiles__grid small { font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .65); }

/* ---------- Jour / nuit ---------- */
.za-daynight { background: linear-gradient(180deg, #F3F8FF, #fff); }
.za-compare { position: relative; aspect-ratio: 1772 / 1020; border-radius: 28px; overflow: hidden; background: var(--za-night); box-shadow: 0 40px 80px -50px rgba(7, 11, 24, .9); --x: 52%; }
.za-compare > img, .za-compare__top img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.za-compare__top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.za-compare input { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.za-compare__handle { position: absolute; top: 0; bottom: 0; left: var(--x); z-index: 2; width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 20px rgba(255, 255, 255, .8); pointer-events: none; }
.za-compare__handle::after { content: "⟷"; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: #fff; color: var(--za-night); font-size: 22px; font-weight: 700; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.za-compare__label { position: absolute; top: 18px; z-index: 2; padding: 6px 14px; border-radius: 999px; font-family: var(--za-display); font-weight: 700; font-size: 14px; pointer-events: none; }
.za-compare__label.is-day { left: 18px; background: #FFE27A; color: #4A3200; }
.za-compare__label.is-night { right: 18px; background: var(--za-night); color: #CFE0FF; }
.za-daynight__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.za-daynight__cols article { padding: 22px 24px; border-radius: 22px; background: #fff; border: 1px solid var(--za-line); }
.za-daynight__cols article:last-child { background: var(--za-night); border-color: var(--za-night); color: #fff; }
.za-daynight__cols article:last-child p { color: rgba(255, 255, 255, .8); }
.za-daynight__cols article:last-child .za-go { color: var(--za-green); }
.za-daynight__cols h3 { margin: 0 0 8px; font-family: var(--za-display); font-size: 22px; }
.za-daynight__cols p { margin: 0 0 12px; line-height: 1.6; color: #3A4460; }

/* ---------- Chapitres ---------- */
.za-story { background: #fff; }
.za-chapters { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 300px); gap: 14px; margin: 0; padding: 4px 4px 18px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.za-chapter { margin: 0; scroll-snap-align: start; }
.za-chapter a { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 22px; overflow: hidden; background: var(--za-night); color: #fff; text-decoration: none; transition: transform .25s, box-shadow .25s; }
.za-chapter a:hover { transform: translateY(-5px); box-shadow: 0 24px 40px -26px rgba(7, 11, 24, .9); }
.za-chapter__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.za-chapter__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.za-chapter a:hover .za-chapter__img img { transform: scale(1.06); }
.za-chapter__num { position: absolute; left: 14px; top: 12px; font-family: var(--za-display); font-weight: 700; font-size: 40px; line-height: 1; color: #fff; text-shadow: 0 4px 18px rgba(0, 0, 0, .7); }
.za-chapter__rank { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 44px; height: 46px; clip-path: var(--za-pent); background: var(--za-green); color: #04140B; font-family: var(--za-display); font-weight: 700; font-size: 18px; padding-top: 5px; }
.za-chapter__body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.za-chapter__body small { font-family: var(--za-display); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--za-green); }
.za-chapter__body b { font-family: var(--za-display); font-size: 18px; line-height: 1.2; }
.za-chapter__body em { font-style: normal; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .7); }
.za-scroll-ctrl { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.za-scroll-ctrl button { width: 44px; height: 44px; border: 1px solid var(--za-line); border-radius: 50%; background: #fff; font-size: 18px; cursor: pointer; transition: background .2s, color .2s; }
.za-scroll-ctrl button:hover { background: var(--za-night); color: #fff; }

/* ---------- Royale ---------- */
.za-royale { background: var(--za-night); color: #fff; overflow: hidden; }
.za-royale__bg { position: absolute; inset: 0; opacity: .5; background: radial-gradient(circle at 15% 20%, rgba(255, 46, 136, .35), transparent 40%), radial-gradient(circle at 85% 80%, rgba(139, 92, 246, .35), transparent 45%), url("../img/za/shot/zone-de-combat-du-royale-z-a.webp") center / cover; mix-blend-mode: luminosity; }
.za-royale__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--za-night), rgba(7, 11, 24, .75) 30%, rgba(7, 11, 24, .85) 70%, var(--za-night)); }
.za-royale .container { position: relative; }
.za-royale__more { margin: 24px 0 0; text-align: center; }

/* ---------- Méga-Ferox (hub) ---------- */
.za-fx { background: linear-gradient(180deg, #0B0F24, #160B33 60%, #0B0F24); color: #fff; }
.za-fx .za-sec__head h2 { color: #fff; }
.za-fx .za-sec__head p { color: rgba(255, 255, 255, .72); }
.za-fx .za-eyebrow { color: #D6B4FF; }
.za-fx__dlc { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 36px 0 10px; font-family: var(--za-display); font-size: 20px; color: #FFD6EA; }
.za-fx__dlc img { height: auto; }

/* ---------- Méga-Évolutions (hub) ---------- */
.za-megasec { background: radial-gradient(circle at 80% 0%, #F1EBFF, #fff 50%); }
.za-megarail { overflow-x: auto; padding: 4px 4px 14px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.za-megarail .za-megas { display: grid; grid-auto-flow: column; grid-auto-columns: 190px; grid-template-columns: none; margin: 0; }
.za-megarail .za-mega { scroll-snap-align: start; }

/* ---------- Carte ---------- */
.za-mapsec { background: linear-gradient(180deg, #fff, #F3F8FF); }
.za-mapsec__inner { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px; align-items: center; }
.za-mapsec__copy h2 { margin: 8px 0 12px; font-family: var(--za-display); font-size: clamp(28px, 3.4vw, 42px); line-height: 1.05; }
.za-mapsec__copy > p { font-size: 17px; line-height: 1.6; color: var(--za-muted); }
.za-districts { display: grid; gap: 8px; margin: 18px 0 22px; padding: 0; list-style: none; }
.za-districts li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 0 12px; align-items: baseline; margin: 0; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--za-line); border-left: 6px solid var(--d); }
.za-districts b { font-family: var(--za-display); font-size: 16px; }
.za-districts small { grid-column: 1; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--za-muted); }
.za-districts p { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 14px; line-height: 1.45; color: #3A4460; }
.za-mapsec__map { margin: 0; }
.za-mapsec__map .za-zoom { display: block; width: 100%; padding: 8px; border: 0; border-radius: 26px; background: #fff; box-shadow: 0 40px 70px -40px rgba(7, 11, 24, .6); cursor: zoom-in; transform: rotate(1.2deg); transition: transform .4s; }
.za-mapsec__map .za-zoom:hover { transform: rotate(0) scale(1.01); }
.za-mapsec__map img { display: block; width: 100%; height: auto; border-radius: 20px; }
.za-mapsec__map figcaption { margin-top: 12px; text-align: center; font-size: 13.5px; color: var(--za-muted); }

/* ---------- Starters ---------- */
.za-starters { background: #fff; }
.za-starters__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.za-starter-card { position: relative; display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--t) 35%, #fff), color-mix(in srgb, var(--t) 8%, #fff) 70%); border: 1px solid color-mix(in srgb, var(--t) 30%, var(--za-line)); }
.za-starter-card__base { display: block; width: 62%; height: 230px; margin: 18px 0 0 6%; object-fit: contain; object-position: left bottom; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .18)); transition: transform .4s; }
.za-starter-card__mega { position: absolute; right: -6%; top: 16px; width: 52%; height: auto; opacity: .95; filter: drop-shadow(0 0 16px rgba(186, 120, 255, .6)); transition: transform .4s; }
.za-starter-card:hover .za-starter-card__base { transform: translateY(-6px); }
.za-starter-card:hover .za-starter-card__mega { transform: scale(1.06) rotate(-3deg); }
.za-starter-card__body { padding: 16px 20px 20px; }
.za-starter-card__body h3 { margin: 0 0 6px; font-family: var(--za-display); font-size: 26px; }
.za-starter-card__body p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: #3A4460; }

/* ---------- Personnages (hub) ---------- */
.za-cast { background: linear-gradient(160deg, var(--za-night), #121C42); color: #fff; }
.za-cast__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px 10px; margin: 0; padding: 0; list-style: none; }
.za-cast__grid li { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; text-align: center; }
.za-cast__grid img { width: 100%; max-width: 130px; height: auto; aspect-ratio: 1; object-fit: contain; transition: transform .3s, filter .3s; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .4)); }
.za-cast__grid li:hover img { transform: translateY(-6px) scale(1.04); filter: drop-shadow(0 0 18px rgba(47, 227, 138, .5)); }
.za-cast__grid b { font-family: var(--za-display); font-size: 15px; }
.za-cast__grid small { font-size: 11.5px; line-height: 1.3; color: rgba(255, 255, 255, .6); }

/* ---------- Le jeu ---------- */
.za-game { background: var(--za-paper); }
.za-game__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.za-game__grid > article { padding: 24px; border-radius: 24px; background: #fff; border: 1px solid var(--za-line); }
.za-game__grid h2 { margin: 6px 0 10px; font-family: var(--za-display); font-size: 24px; line-height: 1.15; }
.za-game__test { background: linear-gradient(160deg, var(--za-night), var(--za-night-3)) !important; color: #fff; border: 0 !important; }
.za-game__test .za-go { color: var(--za-green); }
.za-game__specs { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.za-game__specs li { display: grid; grid-template-columns: 80px auto; gap: 0 12px; align-items: baseline; padding: 12px 14px; border-radius: 14px; background: #FFF1F2; border-left: 5px solid #E60012; }
.za-game__specs li.is-ns2 { background: #EFFCF5; border-left-color: var(--za-green-d); }
.za-game__specs span { font-weight: 700; }
.za-game__specs b { font-family: var(--za-display); font-size: 26px; }
.za-game__specs small { grid-column: 1 / -1; font-size: 13px; color: var(--za-muted); }
.za-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.za-boxes figure { margin: 0; text-align: center; }
.za-boxes img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 14px 24px -14px rgba(0, 0, 0, .5); transition: transform .3s; }
.za-boxes figure:hover img { transform: translateY(-4px) rotate(-1.5deg); }
.za-boxes figcaption { margin-top: 8px; font-size: 12.5px; line-height: 1.35; color: var(--za-muted); }
.za-boxes b { color: var(--za-ink); }

/* ---------- Méga-Dimension ---------- */
.za-md { position: relative; isolation: isolate; padding: clamp(60px, 8vw, 110px) 0; color: #fff; overflow: hidden; background: #1A0B3A; }
.za-md__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.za-md__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20, 6, 46, .95) 0%, rgba(20, 6, 46, .75) 50%, rgba(20, 6, 46, .25) 100%); }
.za-md__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center; }
.za-md__copy { max-width: 620px; }
.za-md__logo { width: min(100%, 420px); height: auto; margin-bottom: 14px; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .5)); }
.za-md__copy > p { font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, .88); }
.za-md__chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 18px 0 22px; padding: 0; list-style: none; }
.za-md__chapters a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #fff; text-decoration: none; transition: background .2s; }
.za-md__chapters a:hover { background: rgba(255, 93, 162, .25); }
.za-md__chapters span { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 34px; clip-path: var(--za-pent); background: linear-gradient(160deg, #FF5DA2, var(--za-vio)); font-family: var(--za-display); font-weight: 700; padding-top: 4px; }
.za-md__chapters b { font-size: 14.5px; line-height: 1.3; }
.za-md__hoopa { width: clamp(220px, 28vw, 420px); height: auto; filter: drop-shadow(0 0 40px rgba(255, 93, 162, .5)); animation: za-float 6s ease-in-out infinite; }

/* ---------- Galerie ---------- */
.za-gallery { background: #fff; }
.za-gallery__grid { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 190px; gap: 12px; margin: 0; padding: 0; list-style: none; }
.za-gallery__grid li { position: relative; margin: 0; border-radius: 20px; overflow: hidden; }
.za-gallery__grid li.is-big { grid-column: span 2; grid-row: span 2; }
.za-gallery__grid .za-zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: zoom-in; background: var(--za-night); }
.za-gallery__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.za-gallery__grid li:hover img { transform: scale(1.05); }
.za-gallery__grid span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 10px; background: linear-gradient(transparent, rgba(7, 11, 24, .85)); color: #fff; font-size: 13px; pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.za-gallery__grid li:hover span { opacity: 1; transform: none; }

/* ---------- Guides ---------- */
.za-guides { background: var(--za-paper); }
.za-guides__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.za-guides__grid a { display: flex; flex-direction: column; height: 100%; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--za-line); color: var(--za-ink); text-decoration: none; transition: transform .25s, box-shadow .25s; }
.za-guides__grid a:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -30px rgba(7, 11, 24, .8); }
.za-guides__img { display: block; aspect-ratio: 16 / 9; background: var(--za-night); overflow: hidden; }
.za-guides__img img { width: 100%; height: 100%; object-fit: cover; }
.za-guides__grid b { padding: 12px 16px 2px; font-family: var(--za-display); font-size: 17px; line-height: 1.25; }
.za-guides__grid small { padding: 0 16px 16px; font-size: 13.5px; line-height: 1.45; color: var(--za-muted); }

/* ---------- Actus ---------- */
.za-news { background: #fff; }
.za-news__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.za-news__grid a { display: flex; flex-direction: column; gap: 6px; color: var(--za-ink); text-decoration: none; }
.za-news__img { display: block; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--za-night); }
.za-news__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.za-news__grid a:hover img { transform: scale(1.04); }
.za-news__grid time { font-size: 12.5px; color: var(--za-muted); }
.za-news__grid b { font-size: 16.5px; line-height: 1.35; }

.za-credits { padding: 24px 0 36px; background: #fff; }
.za-credits p { margin: 0; font-size: 12.5px; color: var(--za-muted); text-align: center; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .za-cast__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .za-game__grid { grid-template-columns: 1fr 1fr; }
  .za-game__boxes { grid-column: 1 / -1; }
  .za-hero__stats li { width: 128px; height: 120px; }
  .za-hero__stats b { font-size: 28px; }
}
@media (max-width: 900px) {
  .za-hero__inner { grid-template-columns: 1fr; }
  .za-hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .za-hero__stats li { width: auto; height: 112px; }
  .za-hero__stats li:nth-child(2n) { transform: none; }
  .za-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .za-sec__head--row { grid-template-columns: 1fr; }
  .za-mapsec__inner, .za-md__inner { grid-template-columns: 1fr; }
  .za-md__hoopa { justify-self: center; width: 220px; order: -1; }
  .za-starters__grid { grid-template-columns: 1fr; }
  .za-starter-card__base { height: 200px; }
  .za-news__grid { grid-template-columns: 1fr 1fr; }
  .za-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
  .za-ferox { grid-template-columns: 1fr; }
  .za-ferox__art { min-height: 220px; }
  .za-zone__head { grid-template-columns: 1fr; }
  .za-shots--3, .za-shots--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .za-banner__rank { width: 70px; height: 70px; font-size: 32px; right: 16px; top: 16px; }
  .za-banner__rank small { top: 18px; font-size: 8px; }
}
@media (max-width: 900px) {
  .za-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .za-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .za-banner { border-radius: 18px; min-height: 300px; }
  .za-banner__inner { padding: 20px 18px 22px; }
  .za-banner__logo img { width: 110px; }
  .za-hero { min-height: 0; }
  .za-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .za-tiles__grid a { padding: 14px; }
  .za-tiles__grid small { display: none; }
  .za-daynight__cols, .za-game__grid, .za-news__grid, .za-score__lists { grid-template-columns: 1fr; }
  .za-cast__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .za-md__chapters { grid-template-columns: 1fr; }
  .za-districts li { grid-template-columns: 1fr; }
  .za-districts p { grid-column: 1; grid-row: auto; margin-top: 4px; }
  .za-shots--2, .za-shots--3, .za-shots--4 { grid-template-columns: 1fr; }
  .za-score { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .za-progress { justify-content: center; }
  .za-boss__rank { display: none; }
  .za-boss__portrait { width: 72px; height: 72px !important; }
  .za-mission__num { min-width: 84px; font-size: 24px; }
  .za-filter__bar, .za-dex__bar { top: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .za-hero__bg, .za-banner__hoopa, .za-md__hoopa, .za-ferox__aura { animation: none; }
}

/* ============================================================
   CORPS D'ARTICLE : neutralise les styles génériques (.article-body)
   sur les composants du mini-site
   ============================================================ */
.pf-za .article-body [class*="za-"] img { margin: 0; border-radius: 0; }
.pf-za .article-body a[class^="za-"], .pf-za .article-body .za-mons a, .pf-za .article-body .za-team a, .pf-za .article-body .za-dexc a,
.pf-za .article-body .za-mega a, .pf-za .article-body .za-fxgrid a, .pf-za .article-body .za-chars a { color: var(--za-ink); text-decoration: none; }
.pf-za .article-body .za-fxgrid a { color: #fff; }
.pf-za .article-body a.za-go, .pf-za .article-body a.za-card__more { color: #0B7E48; }
.pf-za .article-body .za-chip img { width: 48px; height: 48px; }
.pf-za .article-body .za-team__img img { width: 72px; height: 72px; }
.pf-za .article-body .za-tabs__btn img { width: 26px; height: 26px; }
.pf-za .article-body .za-boss__portrait { border-radius: 18px; }
.pf-za .article-body .za-boss__portrait.is-pent { border-radius: 0; }
.pf-za .article-body .za-ferox__reward img, .pf-za .article-body .za-dexc__mega img, .pf-za .article-body .za-ladder__pic.is-mon { border-radius: 50%; }
.pf-za .article-body .za-zone__shot { position: relative; min-height: 230px; }
.pf-za .article-body .za-zone__shot .za-zoom { position: absolute; inset: 0; }
.pf-za .article-body .za-zone__shot img { position: absolute; inset: 0; width: 100%; height: 100% !important; min-height: 0; }
.pf-za .article-body .za-mons, .pf-za .article-body .za-team, .pf-za .article-body .za-megas, .pf-za .article-body .za-stones,
.pf-za .article-body .za-side, .pf-za .article-body .za-chars, .pf-za .article-body .za-fxgrid, .pf-za .article-body .za-ladder, .pf-za .article-body .za-dex__grid { margin-left: 0; padding-left: 0; }
.pf-za .article-body .za-mons > li, .pf-za .article-body .za-team > li, .pf-za .article-body .za-megas > li, .pf-za .article-body .za-stones > li,
.pf-za .article-body .za-side > li, .pf-za .article-body .za-chars > li, .pf-za .article-body .za-fxgrid > li, .pf-za .article-body .za-ladder > li, .pf-za .article-body .za-dex__grid > li { list-style: none; }
.pf-za .article-body .za-table { margin: 0; }
.pf-za .article-body .za-table th, .pf-za .article-body .za-table td { border: 0; border-bottom: 1px solid var(--za-line); }
.pf-za .article-body .za-vs table { margin: 0; border-radius: 0; }
.pf-za .article-body .za-vs th, .pf-za .article-body .za-vs td { border: 0; border-bottom: 1px solid var(--za-line); }
.pf-za .article-body .za-box p, .pf-za .article-body .za-boss__tips p, .pf-za .article-body .za-ferox__tips p { margin-bottom: 0; }
@media (max-width: 900px) { .pf-za .article-body .za-zone__shot { min-height: 0; aspect-ratio: 16 / 9; } }
.pf-za .za-boss__portrait.is-mon, .pf-za .article-body .za-boss__portrait.is-mon { object-fit: contain; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.25), rgba(255,255,255,.05)); padding: 6px; }
.pf-za .article-body .za-ferox__name, .pf-za .article-body .za-boss__name, .pf-za .article-body .za-zone__id h3, .pf-za .article-body .za-mission__body b { color: #fff; }
.pf-za .article-body .za-ferox strong, .pf-za .article-body .za-spoil strong { color: #fff; }
.pf-za .article-body .za-zone__group h4 { margin-top: 0; }
.pf-za .article-body .za-char b, .pf-za .article-body .za-card h3 { color: var(--za-ink); }
@media (max-width: 640px) {
  .za-team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .za-team__mon { padding: 8px 9px 10px; }
  .za-team__moves li { font-size: 10.5px; }
  .za-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .za-chip img { width: 40px; height: 40px; }
  .za-mons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .za-dex__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .za-dexc a { padding: 20px 4px 8px; }
  .za-dexc__img { width: 64px; height: 64px !important; }
  .za-dexc b { font-size: 12px; }
  .za-stones { grid-template-columns: 1fr; }
  .za-megas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) { .pf-za .article-body .za-chip img { width: 40px; height: 40px; } }