/* Kaptr.me — page /ai/ (benchmarks des trois modèles disponibles). S'appuie sur styles.css + marketing-pages.css ;
   ici seulement les cartes modèles, les graphiques-questions, le visuel « 100 crédits », la section Agent et le guide.
   Une couleur par modèle, reprise des logos (Fast = corail, Vision = violet, Agent = vert d'eau), validée
   contraste + daltonisme pour chaque thème. */
.ai-bench-page {
  --s-fast: #d9663f;
  --s-vision: #9a6cf5;
  --s-agent: #1c9c86;
  --chart-grid: rgba(255, 255, 255, .07);
  --chart-surface: #0b0a13;
  --track: rgba(255, 255, 255, .06);
}
:root[data-theme="light"] .ai-bench-page {
  --s-fast: #c4502a;
  --s-vision: #7c43e6;
  --s-agent: #0f8a75;
  --chart-grid: rgba(24, 20, 37, .08);
  --chart-surface: #ffffff;
  --track: rgba(24, 20, 37, .06);
}
.fam-fast { --fam: var(--s-fast); }
.fam-vision { --fam: var(--s-vision); }
.fam-agent { --fam: var(--s-agent); }

.ai-bench .page-hero h1 em, .ai-bench .h2 em { font-style: normal; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bench-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.bench-meta > * { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font: 500 .74rem/1 var(--mono); letter-spacing: .04em; color: var(--text-2); }
.bench-meta svg { width: 14px; height: 14px; }
.bench-meta a { color: var(--violet-2); text-decoration: none; border-color: var(--line-2); }
.bench-meta a:hover { background: var(--panel-2); }
.model-logo { width: 44px; height: 44px; flex: none; }

.model-for { font-size: .98rem; line-height: 1.5; color: var(--text-2); }

/* ------------------------------------------------------------- Agent */
.agent-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 14px; padding: 0; list-style: none; counter-reset: none; }
.agent-steps li { padding: 22px; border-radius: 22px; border: 1px solid var(--line); background: var(--panel); }
.agent-steps b { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--s-agent); color: #fff; font-weight: 800; }
.agent-steps h3 { margin: 14px 0 6px; font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; }
.agent-steps p { font-size: .9rem; line-height: 1.55; color: var(--text-2); }
.agent-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 14px; align-items: start; }
.chart-card { margin: 0; padding: clamp(18px, 2.4vw, 26px); border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
.chart-head { margin-bottom: 14px; }
.chart-head b { display: block; font-size: 1.05rem; font-weight: 800; letter-spacing: -.015em; color: var(--text); }
.chart-head span { display: block; margin-top: 4px; font-size: .84rem; color: var(--text-3); }
.chart { position: relative; width: 100%; min-height: 80px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--font); fill: var(--text-3); font-size: 12px; }
.chart .t-strong { fill: var(--text); font-weight: 700; }
.chart .t-mid { fill: var(--text-2); }
.chart .grid { stroke: var(--chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart-note { margin-top: 12px; font-size: .86rem; line-height: 1.55; color: var(--text-2); }
.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0; padding: 0; list-style: none; }
.checks li { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 600; color: var(--text); }
.checks svg { width: 16px; height: 16px; color: var(--green); }
.agent-uses { padding: 26px; border-radius: 24px; border: 1px solid var(--line); background: var(--panel); }
.agent-uses h3 { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.agent-uses h3:not(:first-child) { margin-top: 22px; }
.uses { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.uses li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.uses b { font-size: .74rem; font: 500 .66rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--s-agent); }
.uses span { font-size: .92rem; color: var(--text); }
.uses-note { margin-top: 10px; font-size: .8rem; line-height: 1.5; color: var(--text-3); }
.nevers { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.nevers li { position: relative; padding-left: 22px; font-size: .9rem; color: var(--text-2); }
.nevers li::before { content: "×"; position: absolute; left: 4px; top: -1px; font-weight: 800; color: var(--red); }

/* ------------------------------------------------------------- Ask AI */
.ask-steps b { background: var(--violet); }
.ask-steps strong { color: var(--text); }
.ask-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.ask-demo { display: grid; gap: 12px; margin: 0; padding: 26px; border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
.ask-q { justify-self: end; max-width: 80%; padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: var(--brand); color: #fff; font-weight: 600; font-size: .95rem; }
.ask-a { display: grid; gap: 10px; padding: 16px 18px; border-radius: 18px 18px 18px 4px; border: 1px solid var(--line-2); background: var(--panel-2); }
.ask-badge { justify-self: start; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); font: 600 .7rem/1 var(--mono); letter-spacing: .04em; }
.ask-a p { font-size: .94rem; line-height: 1.55; color: var(--text); }
.ask-a .ask-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 500 .7rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.ask-src span { padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line-2); font-family: var(--font); letter-spacing: 0; text-transform: none; font-size: .78rem; color: var(--violet-2); }
.ask-demo figcaption { font-size: .78rem; color: var(--text-3); }
.ask-tiers { padding: 26px; border-radius: 24px; border: 1px solid var(--line); background: var(--panel); }
.ask-tiers h3 { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.ask-tiers td b { display: block; color: var(--text); }
.ask-tiers td small { display: block; font-size: .74rem; color: var(--text-3); }
.ask-facts { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.ask-facts li { display: flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--text); }
.ask-facts svg { width: 16px; height: 16px; flex: none; color: var(--green); }

/* ------------------------------------------------------------- quel modèle choisir */
.pick { display: grid; gap: 10px; max-width: 880px; margin: 0 auto; }
.pick-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 300px); align-items: center; gap: 18px; padding: 18px 22px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); color: inherit; text-decoration: none; transition: border-color .3s var(--ease), transform .3s var(--ease); }
.pick-row:hover { border-color: var(--fam); transform: translateY(-1px); }
.pick-need { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.pick-arrow svg { width: 22px; height: 22px; color: var(--fam); }
.pick-model { display: flex; align-items: center; gap: 12px; font-weight: 800; color: var(--text); }
.pick-model .model-logo { width: 36px; height: 36px; }
.pick-model small { display: block; margin-left: auto; font-weight: 500; font-size: .82rem; color: var(--text-3); white-space: nowrap; }

/* ------------------------------------------------------------- méthode */
.method-list { display: grid; gap: 10px; max-width: 900px; margin: 0; padding-left: 18px; }
.method-list li { font-size: .92rem; line-height: 1.6; color: var(--text-2); }
.method-list b { color: var(--text); }
.method-list li:empty { display: none; }
.raw { margin-top: 20px; }
.raw summary { cursor: pointer; width: fit-content; font-size: .88rem; font-weight: 700; color: var(--violet-2); }
.table-wrap { overflow-x: auto; margin-top: 12px; border-radius: 16px; border: 1px solid var(--line); }
.ai-bench table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.ai-bench th, .ai-bench td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.ai-bench tbody tr:last-child td { border-bottom: 0; }
.ai-bench th { font: 500 .64rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.ai-bench td { color: var(--text-2); }
.ai-bench .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.raw-links { margin-top: 18px; }

.bench-tip { position: fixed; z-index: 60; pointer-events: none; max-width: 260px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-3); box-shadow: var(--shadow); font-size: .82rem; line-height: 1.45; color: var(--text-2); }
.bench-tip b { display: block; color: var(--text); margin-bottom: 2px; }

@media (max-width: 980px) {
  .vbar-grid, .duo-grid, .agent-grid, .ask-grid { grid-template-columns: minmax(0, 1fr); }
  .agent-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .agent-steps { grid-template-columns: minmax(0, 1fr); }
  .pick-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pick-arrow { display: none; }
  }
@media (prefers-reduced-motion: reduce) {
  .vbar i { transition: none !important; }
}

/* ------------------------------------------------------------- Fast, Vision ou Agent */
.diff-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.diff-card { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 26px; border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel-2), var(--panel)); overflow: hidden; }
.diff-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--fam); }
.diff-card.is-pick { border-color: var(--line-2); box-shadow: 0 30px 80px -44px var(--glow); }
.diff-card header { display: flex; align-items: center; gap: 12px; }
.diff-card h3 { font-size: 1.2rem; font-weight: 800; letter-spacing: -.025em; }
.diff-card header span { display: block; margin-top: 3px; font: 500 .68rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fam); }
.diff-card dl { display: grid; gap: 12px; margin: 0; }
.diff-card dt { font: 500 .62rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.diff-card dd { margin: 4px 0 0; font-size: .92rem; line-height: 1.5; color: var(--text); }
.diff-stat { padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); font-size: .86rem; color: var(--text-2); }
.diff-stat b { color: var(--text); }
.diff-best { margin-top: auto; font-size: .9rem; line-height: 1.5; color: var(--text-2); }
.diff-best strong { color: var(--text); }
.diff-note { max-width: 860px; margin: 18px auto 0; text-align: center; font-size: .86rem; line-height: 1.6; color: var(--text-3); }
@media (max-width: 980px) { .diff-grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------- rythme : sections plus serrées */
.ai-bench .page-hero { padding-bottom: clamp(28px, 4vw, 48px); }
.ai-bench .section { padding: clamp(56px, 7vw, 96px) 0; }
.ai-bench .section-head { margin-bottom: clamp(26px, 3.4vw, 44px); }
.ai-bench .mp-final-cta { padding: clamp(72px, 9vw, 120px) 0; }

/* ------------------------------------------------------------- tableau de graphiques */
.bench-charts { padding: 0 0 clamp(40px, 5vw, 64px); }
.bench-charts .mp-shell { display: grid; gap: 14px; }
.vbar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.duo-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; }
.chart-head strong { color: var(--text); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: .8rem; color: var(--text-2); }

