Comparateur Toyota GR Supra 2026 — Outil de vente (QC)
Comparateur dynamique — Toyota GR Supra 2026 (QC)
Outil (sans prix) : GR Supra 2026 vs 5 concurrents, calculateur carburant (km/an, % ville, $/L) + score pondéré “priorités client”.
📌 Axes forts : 382 hp, 368 lb-ft, RWD, AT ou 6MT (iMT), 2 places, conso officielle selon boîte.
1 fichier HTML
Responsive mobile/tablette/PC
Sans prix véhicule
AT 9.4 / MT 11.0 L/100 comb.
4382 mm longueur
112 mm garde au sol
Résumé rapide (client)
Les coûts d’usage se recalculent en direct selon tes sliders (carburant seulement, sans prix véhicule).
Conso calculée (selon % ville)
—
Basée sur ville/route officielles (AT ou MT).
Coût carburant (projection)
—
Carburant seulement (aucun prix véhicule).
Puissance / Couple
—
382 hp / 368 lb-ft (officiel).
Traction
—
RWD = dynamique / plaisir.
Garde au sol
—
112 mm (attention neige / entrées).
0–100 km/h (éditeur)
—
Champ “editable” (selon ta source).
Coffre (éditeur)
—
Affiche un chiffre que tu veux utiliser.
Score priorités client
— /100
Pondéré par les sliders ci-dessous.
Sliders (usage)
Priorités du client (pondération)
0–100. Le score compare la GR Supra vs 5 concurrents (placeholders).
Arguments “flash” (à dire au client)
Ce que l’outil démontre
- Usage : coût carburant sur X ans (km/an, % ville, $/L).
- Choix AT vs MT : conso officielle + feeling.
- Performance : 382 hp + 368 lb-ft (officiel).
- Transparence : concurrents + 0–100 + coffre = éditables/à valider.
Fiche comparative (sans prix)
Défilement horizontal sur mobile. Remplace les placeholders par des chiffres officiels si désiré.
| Modèle |
Traction |
Motorisation |
Puissance (hp) |
Couple (lb-ft) |
Ville (L/100) |
Route (L/100) |
Combinée (L/100) |
0–100 (s) |
“Handling” (index) |
Coffre (L) |
Longueur (mm) |
Empattement (mm) |
Hauteur (mm) |
Garde au sol (mm) |
Places |
Sécurité (résumé) |
${m.isToyota ? "Mise en avant" : "Concurrent (placeholder)"}
`;
const pill = m.isToyota ? `
${m.safetyTag}` : `
${m.safetyTag}`;
const z = (idx===0) ? edited0100 : (isFinite(m.zeroTo100) ? m.zeroTo100 : null);
const cargo = (idx===0) ? editedCargo : (isFinite(m.cargoL) ? m.cargoL : null);
tr.innerHTML = `
${modelCell} |
${m.drive || "—"} |
${m.powertrain || "—"} |
${m.hp ?? "—"} |
${m.torque ?? "—"} |
${isFinite(m.cityL) ? fmt(m.cityL,1) : "—"} |
${isFinite(m.hwyL) ? fmt(m.hwyL,1) : "—"} |
${isFinite(m.combL) ? fmt(m.combL,1) : "—"} |
${isFinite(z) ? fmt(z,1) : "—"} |
${m.handlingIndex ?? "—"} |
${isFinite(cargo) ? fmtInt(cargo) : "—"} |
${m.lengthMm ?? "—"} |
${m.wheelbaseMm ?? "—"} |
${m.heightMm ?? "—"} |
${m.gcMm ?? "—"} |
${m.seats ?? "—"} |
${pill} |
`;
tbody.appendChild(tr);
});
// charts
const labels = ms.map(m => (m.isToyota ? "★ " : "") + shortName(m));
const fuelBars = ms.map(m=>{
const mix2 = blendedL100(m.cityL,m.hwyL,cityPct);
if(isFinite(mix2)) return +mix2.toFixed(2);
if(isFinite(m.combL)) return m.combL;
return 11.0;
});
const zBars = ms.map((m,idx)=>{
if(idx===0) return +edited0100.toFixed(1);
return (isFinite(m.zeroTo100) ? m.zeroTo100 : 5.5);
});
const scoreBars = ms.map(m => scores.find(s=>s.key===m.key)?.total ?? 0);
chartFuel = upsertBar(chartFuel, "chartFuel", {labels, label:"Conso (L/100) — plus bas = mieux", data:fuelBars}, {reverseY:true});
chart0100 = upsertBar(chart0100, "chart0100", {labels, label:"0–100 (s) — plus bas = mieux", data:zBars}, {reverseY:true});
chartScore = upsertBar(chartScore, "chartScore", {labels, label:"Score priorités (0–100) — plus haut = mieux", data:scoreBars});
window.__STATE__ = {kmYear,fuelPrice,cityPct,years,weights,ms,l100,costHorizon,scoreCar,edited0100,editedCargo};
}
[
"variant","kmYear","fuelPrice","cityPct","years","zeroTo","cargoEdit",
"wFuel","wPerf","w0100","wHandling","wCargo","wWinter"
].forEach(id => $(id).addEventListener("input", render));
$("resetBtn").addEventListener("click", ()=>{
$("variant").value = "at";
$("kmYear").value = 16000;
$("fuelPrice").value = 1.75;
$("cityPct").value = 55;
$("years").value = 5;
$("zeroTo").value = 4.2;
$("cargoEdit").value = 290;
$("wFuel").value = 35;
$("wPerf").value = 85;
$("w0100").value = 80;
$("wHandling").value = 85;
$("wCargo").value = 25;
$("wWinter").value = 30;
render();
});
$("exportBtn").addEventListener("click", async ()=>{
const s = window.__STATE__;
const car = s.ms[0];
const l100Txt = isFinite(s.l100) ? s.l100.toFixed(1).replace(".",",") : "—";
const costTxt = isFinite(s.costHorizon) ? Math.round(s.costHorizon).toLocaleString("fr-CA") : "—";
const txt =
`Résumé client — ${car.brand} ${car.model}
• Usage: ${s.kmYear.toLocaleString("fr-CA")} km/an, ${s.cityPct}% ville, ${s.years} ans, essence ${s.fuelPrice.toFixed(2)} $/L
• Conso calculée: ${l100Txt} L/100 km
• Projection carburant: ~${costTxt} $ sur ${s.years} ans (carburant seulement)
• Officiel: ${car.hp} hp | ${car.torque} lb-ft | ${car.drive}
• 0–100 affiché (éditable): ${s.edited0100.toFixed(1).replace(".",",")} s
• Coffre affiché (éditable): ${Math.round(s.editedCargo).toLocaleString("fr-CA")} L
• Dimensions: L ${car.lengthMm} mm | empattement ${car.wheelbaseMm} mm | H ${car.heightMm} mm | garde au sol ${car.gcMm} mm | ${car.seats} places
• Score priorités: ${s.scoreCar}/100
Disclaimer: valeurs indicatives; concurrents/0–100/coffre à valider via sources officielles; aucun prix de véhicule.`;
try{
await navigator.clipboard.writeText(txt);
$("exportBtn").textContent = "Résumé copié ✓";
setTimeout(()=>$("exportBtn").textContent="Copier résumé", 1200);
}catch(e){
alert("Copie automatique impossible. Copiez manuellement.");
}
});
render();
