/* ═══════════════════ Zeus PC : palette « silicium et cuivre » ═══════════════════ */
:root {
  --bg: #f3f5f8; --surface: #fff; --surface-2: #e9edf3; --tray: #f7f8fb;
  --ink: #131722; --muted: #586174; --line: #d8dee8;
  --accent: #2446d6; --accent-ink: #fff; --accent-soft: #e3e9ff;
  --copper: #a8612b; --copper-soft: #f6e8dc; --bolt: #ff7a1a;
  --amd: #d8293a; --intel: #0a6fd6; --nvidia: #5a8f00;
  --metal-1: #e7eaef; --metal-2: #c3c9d3;
  --up: #1c7c45; --down: #b3261e;
  --shadow: 0 1px 2px rgb(19 23 34 / .06), 0 8px 24px rgb(19 23 34 / .06);
  --f-display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --wrap: 1200px; --radius: 12px;
  /* barres (extension Zeus PC – Barres) */
  --track: #e6eaf0;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1016; --surface: #141922; --surface-2: #1b212c; --tray: #eef1f5;
    --ink: #e7ebf2; --muted: #8d97a9; --line: #262e3b;
    --accent: #7d95ff; --accent-ink: #0d1016; --accent-soft: #1c2447;
    --copper: #e0a06a; --copper-soft: #33241a;
    --amd: #ff5b67; --intel: #4aa3ff; --nvidia: #8ccc2c;
    --metal-1: #2a313d; --metal-2: #1b2029;
    --up: #5fd08c; --down: #ff7b72;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .25);
    --track: #242c39;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { --zpc-track: var(--track); --zpc-ink: var(--ink); --zpc-muted: var(--muted); margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.6 var(--f-body); }
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--f-display); line-height: 1.1; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 600; }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); font-weight: 600; }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.zpt-wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.zpt-section { padding-block: clamp(2rem, 4.5vw, 3.5rem); }
.zpt-eyebrow { font: 500 .75rem/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--copper); margin-bottom: .75rem; }
.zpt-lede { font-size: 1.12rem; color: var(--muted); max-width: 60ch; }
.zpt-mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.zpt-muted { color: var(--muted); }
.zpt-small { font-size: .85rem; }
.zpt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zpt-skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 50; }
.zpt-skip:focus { left: 8px; }

/* Marques */
.b-amd { --brand: var(--amd); } .b-intel { --brand: var(--intel); } .b-nvidia { --brand: var(--nvidia); }
.zpt-tag { display: inline-flex; align-items: center; gap: .45em; font: 500 .7rem/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.zpt-tag::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--brand, var(--muted)); }

/* Boutons */
.zpt-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: 600 .95rem/1 var(--f-body); padding: .8rem 1.1rem; border-radius: 9px; border: 1px solid transparent; background: var(--accent); color: var(--accent-ink); text-decoration: none; cursor: pointer; transition: filter .15s; }
.zpt-btn:hover { filter: brightness(1.08); }
.zpt-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.zpt-btn-sm { padding: .6rem .9rem; font-size: .88rem; }
.zpt-link { font-weight: 600; font-size: .9rem; text-decoration: none; }
.zpt-link:hover { text-decoration: underline; }
.zpt-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 500; font-size: .9rem; text-decoration: none; }
.zpt-pill::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--brand); }
.zpt-pill:hover { border-color: var(--accent); }