/* Barres verticales, valeur dans la barre, logo sous la barre. */
.vbars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; align-items: end; height: 260px; padding-top: 8px; }
.vbar { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 10px; }
.vbar-col { display: flex; align-items: flex-end; justify-content: center; }
.vbar i { display: flex; align-items: flex-start; justify-content: center; width: min(64px, 100%); height: var(--h); min-height: 34px; padding-top: 9px; border-radius: 6px 6px 2px 2px; background: var(--fam); color: #fff; font: 800 .95rem/1 var(--font); font-style: normal; font-variant-numeric: tabular-nums; transform-origin: bottom; transition: transform 1s var(--ease); }
.js .chart-card:not(.is-in) .vbar i { transform: scaleY(0); }
.vbar-name { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: .78rem; font-weight: 700; line-height: 1.2; color: var(--text-2); }
.vbar-name .model-logo { width: 30px; height: 30px; }
.vbar.is-best .vbar-name { color: var(--text); }

/* Coût classé. */
.ranked { display: grid; gap: 14px; padding-top: 6px; }
.rk { display: grid; grid-template-columns: 128px minmax(0, 1fr) 64px; align-items: center; gap: 12px; }
.rk-name { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.rk-track { height: 22px; border-radius: 6px; background: var(--track); overflow: hidden; }
.rk-fill { height: 100%; border-radius: 6px; background: var(--fam); }
.rk-val { text-align: right; font: 600 .92rem/1 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.rk-note { margin-top: 4px; font-size: .8rem; line-height: 1.5; color: var(--text-3); }
.dot-sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--fam); }

/* Détail des notes : une rampe ordinale violette (Excellent foncé → Weak clair), « rien » en gris. */
.ai-bench-page { --g1: #8b5cf6; --g2: #b9a0fb; --g3: #e2d8fe; --g4: #5c5670; }
:root[data-theme="light"] .ai-bench-page { --g1: #6d3fe0; --g2: #a98bf2; --g3: #ddd3fb; --g4: #b9b4c6; }
.lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.lg-1 { background: var(--g1); } .lg-2 { background: var(--g2); } .lg-3 { background: var(--g3); } .lg-4 { background: var(--g4); }
.breakdown { display: grid; gap: 12px; }
.bd { display: grid; grid-template-columns: 128px minmax(0, 1fr) 190px; align-items: center; gap: 12px; }
.bd-bar { display: flex; height: 26px; gap: 2px; border-radius: 6px; overflow: hidden; }
.bd-bar span { display: grid; place-items: center; min-width: 0; font: 700 .76rem/1 var(--font); color: #1b1530; }
.bd-bar .s1 { background: var(--g1); color: #fff; } .bd-bar .s2 { background: var(--g2); } .bd-bar .s3 { background: var(--g3); } .bd-bar .s4 { background: var(--g4); color: #fff; }
.bd-sum { font-size: .82rem; color: var(--text-2); white-space: nowrap; }
.bd-sum b { color: var(--text); }

@media (max-width: 980px) {
  .vbar-grid, .duo-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .vbars { height: 220px; gap: 8px; }
  .rk { grid-template-columns: 104px minmax(0, 1fr) 52px; }
  .bd { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

.chart .hit { fill: transparent; cursor: crosshair; }
.vbar-grid .chart-head { min-height: 58px; }