{"id":84,"date":"2025-02-09T15:15:13","date_gmt":"2025-02-09T14:15:13","guid":{"rendered":"https:\/\/france-fire.fr\/?p=84"},"modified":"2025-02-16T16:50:58","modified_gmt":"2025-02-16T15:50:58","slug":"calculateur-fire-france","status":"publish","type":"post","link":"https:\/\/france-fire.fr\/index.php\/2025\/02\/09\/calculateur-fire-france\/","title":{"rendered":"Calculateur Fire France"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Calculateur FIRE<\/h2>\n\n\n\n    <div id=\"fire-calculator\" style=\"max-width: 800px; margin: auto; padding: 20px; background: #f9f9f9; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); font-family: Arial, sans-serif;\"> \n        <h2 style=\"text-align: center; color: #007BFF; font-size: 1.5em; margin-bottom: 10px;\">Calculateur FIRE<\/h2>\n    <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px; align-items: center;\">\n        <label>\u00c2ge d\u00e9but FIRE<input type=\"number\" id=\"yearFire\" value=\"50\"><\/label>\n        <label>\u00c2ge de d\u00e9but \u00e9pargne<input type=\"number\" id=\"savingStart\" value=\"35\"><\/label>\n        <label>Budget de retraite mensuel (\u20ac)<input type=\"number\" id=\"monthlyBudget\" value=\"3000\"><\/label>\n        <label>\u00c9pargne initiale (\u20ac)<input type=\"number\" id=\"initialSavings\" value=\"100000\"><\/label>\n        <label>\u00c9pargne annuelle (\u20ac)<input type=\"number\" id=\"annualSavings\" value=\"22000\"><\/label>\n        <label>Taux de rendement de l&rsquo;epargne (%)<input type=\"number\" id=\"returnRate\" value=\"6\"><\/label>\n        <label>Inflation (%)<input type=\"number\" id=\"inflation\" value=\"2\"><\/label>\n        <label>Retraite (\u20ac \/ mois)<input type=\"number\" id=\"pension\" value=\"1500\"><\/label>\n        <label>Flat Tax (%)<input type=\"number\" id=\"flatTax\" value=\"30\"><\/label>\n    <\/div>\n    <button onclick=\"calculateFire()\">Calculer<\/button>\n    \n    <style>\n        div {\n            max-width: 1000px;\n            margin: auto;\n        }\n    \n        label {\n            display: flex;\n            flex-direction: column;\n            font-size: 0.9em;\n            font-weight: 500;\n            color: #333;\n        }\n    \n        input {\n            padding: 6px;\n            font-size: 1em;\n            border: 1px solid #ccc;\n            border-radius: 4px;\n            outline: none;\n            text-align: center;\n        }\n    \n        button {\n            background: #007BFF;\n            color: white;\n            padding: 10px;\n            border: none;\n            border-radius: 5px;\n            cursor: pointer;\n            font-size: 1em;\n            margin-top: 12px;\n            width: 100%;\n            max-width: 600px;\n            display: block;\n            margin-left: auto;\n            margin-right: auto;\n        }\n    \n        button:hover {\n            background: #0056b3;\n        }\n    #fireTable {\n            width: 100%;\n            border-collapse: collapse;\n            text-align: center;\n        }\n    \n        #fireTable th, #fireTable td {\n            border: 1px solid #ddd;\n            padding: 8px;\n        }\n    \n        #fireTable thead tr th {\n            font-size: 12px;\n            background-color: #007BFF;\n            color: white;\n        }\n    \n        #fireTable tbody tr:nth-child(even) {\n            background-color: #f2f2f2;\n        }\n    \n        #fireTable tbody tr:hover {\n            background-color: #ddd;\n        }\n    \n        #fireDiv {\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n            max-width: 100%;\n            padding: 0 10px;\n        }\n        \n        .fire-entry {\n            background: #f8f9fa;\n            border: 1px solid #ddd;\n            border-radius: 8px;\n            padding: 12px;\n            box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);\n            font-size: 14px;\n            width: 100%;\n        }\n        \n        .fire-row {\n            display: flex;\n            justify-content: space-between;\n            width: 100%;\n            gap: 10px;\n            margin-bottom: 6px;\n        }\n        \n        .fire-row div {\n            flex: 1;\n            text-align: left;\n            padding: 8px;\n            background: #fff;\n            border-radius: 4px;\n            box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);\n            height: 80px;\n        }\n        \n        .fire-label {\n            font-weight: bold;\n            color: #007BFF;\n            display: block;\n            font-size: 12px;\n            text-align:center;\n        }\n        \n        .fire-value {\n            color: #333;\n            font-weight: 600;\n            display: block;\n            font-size: 14px;\n            text-align:center;\n            vertical-align: middle;\n        }\n        \n        @media (max-width: 600px) {\n            .fire-row {\n                flex-direction: column;\n                gap: 8px;\n            }\n        \n            .fire-row div {\n                width: 100%;\n            }\n        }\n        \n        .fire-title {\n            font-size: 16px;\n            font-weight: bold;\n            color: #155724; \/* Vert fonc\u00e9 *\/\n            text-align: center;\n            margin-bottom: 10px;\n        }\n        .bgYellow {\n            background-color: #fff9c4;\n        }\n\n        .bgLightGreen {\n            background-color: #d4edda;\n        }\n        .bgGreen {\n            background-color: #a3d9a5;\n        }\n        \n    <\/style>\n    <div id=\"chart-container\" style=\"margin-top: 20px; height: 500px; width: 100%;\"><\/div>\n        <div id=\"table-container\" style=\"margin-top: 20px;\">\n            <h3 style=\"text-align: center;\">D\u00e9tails du Patrimoine<\/h3>\n    \n            <div id=\"fireDiv\"> <\/div>\n         <\/div>\n    <\/div>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/3.9.1\/chart.min.js\"><\/script>    <script>\n        function renderChart(labels, data) {\n            let chartContainer = document.getElementById(\"chart-container\");\n            chartContainer.innerHTML = '<canvas id=\"fireChart\"><\/canvas>';\n            \n            let ctx = document.getElementById('fireChart').getContext('2d');\n            new Chart(ctx, {\n                type: 'line',\n                data: {\n                    labels: labels,\n                    datasets: [{\n                        label: '\u00c9volution du portefeuille (\u20ac)',\n                        data: data,\n                        borderColor: '#007BFF',\n                        backgroundColor: 'rgba(0, 123, 255, 0.2)',\n                        borderWidth: 2,\n                        fill: true\n                    }]\n                },\n                options: {\n                    responsive: true,\n                    maintainAspectRatio: false,\n                    scales: {\n                        x: { title: { display: true, text: '\u00c2ge' } },\n                        y: { title: { display: true, text: 'Montant (\u20ac)' } }\n                    }\n                }\n            });\n        }\n    <\/script>\n    <script>\n        function calculateFire() {\n            let yearFire = parseInt(document.getElementById('yearFire').value);\n            let savingStart = parseInt(document.getElementById('savingStart').value);\n            let initialSavings = parseInt(document.getElementById('initialSavings').value);\n            let monthlyBudget = parseInt(document.getElementById('monthlyBudget').value);\n            let annualSavings = parseInt(document.getElementById('annualSavings').value);\n            let returnRate = parseFloat(document.getElementById('returnRate').value);\n            let inflation = parseFloat(document.getElementById('inflation').value);\n            let flatTax = parseFloat(document.getElementById('flatTax').value);\n            let pension = parseInt(document.getElementById('pension').value);\n    \n            let currentAge = 25;\n            let portfolio = 0;\n            let costBasis = 0;\n            let costBasisHistory = [];\n            let annualInterestHistory = []; \n            let annualWithdrawalTax = []; \n            let calculatedData = [];\n            let withdrawalsHistory = []; \n            let labels = [];\n    \n            for (let i = 0; i < 90 - currentAge; i++) {\n                let year = currentAge + i;\n                let annualReturn = (portfolio * returnRate) \/ 100;\n    \n                if (year == savingStart) {\n                    portfolio = initialSavings;\n                    costBasis = initialSavings;\n                }\n                if (year >= savingStart & year < yearFire) {\n                    portfolio += annualSavings + annualReturn;\n                    annualInterestHistory.push(annualReturn);\n                    costBasis += annualSavings;\n                }\n                if (year >= yearFire) {\n                    annualInterestHistory.push(annualReturn);\n                    let annualWithdrawal = monthlyBudget * 12 * Math.pow(1 + inflation \/ 100, year - yearFire);\n                    if (year >= 67) {\n                        annualWithdrawal -= pension * 12 * Math.pow(1 + inflation \/ 100, year - yearFire);\n                        console.log(year);\n                        console.log(pension * 12 * Math.pow(1 + inflation \/ 100, year - yearFire));\n                    }\n                    if (year >= yearFire) {\n                        withdrawalsHistory.push(annualWithdrawal);\n                    } else {\n                        withdrawalsHistory.push(0);\n                    }\n                    \n                    let gainPercentage = costBasis > 0 ? (portfolio - costBasis) \/ costBasis : 0;\n                    let taxableAmount = annualWithdrawal * gainPercentage;\n                    let tax = taxableAmount * (flatTax \/ 100);\n                    annualWithdrawalTax.push(tax);\n                    portfolio = portfolio + annualReturn - annualWithdrawal - tax;\n                    if (portfolio < 0) portfolio = 0;\n                    costBasis -= annualWithdrawal * (1 - gainPercentage);\n                }\n    \n                labels.push(year);\n                calculatedData.push(portfolio);\n                costBasisHistory.push(costBasis);\n            }\n            renderChart(labels, calculatedData);\n            renderDiv(labels, calculatedData, costBasisHistory, withdrawalsHistory, annualInterestHistory, currentAge, yearFire, savingStart, annualWithdrawalTax, annualSavings, initialSavings);\n        }\n\n        function formatEuro(amount) {\n            return amount.toString().replace(\/\\B(?=(\\d{3})+(?!\\d))\/g, \".\") + \" \u20ac\";\n        }\n    \n        function renderDiv(labels, data, costBasisHistory, withdrawalsHistory, annualInterestHistory, currentAge, yearFire, savingStart, annualWithdrawalTax, annualSavings, initialSavings) {\n            let fireDiv = document.getElementById(\"fireDiv\");\n            fireDiv.innerHTML = \"\"; \/\/ Efface le contenu pr\u00e9c\u00e9dent\n            let totalSavings = initialSavings;\n            for (let i = 0; i < labels.length; i++) {\n                let age = labels[i];\n                let withdrawalTax = 0;\n                if (age >= yearFire) {\n                    withdrawalTax = Math.round(annualWithdrawalTax[i - (yearFire - currentAge)]);\n                }\n                let patrimoine = data[i];\n                let costBasis = costBasisHistory[i];\n                let gainPercentage = costBasis > 0 ? ((patrimoine - costBasis) \/ costBasis) * 100 : 0;\n                let withdrawalAmount = (i >= (yearFire - currentAge)) ? withdrawalsHistory[i - (yearFire - currentAge)] + withdrawalTax: 0;\n                let interestGenerated = (i >= (savingStart - currentAge)) ? annualInterestHistory[i - (savingStart - currentAge)] : 0;\n                let withdrawalRate = withdrawalAmount !== 0 && patrimoine !== 0 ? ((withdrawalAmount \/ patrimoine) * 100).toFixed(2) : \"\";\n                let labelAnnee = \"\";\n                \/\/ Cr\u00e9er une ligne avec 3 valeurs par ligne\n                let divsRetrait = \"\";\n                let classCSSBackground = \"\";\n                \n                if (age >= yearFire) {\n                    divsRetrait = `<div><span class=\"fire-label\">Argent retir\u00e9 :<\/span> <span class=\"fire-value\">${formatEuro(Math.round(withdrawalAmount))}<br \/> (dont ${formatEuro(withdrawalTax)} de taxe)<\/span><\/div>\n                            <div><span class=\"fire-label\">Taux de retrait :<\/span> <span class=\"fire-value\">${withdrawalRate} %<\/span><\/div>`;\n                    labelAnnee = \"Ann\u00e9e de retraite anticip\u00e9e\";\n                    classCSSBackground = \"bgLightGreen\";\n                } else { \n                    divsRetrait = `<div><span class=\"fire-label\">Versement annuel :<\/span> <span class=\"fire-value\">${formatEuro(Math.round(annualSavings))}<\/span><\/div>\n                    <div><span class=\"fire-label\">Total versements :<\/span> <span class=\"fire-value\">${formatEuro(Math.round(totalSavings))}<\/span><\/div>`;\n                }\n\n                if (age < yearFire ) {\n                    if ( age >= savingStart) {\n                        labelAnnee = \"Ann\u00e9e d'accumulation\";\n                        classCSSBackground = \"bgYellow\";\n                        totalSavings += annualSavings;\n                    }\n                }\n                if (age >= 67) {\n                    labelAnnee = \"Ann\u00e9e de retraite (+ retraite FR)\";\n                    classCSSBackground = \"bgGreen\";\n                }\n                let entryDiv = `\n                    <div class=\"fire-entry ${classCSSBackground}\">\n                        <div class=\"fire-title\">${labelAnnee}<\/div>\n                        <div class=\"fire-row\">\n                            <div><span class=\"fire-label\">\u00c2ge :<\/span> <span class=\"fire-value\">${age}<\/span><\/div>\n                            <div><span class=\"fire-label\">Valeur du patrimoine :<\/span> <span class=\"fire-value\">${formatEuro(Math.round(patrimoine))}<\/span><\/div>\n                            <div><span class=\"fire-label\">Int\u00e9r\u00eats annuels :<\/span> <span class=\"fire-value\">${formatEuro(Math.round(interestGenerated))}<\/span><\/div>\n                        <\/div>\n                        <div class=\"fire-row\">\n                            <div><span class=\"fire-label\">% de plus-value :<\/span> <span class=\"fire-value\">${gainPercentage.toFixed(2)}%<\/span><\/div>\n                            ${divsRetrait}\n                        <\/div>\n                    <\/div>\n                `;\n                if (age >= savingStart) {\n                    fireDiv.innerHTML += entryDiv; \/\/ Ajouter la ligne\n                }\n            }\n        }\n        calculateFire();\n    <\/script>\n","protected":false},"excerpt":{"rendered":"<p>Calculateur FIRE Calculateur FIRE \u00c2ge d\u00e9but FIRE \u00c2ge de d\u00e9but \u00e9pargne Budget de retraite mensuel (\u20ac) \u00c9pargne initiale (\u20ac) \u00c9pargne annuelle (\u20ac) Taux de rendement de l&rsquo;epargne (%) Inflation (%) Retraite (\u20ac \/ mois) Flat Tax (%) Calculer D\u00e9tails du Patrimoine<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-84","post","type-post","status-publish","format-standard","hentry","category-non-classe"],"_links":{"self":[{"href":"https:\/\/france-fire.fr\/index.php\/wp-json\/wp\/v2\/posts\/84","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/france-fire.fr\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/france-fire.fr\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/france-fire.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/france-fire.fr\/index.php\/wp-json\/wp\/v2\/comments?post=84"}],"version-history":[{"count":91,"href":"https:\/\/france-fire.fr\/index.php\/wp-json\/wp\/v2\/posts\/84\/revisions"}],"predecessor-version":[{"id":186,"href":"https:\/\/france-fire.fr\/index.php\/wp-json\/wp\/v2\/posts\/84\/revisions\/186"}],"wp:attachment":[{"href":"https:\/\/france-fire.fr\/index.php\/wp-json\/wp\/v2\/media?parent=84"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/france-fire.fr\/index.php\/wp-json\/wp\/v2\/categories?post=84"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/france-fire.fr\/index.php\/wp-json\/wp\/v2\/tags?post=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}