/* ═══════════════════ En-tête ═══════════════════ */
.zpt-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.zpt-bar { display: flex; align-items: center; gap: 1.25rem; min-height: 68px; flex-wrap: wrap; padding-block: 8px; }
.zpt-logo { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink); margin-right: auto; }
.zpt-logo .lm-o { fill: var(--metal-2); stroke: var(--line); } .zpt-logo .lm-i { fill: var(--metal-1); } .zpt-logo .lm-b { fill: var(--bolt); }
.zpt-logo-words { display: grid; gap: 3px; line-height: 1; }
.zpt-logo-name { font: 700 1.35rem/1 var(--f-display); letter-spacing: .01em; }
.zpt-logo-sub { font: 500 .58rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.zpt-nav { display: flex; flex-wrap: wrap; gap: .2rem; }
.zpt-nav a { padding: .5rem .8rem; border-radius: 8px; color: var(--muted); font-weight: 500; text-decoration: none; }
.zpt-nav a:hover, .zpt-nav a[aria-current] { color: var(--ink); background: var(--surface-2); }
.zpt-search { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.zpt-search input { border: 0; background: transparent; color: var(--ink); font: inherit; padding: .55rem .8rem; width: 190px; outline: none; }
.zpt-search button { border: 0; background: transparent; color: var(--muted); padding: .55rem .7rem; cursor: pointer; }
.zpt-search:focus-within { border-color: var(--accent); }

/* ═══════════════════ Accueil ═══════════════════ */
.zpt-hero { border-bottom: 1px solid var(--line); background: radial-gradient(900px 380px at 85% 0%, color-mix(in srgb, var(--bolt) 12%, transparent), transparent 70%); }
.zpt-hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.zpt-hero-copy { display: grid; gap: 1.2rem; }
.zpt-hero-copy h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
.zpt-hero-search { display: flex; gap: .5rem; max-width: 540px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: var(--shadow); }
.zpt-hero-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1.02rem; padding: .6rem .7rem; outline: none; }
.zpt-quick { display: flex; flex-wrap: wrap; gap: .5rem; }
.zpt-diagram { position: relative; margin: 0; padding: 2.5rem 3rem; }
.zpt-diagram-chip { display: block; text-decoration: none; max-width: 330px; margin-inline: auto; transform: rotate(-4deg); transition: transform .3s; }
.zpt-diagram-chip:hover { transform: rotate(-2deg) scale(1.02); }
.zpt-co { position: absolute; display: inline-flex; gap: .35rem; align-items: baseline; font: 400 .8rem/1 var(--f-mono); color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: .5rem .65rem; box-shadow: var(--shadow); white-space: nowrap; }
.zpt-co b { font: 600 .98rem/1 var(--f-display); color: var(--ink); }
.zpt-co1 { top: 6%; right: 0; } .zpt-co1 b { color: var(--copper); }
.zpt-co2 { bottom: 16%; left: 0; } .zpt-co3 { bottom: 0; right: 8%; }

.zpt-podiums { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.zpt-podium { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.4rem; }
.zpt-podium-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.zpt-podium-head h2 { font-size: 1.2rem; }
.zpt-podium-head a { font-size: .88rem; font-weight: 600; text-decoration: none; }
.zpt-podium ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.zpt-podium li { display: grid; grid-template-columns: 30px 1fr auto; gap: .25rem .75rem; align-items: center; }
.zpt-rank { grid-row: span 2; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font: 700 .9rem var(--f-display); background: var(--surface-2); color: var(--ink); }
.zpt-podium li:first-child .zpt-rank { background: var(--bolt); color: #1a1206; }
.zpt-podium li a { color: var(--ink); font: 600 1rem/1.2 var(--f-display); text-decoration: none; }
.zpt-podium li a:hover { color: var(--accent); }
.zpt-score { font: 500 .82rem var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.zpt-meter { display: block; height: 6px; border-radius: 99px; background: var(--zpc-track); overflow: hidden; grid-column: 2 / -1; }
.zpt-meter > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff6a1a, #ffb347); }
.zpt-podium-gpu .zpt-meter > span, .zpt-meter-gpu > span { background: linear-gradient(90deg, #2f6bff, #35d0ff); }
.zpt-section-head { margin-bottom: 1rem; }

/* ═══════════════════ Pages de classement ═══════════════════ */
.zpt-page-head { display: grid; gap: .6rem; margin-bottom: 1.5rem; }
.zpt-page-head .zpt-eyebrow { margin: .5rem 0 0; }
.zpt-crumbs { font-size: .88rem; color: var(--muted); }
.zpt-crumbs a { color: var(--muted); text-decoration: none; }
.zpt-crumbs a:hover { color: var(--ink); }
.zpt-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.zpt-filters a { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 500; font-size: .92rem; }
.zpt-filters a[class]::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--brand); }
.zpt-filters a[aria-current] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.zpt-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.zpt-toolbar .woocommerce-result-count { margin: 0; color: var(--muted); font-size: .92rem; }
.zpt-toolbar-right { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.zpt-toolbar .woocommerce-ordering { margin: 0; }
.zpt-toolbar select, .zpt-picker select, .zpt-compare-with select { font: 500 .92rem var(--f-body); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: .55rem .75rem; }
.zpt-views { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--surface); }
.zpt-views a { padding: .5rem .85rem; color: var(--muted); text-decoration: none; font-size: .9rem; font-weight: 500; }
.zpt-views a[aria-current] { background: var(--surface-2); color: var(--ink); }

/* Grille de cartes */
.zpt-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.woocommerce ul.products.zpt-grid::before, .woocommerce ul.products.zpt-grid::after { display: none; }
.woocommerce ul.products.zpt-grid li.product.zpt-card { width: auto !important; float: none !important; margin: 0 !important; padding: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; overflow: hidden; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.woocommerce ul.products.zpt-grid li.product.zpt-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: var(--shadow); }
.zpt-card-link, .zpt-card-link * { color: inherit; text-decoration: none; }
.zpt-card-link { display: block; }
.zpt-card-media { position: relative; aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; background: var(--tray); display: grid; place-items: center; border-bottom: 1px solid var(--line); }
.zpt-card-media img, .zpt-p-media img, .zpt-duel-media img { position: absolute; inset: 14px; width: calc(100% - 28px) !important; height: calc(100% - 28px) !important; max-width: none; object-fit: contain; margin: 0 !important; padding: 0 !important; background: none !important; aspect-ratio: auto !important; transform: none !important; }
.zpt-card-media .zpt-chip { width: 58%; }
.zpt-rank-badge { position: absolute; top: 10px; left: 10px; font: 600 .78rem/1 var(--f-mono); padding: .35rem .5rem; border-radius: 6px; background: var(--ink); color: var(--bg); }
.zpt-card-body { padding: .9rem 1rem .2rem; display: grid; gap: .4rem; }
.zpt-card-title { font: 600 1.2rem/1.2 var(--f-display); color: var(--ink); }
.zpt-card .zpc-bars { margin: .6rem 1rem .9rem !important; }
.zpt-card-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: 0 1rem 1rem; }

/* Barres de l'extension : couleurs du thème */
body .zpc-bars { background: var(--surface-2); border-color: var(--line); }
body .zpc-row { color: var(--muted); }
body .zpc-value { color: var(--ink); }

/* Tableau */
.zpt-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.zpt-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.zpt-table th, .zpt-table td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.zpt-table tbody tr:last-child td { border-bottom: 0; }
.zpt-table thead th { font: 500 .72rem/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); white-space: nowrap; }
.zpt-table .r { text-align: right; width: 70px; }
.zpt-table tbody tr:hover { background: var(--surface-2); }
.zpt-t-name { display: grid; gap: .3rem; color: var(--ink); font: 600 1.02rem/1.2 var(--f-display); text-decoration: none; }
.zpt-t-name:hover { color: var(--accent); }
.zpt-col-score { min-width: 230px; }
.zpt-col-score { display: table-cell; }
td.zpt-col-score { white-space: nowrap; }
td.zpt-col-score .zpt-meter { display: inline-block; width: 140px; vertical-align: middle; margin-right: .6rem; }

/* Pagination */
.woocommerce nav.woocommerce-pagination { margin-top: 2rem; text-align: center; }
.woocommerce nav.woocommerce-pagination ul { display: inline-flex; gap: .4rem; border: 0; margin: 0; padding: 0; list-style: none; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 .6rem; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.zpt-empty { padding: 3rem 0; display: grid; gap: .5rem; }

/* ═══════════════════ Fiche produit ═══════════════════ */
.zpt-product .zpt-crumbs { padding-top: 1.5rem; }
.zpt-p-hero { display: grid; grid-template-columns: minmax(260px, 440px) 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; padding-block: 1.5rem 2.5rem; }
.zpt-p-media { position: sticky; top: 90px; overflow: hidden; min-height: 0; background: var(--tray); border: 1px solid var(--line); border-radius: 16px; padding: 22px; display: grid; place-items: center; aspect-ratio: 1; }
.zpt-p-media .zpt-chip { width: 70%; }
.zpt-credit { position: absolute; right: 10px; bottom: 8px; z-index: 1; font: 500 .68rem/1 var(--f-mono); color: #5d6678; background: rgb(255 255 255 / .85); padding: .3rem .45rem; border-radius: 5px; }
.zpt-p-info { display: grid; gap: 1rem; }
.zpt-p-info .product_title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.zpt-p-rank { color: var(--muted); }
.zpt-p-rank b { color: var(--copper); font-family: var(--f-display); font-size: 1.15em; }
.zpt-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.zpt-keys div { padding: .85rem 1rem; display: grid; gap: .2rem; }
.zpt-keys div + div { border-left: 1px solid var(--line); }
.zpt-keys dt { font: 600 clamp(1.15rem, 2vw, 1.5rem)/1 var(--f-display); }
.zpt-keys dd { margin: 0; font-size: .78rem; color: var(--muted); }
.zpt-p-info .zpc-bars { max-width: none !important; margin: 0 !important; }
.zpt-compare-with { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: .9rem 1rem; border: 1px dashed var(--line); border-radius: var(--radius); }
.zpt-compare-with label { font-weight: 600; }
.zpt-compare-with select { flex: 1; min-width: 200px; }
.zpt-p-layout { display: grid; grid-template-columns: 1fr 300px; gap: 3rem; align-items: start; padding-bottom: 3rem; }
.zpt-p-aside { position: sticky; top: 90px; display: grid; gap: .8rem; }
.zpt-p-aside h2 { font-size: 1.15rem; }
.zpt-near { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.zpt-near li { display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.zpt-near li > a:first-child { color: var(--ink); font: 600 1rem/1.2 var(--f-display); text-decoration: none; }
.zpt-near .zpt-link { grid-column: 1 / -1; font-size: .82rem; }
.zpt-delta { font: 500 .82rem var(--f-mono); }
.zpt-delta.up { color: var(--up); } .zpt-delta.down { color: var(--down); }

/* Encadré IA */
.zpt-ai { margin: 0 0 2.5rem; padding: 1.4rem 1.5rem; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, #10b981 9%, var(--surface)), var(--surface)); display: grid; gap: 1rem; }
.zpt-ai-head .zpt-eyebrow { color: #10b981; margin-bottom: .35rem; }
.zpt-ai-head h2 { font-size: 1.35rem; }
.zpt-ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
.zpt-ai-stat { display: grid; gap: .25rem; align-content: start; padding: .9rem 1rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.zpt-ai-stat b { font: 600 1.7rem/1 var(--f-display); color: var(--ink); }
.zpt-ai-stat span { font-weight: 500; }
.zpt-ai-stat small { color: var(--muted); font-size: .85rem; }
.zpt-ai-source { font-size: .82rem; color: var(--muted); }

/* Contenu rédigé (fiches) */
.zpt-prose { max-width: 72ch; font-size: 1.04rem; }
.zpt-prose > * + * { margin-top: 1rem; }
.zpt-prose h2 { font-size: 1.45rem; margin-top: 2.2rem; }
.zpt-prose ul { padding-left: 1.2rem; }
.zpt-prose li + li { margin-top: .3rem; }
.zpt-prose .zpc-lead { font-size: 1.15rem; line-height: 1.65; color: var(--ink); border-left: 4px solid var(--bolt); padding-left: 1rem; }
.zpt-prose .zpc-specs { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem; }
.zpt-prose .zpc-specs li { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .7rem .85rem; }
.zpt-prose .zpc-specs li strong { display: block; font: 500 .7rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.zpt-prose .zpc-source { font-size: .85rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: .75rem; }
.zpt-prose-page { max-width: 820px; }
.zpt-article h1 { margin-bottom: 1.2rem; }

/* ═══════════════════ Comparateur ═══════════════════ */
.zpt-vs-title { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 1.4rem; }
.zpt-vs-title .a { color: var(--accent); } .zpt-vs-title .b { color: var(--copper); }
.zpt-vs-title .vs { font: 500 .5em var(--f-mono); color: var(--muted); padding-inline: .2em; }
.zpt-picker { display: grid; grid-template-columns: 1fr 1fr auto; gap: .75rem; align-items: end; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1.6rem; }
.zpt-field { display: grid; gap: .35rem; font-size: .8rem; color: var(--muted); }
.zpt-duel { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.2rem; }
.zpt-duel-card { display: grid; gap: .45rem; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; border-top: 4px solid var(--accent); }
.zpt-duel-card.zpt-side-b { border-top-color: var(--copper); }
.zpt-duel-card:hover { box-shadow: var(--shadow); }
.zpt-duel-media { position: relative; overflow: hidden; min-height: 0; background: var(--tray); border-radius: 10px; aspect-ratio: 16 / 9; display: grid; place-items: center; }
.zpt-duel-media .zpt-chip { width: 34%; }
.zpt-duel-card h2 { font-size: 1.35rem; }
.zpt-duel-score b { font-size: 1.3rem; }
.zpt-verdict { padding: 1rem 1.2rem; border-left: 4px solid var(--bolt); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: 1.4rem; display: grid; gap: .4rem; }
.zpt-facebars { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; display: grid; gap: 1rem; }
.zpt-legend { display: flex; flex-wrap: wrap; gap: 1.2rem; font-weight: 600; }
.zpt-legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: .45rem; vertical-align: -1px; }
.zpt-legend .ka::before { background: var(--accent); } .zpt-legend .kb::before { background: var(--copper); }
.zpt-fb-row { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 1rem; align-items: center; padding-top: 1rem; border-top: 1px solid var(--line); }
.zpt-fb-label { font-weight: 500; }
.zpt-fb-pair { display: grid; gap: .35rem; }
.zpt-fb-line { display: grid; grid-template-columns: 1fr 8.5rem; gap: .75rem; align-items: center; }
.zpt-fb-track { height: 11px; border-radius: 99px; background: var(--zpc-track); overflow: hidden; }
.zpt-fb-track > span { display: block; height: 100%; border-radius: inherit; opacity: .45; }
.zpt-fb-line.a .zpt-fb-track > span { background: var(--accent); } .zpt-fb-line.b .zpt-fb-track > span { background: var(--copper); }
.zpt-fb-line.win .zpt-fb-track > span { opacity: 1; }
.zpt-fb-line b { text-align: right; font-size: .9rem; color: var(--muted); font-weight: 500; }
.zpt-fb-line.win b { color: var(--ink); }
.zpt-fb-line.win b::after { content: " ▲"; font-size: .7em; color: var(--accent); }
.zpt-fb-line.b.win b::after { color: var(--copper); }
.zpt-duel-links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }

/* ═══════════════════ Puce gravée (visuel sans image) ═══════════════════ */
.zpt-chip { aspect-ratio: 1; width: 100%; padding: 9%; border-radius: 8%; background: radial-gradient(circle at center, var(--copper) 0 1.2px, transparent 1.6px) 0 0 / 9px 9px, var(--surface-2); border: 1px solid var(--line); }
.zpt-ihs { position: relative; height: 100%; border-radius: 7%; background: repeating-linear-gradient(100deg, rgb(255 255 255 / .05) 0 2px, transparent 2px 5px), linear-gradient(150deg, var(--metal-1), var(--metal-2)); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; justify-content: center; gap: .25em; padding: 12%; overflow: hidden; }
.zpt-ihs::after { content: ""; position: absolute; left: 7%; bottom: 7%; border-left: 10px solid var(--copper); border-top: 10px solid transparent; }
.zpt-e-brand { font: 600 .9em/1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--brand); }
.zpt-e-name { font: 600 1.15em/1.15 var(--f-display); color: var(--ink); overflow-wrap: anywhere; }
.zpt-chip.zpt-lg { font-size: clamp(1rem, 2.2vw, 1.4rem); }

/* ═══════════════════ Pied de page ═══════════════════ */
.zpt-footer { border-top: 1px solid var(--line); background: var(--surface); margin-top: 2rem; }
.zpt-foot { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; padding-block: 2.5rem; }
.zpt-foot-brand p { color: var(--muted); max-width: 52ch; margin-top: .8rem; }
.zpt-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.zpt-footer ul a { color: var(--ink); text-decoration: none; }
.zpt-footer ul a:hover { color: var(--accent); }
.zpt-legal { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 1rem; color: var(--muted); font-size: .82rem; }
.zpt-404 { display: grid; gap: 1rem; }
.zpt-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* WooCommerce : notices et éléments résiduels */
.woocommerce-notices-wrapper:empty { display: none; }

/* ═══════════════════ Responsive ═══════════════════ */
@media (max-width: 1024px) {
  .zpt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zpt-p-layout { grid-template-columns: 1fr; }
  .zpt-p-aside { position: static; }
}
@media (max-width: 860px) {
  .zpt-hero-grid, .zpt-podiums, .zpt-p-hero { grid-template-columns: 1fr; }
  .zpt-diagram { max-width: 440px; width: 100%; margin-inline: auto; padding: 2rem 1rem 3rem; }
  .zpt-p-media { position: static; max-width: 420px; }
  .zpt-header { position: static; }
  .zpt-bar { gap: .6rem; }
  .zpt-nav { order: 2; width: 100%; flex-wrap: nowrap; overflow-x: auto; }
  .zpt-nav a { white-space: nowrap; padding: .45rem .7rem; }
  .zpt-search { order: 3; width: 100%; } .zpt-search input { width: 100%; }
  .zpt-foot { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .zpt-grid { grid-template-columns: 1fr; }
  .zpt-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zpt-keys div:nth-child(3) { border-left: 0; } .zpt-keys div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .zpt-picker, .zpt-duel { grid-template-columns: 1fr; }
  .zpt-fb-row { grid-template-columns: 1fr; gap: .5rem; }
  .zpt-fb-line { grid-template-columns: 1fr 7rem; }
  .zpt-nav { width: 100%; }
  .zpt-hero-search { flex-direction: column; }
  .zpt-co { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}