/*
 * Mini-site Pokémon Vents et Vagues (inc/vv-hub.php, inc/vv-dex.php).
 * Direction artistique du site officiel : dégradé lagon (vert menthe #71EEAF → turquoise #20C6D7 → bleu océan #096BE4),
 * filets dorés (#CDB03E), Inter très grasse, couleurs vives par type. html[data-vv] = ve (Vents, vert jade)
 * ou va (Vagues, bleu-violet et rose) bascule les accents.
 */

body.pf-vv {
  --vv-mint: #71EEAF;
  --vv-teal: #20C6D7;
  --vv-ocean: #096BE4;
  --vv-deep: #0A2F5C;
  --vv-jade: #34D89E;
  --vv-sky: #13ABDB;
  --vv-gold: #CDB03E;
  --vv-gold-soft: #FFF6D6;
  --vv-slate: #3E4B5A;
  --vv-ink: #17222E;
  --vv-muted: #52606D;
  --vv-line: #D9E8EB;
  --vv-bg: #F2F8F7;
  --vv-card: #FFFFFF;
  --vv-acc: #13A873;
  --vv-acc-2: #0B6E4E;
  --vv-acc-soft: #E2FAEF;
  --vv-acc-grad: linear-gradient(120deg, #4FEAA7 0%, #34CFD0 55%, #13ABDB 100%);
  --vv-iris: conic-gradient(from 210deg, #FFFDDD, #B8F7E6, #B9D9FF, #F5C6FF, #FFFDDD);
  --vv-font: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
}
html[data-vv="va"] body.pf-vv {
  --vv-acc: #2F6BFF;
  --vv-acc-2: #4B33C4;
  --vv-acc-soft: #E7EEFF;
  --vv-acc-grad: linear-gradient(120deg, #34CFD0 0%, #2F6BFF 55%, #8B4FD8 100%);
}

.vv, .vv-banner, .vv-quick, body.pf-vv .guide-article__body { font-family: var(--vv-font); color: var(--vv-ink); }
.vv { background: var(--vv-bg); overflow: hidden; }
.vv *, .vv-banner * { box-sizing: border-box; }
.vv img { max-width: 100%; height: auto; }
.vv a { color: var(--vv-acc-2); text-underline-offset: 3px; }
.vv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Pastilles de statut ---------- */
.vv-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font: 700 11px/1.5 var(--vv-font); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; vertical-align: middle; }
.vv-badge--ok { background: #DDF7E8; color: #0D6B41; }
.vv-badge--rumor { background: #FFE9DF; color: #B23C0B; }
.vv-badge--guess { background: #EEE7FF; color: #5432B8; }
.vv-badge--next { background: #E1EEFF; color: #1450B8; }
.vv-badge--unknown { background: #ECEFF2; color: #4A5562; }
.vv-badge--info { background: #DDF6F7; color: #0B6C76; }
.vv-badge--new { background: var(--vv-gold-soft); color: #7A6210; border: 1px solid #E7D48A; }

/* ---------- Types ---------- */
.vv-type { display: inline-block; padding: 3px 12px; border-radius: 999px; font: 800 12.5px/1.5 var(--vv-font); color: #fff; background: #8A939D; text-decoration: none; }
a.vv-type:hover { filter: brightness(1.08); }
.vv-type--plante { background: #42BF24; } .vv-type--feu { background: #FF612C; } .vv-type--eau { background: #2992FF; }
.vv-type--electrik { background: #FFDB00; color: #3B3200; } .vv-type--normal { background: #9FA19F; } .vv-type--glace { background: #3DCEF3; }
.vv-type--combat { background: #FF8000; } .vv-type--poison { background: #9141CB; } .vv-type--sol { background: #C0853A; }
.vv-type--vol { background: #82BAEF; color: #10233A; } .vv-type--psy { background: #EF4179; } .vv-type--insecte { background: #91A119; }
.vv-type--roche { background: #AFA981; color: #2A2814; } .vv-type--spectre { background: #704170; } .vv-type--dragon { background: #5060E1; }
.vv-type--tenebre { background: #624D4E; } .vv-type--acier { background: #60A1B8; } .vv-type--fee { background: #EF70EF; }
.vv-type--unknown { background: #E9EEF2; color: var(--vv-muted); }

/* ---------- Boutons et sélecteur de version ---------- */
.vv-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 999px; font: 800 15px/1 var(--vv-font); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.vv-btn--solid { background: var(--vv-acc-grad); color: #fff !important; box-shadow: 0 10px 24px rgba(9, 107, 228, .25); }
.vv-btn--line { background: rgba(255, 255, 255, .85); color: var(--vv-deep) !important; border: 2px solid rgba(10, 47, 92, .14); }
.vv-btn:hover { transform: translateY(-2px); }
.vv-switch { display: inline-flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .7); border: 1px solid rgba(10, 47, 92, .1); backdrop-filter: blur(6px); }
.vv-switch__btn { border: 0; cursor: pointer; padding: 10px 18px; border-radius: 999px; font: 800 14px/1 var(--vv-font); color: var(--vv-slate); background: transparent; transition: background .2s ease, color .2s ease; }
.vv-switch__btn span { font-weight: 600; opacity: .75; }
.vv-switch__btn--ve[aria-pressed="true"] { background: linear-gradient(120deg, #4FEAA7, #13A873); color: #fff; }
.vv-switch__btn--va[aria-pressed="true"] { background: linear-gradient(120deg, #2F8BFF, #6B45D8); color: #fff; }
.vv-switch__btn:focus-visible, .vv-btn:focus-visible, .vv-card:focus-visible, .vv-mon:focus-visible { outline: 3px solid var(--vv-gold); outline-offset: 3px; }
.vv-switch--sm .vv-switch__btn { padding: 7px 13px; font-size: 12.5px; }

/* ---------- Héros du hub ---------- */
.vv-hero { position: relative; isolation: isolate; min-height: 760px; padding-bottom: 40px; color: var(--vv-deep); }
.vv-hero__sky { position: absolute; inset: 0; z-index: -3; background: linear-gradient(180deg, #F4FFFA 0%, #D3F9EA 36%, #9DF0D3 58%, #7DE7D3 64%); }
.vv-hero__sun { position: absolute; top: -140px; right: 8%; width: 460px; height: 460px; border-radius: 50%; background: var(--vv-iris); opacity: .55; filter: blur(30px); }
.vv-hero__wind { position: absolute; z-index: -2; top: 0; left: 0; width: 100%; height: 62%; fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; opacity: .85; stroke-dasharray: 520 220; animation: vv-wind 14s linear infinite; }
.vv-hero__isles { position: absolute; z-index: -2; left: 0; bottom: 34%; width: 100%; height: 120px; fill: #4FCBA7; opacity: .5; }
.vv-hero__sea { position: absolute; z-index: -2; left: 0; right: 0; bottom: 0; height: 36%; background: linear-gradient(180deg, #2CD2D3 0%, #20C6D7 18%, #1593E2 60%, #096BE4 100%); }
.vv-hero__wave { position: absolute; z-index: -1; left: 0; width: 100%; height: 80px; }
.vv-hero__wave--back { bottom: calc(36% - 46px); fill: rgba(255, 255, 255, .55); }
.vv-hero__wave--mid { bottom: 22%; fill: rgba(255, 255, 255, .22); animation: vv-swell 7s ease-in-out infinite; }
.vv-hero__wave--front { bottom: 6%; fill: rgba(255, 255, 255, .16); animation: vv-swell 9s ease-in-out infinite reverse; }
.vv-hero__inner { position: relative; padding-top: 44px; padding-bottom: 260px; text-align: center; }
.vv-hero__content { max-width: 860px; margin: 0 auto; }
.vv-hero__kicker { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 18px; }
.vv-hero__kicker span { padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, .78); font: 800 12.5px/1.4 var(--vv-font); letter-spacing: .06em; text-transform: uppercase; color: var(--vv-deep); box-shadow: 0 2px 10px rgba(9, 107, 228, .08); }
.vv-title { margin: 0; line-height: 1; }
.vv-title__logos { display: flex; justify-content: center; align-items: center; gap: clamp(8px, 3vw, 40px); }
.vv-title__logo { width: min(400px, 44vw); filter: drop-shadow(0 12px 22px rgba(10, 47, 92, .18)); transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .45s ease; }
html[data-vv="ve"] .vv-title__logo--va, html:not([data-vv]) .vv-title__logo--va { opacity: .55; transform: scale(.78); }
html[data-vv="va"] .vv-title__logo--ve { opacity: .55; transform: scale(.78); }
.vv-hero__motto { margin: 18px 0 10px; font: 900 clamp(20px, 2.6vw, 28px)/1.15 var(--vv-font); letter-spacing: -.01em; color: var(--vv-deep); text-wrap: balance; }
.vv-hero__lead { max-width: 64ch; margin: 0 auto 22px; font: 500 17px/1.6 var(--vv-font); color: #23435E; }
.vv-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }
.vv-hero__beach { position: absolute; left: 0; right: 0; bottom: 64px; display: flex; justify-content: center; align-items: flex-end; gap: clamp(4px, 2vw, 34px); pointer-events: none; }
.vv-hero__mon { width: clamp(96px, 13vw, 190px); filter: drop-shadow(0 16px 14px rgba(5, 40, 90, .28)); animation: vv-bob 4.5s ease-in-out infinite; }
.vv-hero__mon--caloulou { width: clamp(104px, 14vw, 200px); animation-delay: -1.5s; }
.vv-hero__mon--ogeko { width: clamp(110px, 15vw, 210px); animation-delay: -3s; }
.vv-hero__pika { width: clamp(100px, 14vw, 200px); filter: drop-shadow(0 16px 14px rgba(5, 40, 90, .28)); transition: transform .4s ease, opacity .4s ease; }
html[data-vv="ve"] .vv-hero__pika--va, html:not([data-vv]) .vv-hero__pika--va { opacity: .7; transform: scale(.88); }
html[data-vv="va"] .vv-hero__pika--ve { opacity: .7; transform: scale(.88); }
.vv-hero__updated { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0 auto; text-align: right; font: 600 12.5px/1 var(--vv-font); color: rgba(255, 255, 255, .92); }

@keyframes vv-wind { to { stroke-dashoffset: -1480; } }
@keyframes vv-swell { 50% { transform: translateX(-30px); } }
@keyframes vv-bob { 50% { transform: translateY(-8px); } }

/* ---------- Sections ---------- */
.vv-sec { padding: 76px 0; }
.vv-sec--facts, .vv-sec--pika, .vv-sec--region, .vv-sec--timeline, .vv-sec--next, .vv-sec--sources { background: #fff; }
.vv-sec--starters { background: linear-gradient(180deg, #E9FFF5 0%, #E4F6FF 100%); }
.vv-sec--versions { background: linear-gradient(135deg, #E6FFF3 0%, #E6F3FF 55%, #F2E9FF 100%); }
.vv-sec--dex, .vv-sec--guide, .vv-sec--faq { background: var(--vv-bg); }
.vv-narrow { max-width: 880px; }
.vv-head { margin-bottom: 30px; }
.vv-head--center { text-align: center; }
.vv-head--center > p { max-width: 64ch; margin: 12px auto 0; color: var(--vv-muted); font-size: 16.5px; line-height: 1.6; }
.vv-head__kicker { display: inline-flex; align-items: center; gap: 8px; font: 800 12.5px/1 var(--vv-font); letter-spacing: .14em; text-transform: uppercase; color: var(--vv-acc-2); }
.vv-head__kicker::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--vv-acc-grad); box-shadow: 0 0 0 3px var(--vv-acc-soft); }
.vv-head h2, .vv-sec h2 { margin: 10px 0 0; font: 900 clamp(26px, 3.4vw, 40px)/1.08 var(--vv-font); letter-spacing: -.02em; color: var(--vv-deep); text-wrap: balance; }
.vv-head h2::after { content: ""; display: block; width: 150px; height: 10px; margin-top: 14px; background: radial-gradient(circle, var(--vv-gold) 0 3.5px, transparent 4.5px) center / 10px 10px no-repeat, linear-gradient(90deg, transparent, var(--vv-gold) 22%, var(--vv-gold) 78%, transparent) center / 100% 2px no-repeat; }
.vv-head--center h2::after { margin-left: auto; margin-right: auto; }
.vv-sec p { line-height: 1.68; }
.vv-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.vv-split > div > p { font-size: 16.5px; color: #283B4C; }
.vv-more { margin-top: 18px; font-weight: 700; }
.vv-more--center { text-align: center; }
.vv-group { margin: 34px 0 14px; font: 900 15px/1.2 var(--vv-font); letter-spacing: .12em; text-transform: uppercase; color: var(--vv-slate); }

/* ---------- Fiche technique ---------- */
.vv-facts { margin: 0; padding: 8px 24px; border-radius: 24px; background: #fff; border: 1px solid var(--vv-line); box-shadow: 0 18px 40px rgba(9, 107, 228, .08); }
.vv-facts__row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--vv-line); }
.vv-facts__row:last-child { border-bottom: 0; }
.vv-facts dt { font-weight: 800; color: var(--vv-slate); }
.vv-facts dd { margin: 0; color: var(--vv-ink); line-height: 1.5; }

/* ---------- Cartes de Pokémon ---------- */
.vv-mons { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; }
.vv-mons--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vv-mons--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vv-mons--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.vv-mon { --mon: #20C6D7; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 18px 24px; border-radius: 26px; background: #fff; border-top: 6px solid var(--mon); text-align: center; text-decoration: none; color: var(--vv-ink) !important; box-shadow: 0 14px 34px rgba(9, 60, 120, .1); transition: transform .2s ease, box-shadow .2s ease; }
.vv-mon:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(9, 60, 120, .16); }
.vv-mon__art { display: grid; place-items: center; width: 100%; aspect-ratio: 1; max-width: 220px; border-radius: 50%; background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--mon) 26%, #fff) 0%, color-mix(in srgb, var(--mon) 8%, #fff) 58%, transparent 71%); }
.vv-mon__art img { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .12)); }
.vv-mon__no { font: 700 12px/1 var(--vv-font); letter-spacing: .1em; color: var(--vv-muted); }
.vv-mon__name { font: 900 26px/1.05 var(--vv-font); letter-spacing: -.02em; }
.vv-mon__en { font-size: 13.5px; color: var(--vv-muted); }
.vv-mon__types { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.vv-mon__cat { font-size: 13.5px; font-weight: 600; color: var(--vv-slate); }
.vv-mon--pika .vv-mon__art { background: radial-gradient(circle at 50% 55%, #FFF3BF 0%, color-mix(in srgb, var(--mon) 12%, #fff) 60%, transparent 71%); }

/* ---------- Versions ---------- */
.vv-versions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.vv-version { position: relative; margin: 0; padding: 26px 24px 0; border-radius: 30px; overflow: hidden; display: flex; flex-direction: column; align-items: center; min-height: 460px; transition: transform .3s ease, box-shadow .3s ease; }
.vv-version--ve { background: linear-gradient(160deg, #F2FFF8 0%, #9FF0CC 60%, #34CFA0 100%); }
.vv-version--va { background: linear-gradient(160deg, #F1F5FF 0%, #A9C4FF 55%, #6E4FD8 100%); }
.vv-version__logo { width: min(360px, 90%); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .15)); }
.vv-version__heroes { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin-top: auto; }
.vv-version__heroes img { height: 300px; width: auto; }
.vv-version figcaption { position: absolute; top: 18px; left: 22px; font: 800 12px/1 var(--vv-font); letter-spacing: .14em; text-transform: uppercase; color: rgba(10, 47, 92, .65); }
html[data-vv="ve"] .vv-version--ve, html[data-vv="va"] .vv-version--va { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--vv-gold), 0 24px 50px rgba(9, 60, 120, .18); }

/* ---------- Région ---------- */
.vv-pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vv-pillars li { padding: 22px; border-radius: 22px; background: linear-gradient(145deg, #F0FFF8, #E5F4FF); border: 1px solid var(--vv-line); }
.vv-pillars b { display: block; font: 900 20px/1.1 var(--vv-font); color: var(--vv-deep); }
.vv-pillars span { display: block; margin-top: 6px; color: var(--vv-muted); font-size: 14.5px; line-height: 1.45; }

/* ---------- Pokédex (pastilles) ---------- */
.vv-dex { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.vv-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 12px; border-radius: 18px; background: #fff; border: 1px solid var(--vv-line); text-decoration: none; color: var(--vv-ink) !important; font: 700 13.5px/1.2 var(--vv-font); text-align: center; transition: transform .15s ease, border-color .15s ease; }
.vv-chip:hover { transform: translateY(-2px); border-color: var(--vv-teal); }
.vv-chip img { width: 72px; height: 72px; object-fit: contain; }
.vv-dex__item.is-first .vv-chip { box-shadow: inset 0 3px 0 var(--vv-teal); }

/* ---------- Chronologie ---------- */
.vv-timeline { list-style: none; margin: 0; padding: 0 0 0 28px; border-left: 3px solid #CFEDE6; }
.vv-timeline__item { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding: 0 0 28px; }
.vv-timeline__item::before { content: ""; position: absolute; left: -38px; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; border: 4px solid var(--vv-teal); }
.vv-timeline__item--rumor::before { border-color: #F07A45; }
.vv-timeline__item--next::before { border-color: #2F6BFF; border-style: dashed; }
.vv-timeline time { font: 900 15px/1.3 var(--vv-font); color: var(--vv-deep); }
.vv-timeline strong { display: block; margin: 6px 0 4px; font: 800 18px/1.25 var(--vv-font); color: var(--vv-ink); }
.vv-timeline p { margin: 0; color: var(--vv-muted); line-height: 1.6; }

/* ---------- Cartes de pages ---------- */
.vv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.vv-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 20px; background: #fff; border: 1px solid var(--vv-line); text-decoration: none; color: var(--vv-ink) !important; transition: transform .15s ease, box-shadow .15s ease; }
.vv-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(9, 60, 120, .1); }
.vv-card__art { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 16px; background: linear-gradient(150deg, #E9FFF4, #DDEEFF); overflow: hidden; }
.vv-card__art img { max-width: 86%; max-height: 86%; object-fit: contain; }
.vv-card__body strong { display: block; font: 900 16.5px/1.2 var(--vv-font); color: var(--vv-deep); }
.vv-card__body span { display: block; margin-top: 4px; font-size: 13.8px; line-height: 1.45; color: var(--vv-muted); }

/* ---------- À venir, FAQ, sources ---------- */
.vv-unknown { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.vv-unknown li { position: relative; padding: 12px 16px 12px 50px; border-radius: 16px; background: #F5F9FB; border: 1px dashed #C6D8DF; font-weight: 600; color: var(--vv-slate); }
.vv-unknown li::before { content: "?"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 900 14px/1 var(--vv-font); color: #fff; background: var(--vv-acc-grad); }
.vv-unknown--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vv-faq { display: grid; gap: 12px; }
.vv-faq__q { border-radius: 18px; background: #fff; border: 1px solid var(--vv-line); padding: 0 20px; }
.vv-faq__q summary { cursor: pointer; padding: 18px 0; font: 800 16.5px/1.35 var(--vv-font); color: var(--vv-deep); list-style: none; }
.vv-faq__q summary::-webkit-details-marker { display: none; }
.vv-faq__q summary::after { content: "+"; float: right; margin-left: 12px; font-weight: 900; color: var(--vv-acc); }
.vv-faq__q[open] summary::after { content: "–"; }
.vv-faq__q p { margin: 0 0 18px; color: #2C3E50; line-height: 1.65; }
.vv-sources { padding: 26px 28px; border-radius: 24px; background: var(--vv-gold-soft); border: 1px solid #EAD996; }
.vv-sources h2 { font-size: 22px; margin: 0 0 8px; }
.vv-sources p { margin: 0; color: #3F3A26; }

/* ---------- Contenus des pages (shortcodes) ---------- */
.vv-lead { font: 500 19px/1.6 var(--vv-font); color: #1E3346; margin: 0 0 18px; }
.vv-updated { margin: 0 0 22px; font: 600 13px/1.4 var(--vv-font); color: var(--vv-muted); }
.vv-note { position: relative; margin: 22px 0; padding: 18px 20px 6px; border-radius: 18px; background: #fff; border: 1px solid var(--vv-line); border-left: 5px solid var(--vv-teal); }
.vv-note--ok { border-left-color: #1FB57E; } .vv-note--rumor { border-left-color: #F07A45; background: #FFF8F4; }
.vv-note--guess { border-left-color: #7B57E0; background: #FAF8FF; } .vv-note--next { border-left-color: #2F6BFF; }
.vv-note--unknown { border-left-color: #9AA6B2; } .vv-note--info { border-left-color: var(--vv-teal); }
.vv-note .vv-badge { margin-bottom: 6px; }
.vv-note__title { display: block; margin: 2px 0 6px; font: 800 16.5px/1.3 var(--vv-font); color: var(--vv-deep); }
.vv-note p { margin: 0 0 12px; }
.vv-tablewrap { overflow-x: auto; margin: 18px 0; border-radius: 18px; border: 1px solid var(--vv-line); background: #fff; }
.vv-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14.5px; }
.vv-table th, .vv-table td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--vv-line); }
.vv-table thead th { font: 800 12px/1.3 var(--vv-font); letter-spacing: .08em; text-transform: uppercase; color: var(--vv-slate); background: #F3FAF8; }
.vv-table tr:last-child td, .vv-table tr:last-child th { border-bottom: 0; }
.vv-table tbody th { font-weight: 600; }
.vv-table tbody th small { display: block; font-weight: 500; color: var(--vv-muted); }
.vv-table__types, .vv-table__lv { display: block; font-size: 13px; color: var(--vv-muted); }
.vv-table tr.is-next td, .vv-table tr.is-next th { background: var(--vv-acc-soft); font-weight: 700; }

/* ---------- Pages du mini-site : bannière ---------- */
body.pf-vv .guide-article__body h2 { font: 900 clamp(22px, 2.6vw, 28px)/1.15 var(--vv-font); letter-spacing: -.015em; color: var(--vv-deep); margin-top: 38px; }
body.pf-vv .guide-article__body h3 { font: 800 19px/1.25 var(--vv-font); color: var(--vv-deep); }
body.pf-vv .guide-article__body p, body.pf-vv .guide-article__body li { font-size: 16.5px; line-height: 1.7; }
.vv-banner { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; min-height: 280px; margin: 0 0 6px; padding: 26px 26px 0; border-radius: 28px; background: linear-gradient(180deg, #F2FFF9 0%, #BDF5E2 52%, #5ED9D2 66%, #1593E2 84%, #096BE4 100%); }
html[data-vv="va"] .vv-banner { background: linear-gradient(180deg, #F3F6FF 0%, #CFDCFF 50%, #6FC9E8 66%, #2F6BFF 84%, #4B33C4 100%); }
.vv-banner__wind { position: absolute; z-index: -1; inset: 0; background:
  radial-gradient(120% 60% at 15% 22%, transparent 48%, rgba(255, 255, 255, .7) 49%, transparent 51%),
  radial-gradient(110% 55% at 75% 12%, transparent 48%, rgba(255, 255, 255, .55) 49%, transparent 51%); }
.vv-banner__sea { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 34%; background: repeating-radial-gradient(ellipse 60px 16px at 50% 0, rgba(255, 255, 255, .22) 0 3px, transparent 4px 16px); }
.vv-banner__inner { padding-bottom: 26px; }
.vv-banner__brand { display: inline-block; }
.vv-banner__logo { width: 150px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .15)); }
html[data-vv="va"] .vv-banner__logo--ve, html[data-vv="ve"] .vv-banner__logo--va, html:not([data-vv]) .vv-banner__logo--va { display: none; }
.vv-banner__kicker { margin: 10px 0 0; font: 800 12px/1.3 var(--vv-font); letter-spacing: .12em; text-transform: uppercase; color: var(--vv-deep); }
.vv-banner__title { margin: 6px 0 0; font: 900 clamp(28px, 4vw, 44px)/1.04 var(--vv-font); letter-spacing: -.025em; color: var(--vv-deep); text-wrap: balance; }
.vv-banner__hook { max-width: 56ch; margin: 10px 0 0; font: 600 16px/1.5 var(--vv-font); color: #183A5A; }
.vv-banner__updated { margin: 10px 0 12px; font: 600 12.5px/1 var(--vv-font); color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.vv-banner__art { align-self: end; width: clamp(150px, 22vw, 250px); max-height: 270px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 14px 14px rgba(5, 40, 90, .3)); }
.vv-banner--hero .vv-banner__art { width: auto; height: 270px; }
.vv-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 24px; }
.vv-quick a { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--vv-line); font: 700 13px/1.2 var(--vv-font); color: var(--vv-deep); text-decoration: none; }
.vv-quick a:hover, .vv-quick a[aria-current="page"] { background: var(--vv-acc-grad); color: #fff; border-color: transparent; }

/* ---------- Fiches des nouveaux Pokémon ---------- */
.vv-fiche { --mon: #20C6D7; }
.vv-fiche__hero { position: relative; padding: 18px 0 56px; background: linear-gradient(180deg, #F4FFFA 0%, color-mix(in srgb, var(--mon) 18%, #E8FBFF) 62%, color-mix(in srgb, var(--mon) 30%, #CFF4FF) 100%); }
.vv-fiche__hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 48px; background: var(--vv-bg); clip-path: path('M0 30 Q 120 0 240 24 T 480 24 T 720 24 T 960 24 T 1200 24 T 1440 24 T 1680 24 T 1920 24 V 48 H 0 Z'); }
.vv-fiche__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; margin-top: 14px; }
.vv-fiche__art { position: relative; margin: 0; text-align: center; }
.vv-fiche__halo { position: absolute; inset: 8% 10%; border-radius: 50%; background: var(--vv-iris); opacity: .7; filter: blur(16px); z-index: 0; }
.vv-fiche__art img { position: relative; z-index: 1; width: min(420px, 100%); filter: drop-shadow(0 18px 18px rgba(5, 40, 90, .22)); }
.vv-fiche__art figcaption { position: relative; z-index: 1; margin-top: 8px; font-size: 12px; color: var(--vv-muted); }
.vv-fiche__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font: 700 13px/1.4 var(--vv-font); color: var(--vv-slate); }
.vv-fiche__kicker span:not(.vv-badge) { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .8); }
.vv-fiche__name { margin: 12px 0 4px; font: 900 clamp(42px, 6vw, 72px)/.95 var(--vv-font); letter-spacing: -.035em; color: var(--vv-deep); }
.vv-fiche__alt { margin: 0 0 14px; font: 600 15.5px/1.4 var(--vv-font); color: var(--vv-muted); }
.vv-fiche__types { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.vv-fiche__types .vv-type { font-size: 15px; padding: 6px 18px; }
.vv-fiche__data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.vv-fiche__data div { padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .85); border: 1px solid rgba(10, 47, 92, .08); }
.vv-fiche__data dt { font: 700 11.5px/1.3 var(--vv-font); letter-spacing: .08em; text-transform: uppercase; color: var(--vv-muted); }
.vv-fiche__data dd { margin: 4px 0 0; font: 800 16px/1.3 var(--vv-font); color: var(--vv-ink); }
.vv-fiche__body { max-width: 900px; padding-top: 34px; padding-bottom: 70px; }
.vv-fiche .vv-sec { padding: 26px 0 8px; }
.vv-fiche .vv-sec h2 { font-size: clamp(22px, 2.8vw, 30px); margin-bottom: 12px; }
.vv-fiche .vv-sec p { font-size: 16.5px; color: #26394B; }
.vv-eff { margin: 12px 0 0; display: grid; gap: 10px; }
.vv-eff__row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--vv-line); }
.vv-eff dt { font-weight: 800; color: var(--vv-slate); }
.vv-eff dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vv-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.vv-links a { padding: 10px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--vv-line); font-weight: 700; text-decoration: none; }
.vv-fiche .dex-breadcrumb, .vv-fiche .breadcrumb, .vv-fiche nav[aria-label*="riane"] { font-size: 13.5px; }

/* ---------- Mobile ---------- */
@media (max-width: 980px) {
  .vv-split { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .vv-mons--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .vv-fiche__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .vv-version__heroes img { height: 230px; }
}
@media (max-width: 720px) {
  .vv-hero { min-height: 0; }
  .vv-hero__inner { padding-top: 26px; padding-bottom: 190px; }
  .vv-title__logo { width: 46vw; }
  .vv-hero__lead { font-size: 15.5px; }
  .vv-hero__beach { bottom: 48px; }
  .vv-hero__pika { width: 74px; }
  .vv-hero__mon { width: 78px; } .vv-hero__mon--caloulou { width: 84px; } .vv-hero__mon--ogeko { width: 92px; }
  .vv-hero__updated { text-align: center; }
  .vv-sec { padding: 52px 0; }
  .vv-mons--3, .vv-mons--2, .vv-versions { grid-template-columns: minmax(0, 1fr); }
  .vv-mon__art { max-width: 180px; }
  .vv-version { min-height: 0; }
  .vv-version__heroes img { height: 190px; }
  .vv-facts { padding: 6px 16px; }
  .vv-facts__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .vv-timeline__item { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .vv-unknown--grid, .vv-pillars { grid-template-columns: minmax(0, 1fr); }
  .vv-cards { grid-template-columns: minmax(0, 1fr); }
  .vv-banner { grid-template-columns: minmax(0, 1fr); padding: 20px 18px 0; min-height: 0; }
  .vv-banner__art { justify-self: center; width: 150px; max-height: 170px; }
  .vv-banner--hero .vv-banner__art { height: 180px; }
  .vv-fiche__data { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vv-eff__row { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .vv-hero__wind, .vv-hero__wave, .vv-hero__mon { animation: none !important; }
  .vv-title__logo, .vv-hero__pika, .vv-btn, .vv-mon, .vv-card, .vv-chip { transition: none !important; }
}