Simulateur Frais Kilométriques
:root {
–primary: #07828e;
–secondary: #6ac0be;
–tertiary: #ff7b07;
–primary-light: #e0f4f5;
–secondary-light: #d5eeee;
–bg: #f7fafa;
–white: #ffffff;
–text: #1a2e2e;
–text-muted: #5a7878;
–border: #c8e0e0;
–radius: 12px;
–radius-sm: 8px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: ‘Segoe UI’, Arial, sans-serif;
background: var(–bg);
color: var(–text);
min-height: 100vh;
padding: 0;
}
.header {
background: var(–primary);
color: #fff;
padding: 28px 32px 24px;
}
.header h1 {
font-size: 22px;
font-weight: 600;
margin-bottom: 4px;
}
.header p {
font-size: 14px;
opacity: 0.85;
}
.container {
max-width: 820px;
margin: 0 auto;
padding: 32px 20px;
}
.card {
background: var(–white);
border: 1px solid var(–border);
border-radius: var(–radius);
padding: 28px;
margin-bottom: 20px;
}
.card h2 {
font-size: 16px;
font-weight: 600;
color: var(–primary);
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid var(–primary-light);
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 600px) {
.form-grid { grid-template-columns: 1fr; }
}
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
label {
font-size: 13px;
font-weight: 600;
color: var(–text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
select, input[type= »number »] {
height: 44px;
border: 1.5px solid var(–border);
border-radius: var(–radius-sm);
padding: 0 14px;
font-size: 15px;
color: var(–text);
background: var(–white);
outline: none;
transition: border-color 0.2s;
width: 100%;
}
select:focus, input[type= »number »]:focus {
border-color: var(–primary);
}
.hint {
font-size: 12px;
color: var(–text-muted);
}
.btn {
display: block;
width: 100%;
height: 50px;
background: var(–primary);
color: #fff;
border: none;
border-radius: var(–radius-sm);
font-size: 16px;
font-weight: 600;
cursor: pointer;
margin-top: 24px;
transition: background 0.2s;
}
.btn:hover { background: #056570; }
.result-card {
background: var(–primary);
color: #fff;
border-radius: var(–radius);
padding: 28px;
margin-bottom: 20px;
display: none;
}
.result-card.show { display: block; }
.result-main {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 8px;
}
.result-amount {
font-size: 44px;
font-weight: 700;
letter-spacing: -1px;
}
.result-unit {
font-size: 18px;
opacity: 0.8;
}
.result-label {
font-size: 14px;
opacity: 0.8;
margin-bottom: 20px;
}
.result-details {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
@media (max-width: 600px) {
.result-details { grid-template-columns: 1fr 1fr; }
}
.detail-box {
background: rgba(255,255,255,0.12);
border-radius: var(–radius-sm);
padding: 12px;
}
.detail-box .val {
font-size: 20px;
font-weight: 700;
}
.detail-box .lbl {
font-size: 12px;
opacity: 0.75;
margin-top: 2px;
}
.bareme-card {
background: var(–white);
border: 1px solid var(–border);
border-radius: var(–radius);
padding: 28px;
}
.bareme-card h2 {
font-size: 16px;
font-weight: 600;
color: var(–primary);
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 2px solid var(–primary-light);
}
.tabs {
display: flex;
gap: 6px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.tab {
padding: 8px 16px;
border: 1.5px solid var(–border);
border-radius: 20px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
background: var(–white);
color: var(–text-muted);
transition: all 0.2s;
}
.tab.active {
background: var(–primary);
color: #fff;
border-color: var(–primary);
}
table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
th {
background: var(–primary-light);
color: var(–primary);
font-weight: 700;
padding: 10px 12px;
text-align: left;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
td {
padding: 10px 12px;
border-bottom: 1px solid var(–secondary-light);
color: var(–text);
}
tr:last-child td { border-bottom: none; }
tr.highlight td {
background: rgba(255,123,7,0.08);
color: var(–tertiary);
font-weight: 700;
}
.badge-vehicle {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
padding: 3px 10px;
border-radius: 12px;
}
.badge-auto { background: #e0f4f5; color: var(–primary); }
.badge-moto { background: #fff0e6; color: var(–tertiary); }
.info-banner {
background: var(–primary-light);
border-left: 4px solid var(–secondary);
border-radius: 0 var(–radius-sm) var(–radius-sm) 0;
padding: 12px 16px;
font-size: 13px;
color: var(–primary);
margin-bottom: 20px;
}
.footer-note {
font-size: 12px;
color: var(–text-muted);
margin-top: 20px;
padding-top: 14px;
border-top: 1px solid var(–border);
}
Ce simulateur utilise le barème kilométrique de l’administration fiscale française. Il concerne les salariés optant pour la déduction des frais réels dans leur déclaration d’impôt sur le revenu.
Vos informations
Calculer mes frais kilométriques
0
€
Indemnité kilométrique déductible (estimation)
Barème kilométrique officiel 2024
Voitures
Motos / Scooters
Vélos
Puissance
Jusqu’à 5 000 km
De 5 001 à 20 000 km
Au-delà de 20 000 km
3 CV et − d × 0,529 (d × 0,316) + 1 065 d × 0,370 4 CV d × 0,606 (d × 0,340) + 1 330 d × 0,407 5 CV d × 0,636 (d × 0,357) + 1 395 d × 0,427 6 CV d × 0,665 (d × 0,374) + 1 457 d × 0,447 7 CV et + d × 0,697 (d × 0,394) + 1 515 d × 0,470
Cylindrée
Jusqu’à 3 000 km
De 3 001 à 6 000 km
Au-delà de 6 000 km
1 ou 2 CV d × 0,395 (d × 0,099) + 891 d × 0,248 3, 4 ou 5 CV d × 0,468 (d × 0,082) + 1 158 d × 0,275 Plus de 5 CV d × 0,606 (d × 0,079) + 1 583 d × 0,343
Type Taux applicable Plafond annuel
Vélo (classique ou électrique) 0,25 € / km 200 € / an
const bareme = {
auto: {
3: { s1: { coef: 0.529, limit: 5000 }, s2: { coef: 0.316, add: 1065, limit: 20000 }, s3: { coef: 0.370 } },
4: { s1: { coef: 0.606, limit: 5000 }, s2: { coef: 0.340, add: 1330, limit: 20000 }, s3: { coef: 0.407 } },
5: { s1: { coef: 0.636, limit: 5000 }, s2: { coef: 0.357, add: 1395, limit: 20000 }, s3: { coef: 0.427 } },
6: { s1: { coef: 0.665, limit: 5000 }, s2: { coef: 0.374, add: 1457, limit: 20000 }, s3: { coef: 0.447 } },
7: { s1: { coef: 0.697, limit: 5000 }, s2: { coef: 0.394, add: 1515, limit: 20000 }, s3: { coef: 0.470 } },
},
moto: {
2: { s1: { coef: 0.395, limit: 3000 }, s2: { coef: 0.099, add: 891, limit: 6000 }, s3: { coef: 0.248 } },
5: { s1: { coef: 0.468, limit: 3000 }, s2: { coef: 0.082, add: 1158, limit: 6000 }, s3: { coef: 0.275 } },
7: { s1: { coef: 0.606, limit: 3000 }, s2: { coef: 0.079, add: 1583, limit: 6000 }, s3: { coef: 0.343 } },
}
};
function updatePuissances() {
const type = document.getElementById(‘vehicleType’).value;
const pg = document.getElementById(‘puissanceGroup’);
const pp = document.getElementById(‘passagerGroup’);
const sel = document.getElementById(‘puissance’);
if (type === ‘velo’) {
pg.style.display = ‘none’;
pp.style.display = ‘none’;
return;
}
pg.style.display = ‘flex’;
pp.style.display = type === ‘auto’ ? ‘flex’ : ‘none’;
sel.innerHTML = »;
if (type === ‘auto’) {
[[‘3′,’3 CV et moins’],[‘4′,’4 CV’],[‘5′,’5 CV’],[‘6′,’6 CV’],[‘7′,’7 CV et plus’]].forEach(([v,l]) => {
const o = document.createElement(‘option’);
o.value = v; o.text = l;
if (v === ‘5’) o.selected = true;
sel.appendChild(o);
});
} else {
[[‘2′,’1 ou 2 CV’],[‘5′,’3, 4 ou 5 CV’],[‘7′,’Plus de 5 CV’]].forEach(([v,l]) => {
const o = document.createElement(‘option’);
o.value = v; o.text = l;
if (v === ‘5’) o.selected = true;
sel.appendChild(o);
});
}
}
function calculerMontant(type, cv, km) {
if (type === ‘velo’) {
return Math.min(km * 0.25, 200);
}
const b = bareme[type][cv];
let montant;
if (type === ‘auto’) {
if (km <= 5000) montant = km * b.s1.coef;
else if (km <= 20000) montant = km * b.s2.coef + b.s2.add;
else montant = km * b.s3.coef;
} else {
if (km <= 3000) montant = km * b.s1.coef;
else if (km 0) {
montant = montantBase * (1 + 0.20 * passagers);
}
const taux = km > 0 ? (montant / km) : 0;
const majoPct = passagers > 0 ? ‘+’ + (passagers * 20) + ‘%’ : ‘Aucune’;
document.getElementById(‘montantTotal’).textContent = Math.round(montant).toLocaleString(‘fr-FR’);
document.getElementById(‘tauxApplique’).textContent = taux.toFixed(3).replace(‘.’, ‘,’);
document.getElementById(‘kmAffichage’).textContent = km.toLocaleString(‘fr-FR’) + ‘ km’;
document.getElementById(‘majoration’).textContent = majoPct;
const card = document.getElementById(‘resultCard’);
card.classList.add(‘show’);
card.scrollIntoView({ behavior: ‘smooth’, block: ‘nearest’ });
}
function showTab(name, btn) {
[‘auto’,’moto’,’velo’].forEach(t => {
document.getElementById(‘tab-‘ + t).style.display = t === name ? ‘block’ : ‘none’;
});
document.querySelectorAll(‘.tab’).forEach(t => t.classList.remove(‘active’));
btn.classList.add(‘active’);
}
