Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Calculateur de Cotisations Sociales</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); | |
| } | |
| .result-card { | |
| transition: all 0.3s ease; | |
| } | |
| .result-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .tooltip { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .tooltip .tooltip-text { | |
| visibility: hidden; | |
| width: 200px; | |
| background-color: #555; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 8px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| margin-left: -100px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .tooltip:hover .tooltip-text { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gray-50"> | |
| <div class="gradient-bg text-white py-12 px-4"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h1 class="text-4xl font-bold mb-4">Calculateur de Cotisations Sociales</h1> | |
| <p class="text-xl opacity-90">Estimez vos cotisations sociales en fonction de votre statut et revenus</p> | |
| </div> | |
| </div> | |
| <div class="max-w-4xl mx-auto px-4 py-8 -mt-12"> | |
| <div class="bg-white rounded-xl shadow-lg p-6 mb-8"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2">Statut professionnel</label> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <button id="salarie-btn" class="status-btn bg-blue-100 text-blue-800 border-blue-300 py-3 px-4 rounded-lg font-medium flex items-center justify-center transition"> | |
| <i class="fas fa-user-tie mr-2"></i> Salarié | |
| </button> | |
| <button id="independant-btn" class="status-btn bg-purple-100 text-purple-800 border-purple-300 py-3 px-4 rounded-lg font-medium flex items-center justify-center transition"> | |
| <i class="fas fa-user-cog mr-2"></i> Indépendant | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="revenu" class="block text-gray-700 font-medium mb-2">Revenu mensuel brut (€)</label> | |
| <div class="relative"> | |
| <input type="number" id="revenu" class="w-full border border-gray-300 rounded-lg py-3 px-4 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" placeholder="3000"> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3"> | |
| <i class="fas fa-euro-sign text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="salarie-options" class="mt-6 hidden"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-4">Options pour salariés</h3> | |
| <div class="grid md:grid-cols-3 gap-4"> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="checkbox" id="cadre" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500 mr-2"> | |
| <span>Cadre</span> | |
| </label> | |
| </div> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="checkbox" id="temps-partiel" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500 mr-2"> | |
| <span>Temps partiel</span> | |
| </label> | |
| </div> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="checkbox" id="contrat-pro" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500 mr-2"> | |
| <span>Contrat pro</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="independant-options" class="mt-6 hidden"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-4">Options pour indépendants</h3> | |
| <div class="grid md:grid-cols-3 gap-4"> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Régime</label> | |
| <select id="regime" class="w-full border border-gray-300 rounded-lg py-2 px-3 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition"> | |
| <option value="micro">Micro-entreprise</option> | |
| <option value="auto">Auto-entrepreneur</option> | |
| <option value="classique">Classique</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Secteur</label> | |
| <select id="secteur" class="w-full border border-gray-300 rounded-lg py-2 px-3 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition"> | |
| <option value="commercial">Commercial</option> | |
| <option value="artisan">Artisan</option> | |
| <option value="liberal">Profession libérale</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">ACRE</label> | |
| <select id="acre" class="w-full border border-gray-300 rounded-lg py-2 px-3 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition"> | |
| <option value="non">Non</option> | |
| <option value="oui">Oui</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <button id="calculer-btn" class="w-full gradient-bg text-white py-3 px-6 rounded-lg font-bold text-lg hover:opacity-90 transition flex items-center justify-center"> | |
| <i class="fas fa-calculator mr-2"></i> Calculer mes cotisations | |
| </button> | |
| </div> | |
| </div> | |
| <div id="resultats" class="hidden"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Résultats du calcul</h2> | |
| <div class="grid md:grid-cols-3 gap-6 mb-8"> | |
| <div class="result-card bg-white rounded-xl shadow-md p-6 border-l-4 border-blue-500"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-lg font-medium text-gray-700">Revenu brut</h3> | |
| <div class="tooltip"> | |
| <i class="fas fa-info-circle text-gray-400"></i> | |
| <span class="tooltip-text">Montant avant déduction des cotisations</span> | |
| </div> | |
| </div> | |
| <p id="revenu-brut" class="text-3xl font-bold text-gray-800">0 €</p> | |
| </div> | |
| <div class="result-card bg-white rounded-xl shadow-md p-6 border-l-4 border-purple-500"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-lg font-medium text-gray-700">Cotisations sociales</h3> | |
| <div class="tooltip"> | |
| <i class="fas fa-info-circle text-gray-400"></i> | |
| <span class="tooltip-text">Total des cotisations à payer</span> | |
| </div> | |
| </div> | |
| <p id="cotisations" class="text-3xl font-bold text-gray-800">0 €</p> | |
| </div> | |
| <div class="result-card bg-white rounded-xl shadow-md p-6 border-l-4 border-green-500"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-lg font-medium text-gray-700">Revenu net</h3> | |
| <div class="tooltip"> | |
| <i class="fas fa-info-circle text-gray-400"></i> | |
| <span class="tooltip-text">Montant après déduction des cotisations</span> | |
| </div> | |
| </div> | |
| <p id="revenu-net" class="text-3xl font-bold text-gray-800">0 €</p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-4">Détail des cotisations</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Organisme</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Taux</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Montant</th> | |
| </tr> | |
| </thead> | |
| <tbody id="detail-cotisations" class="bg-white divide-y divide-gray-200"> | |
| <!-- Les détails seront ajoutés dynamiquement --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 rounded-xl shadow-md p-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-lightbulb text-blue-500 text-2xl mt-1"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 class="text-lg font-medium text-blue-800 mb-2">Conseils</h3> | |
| <p id="conseils" class="text-blue-700"> | |
| Ces résultats sont une estimation. Pour une évaluation précise, consultez un expert-comptable ou votre URSSAF. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Gestion des boutons de statut | |
| const salarieBtn = document.getElementById('salarie-btn'); | |
| const independantBtn = document.getElementById('independant-btn'); | |
| const salarieOptions = document.getElementById('salarie-options'); | |
| const independantOptions = document.getElementById('independant-options'); | |
| let currentStatus = null; | |
| salarieBtn.addEventListener('click', function() { | |
| currentStatus = 'salarie'; | |
| salarieBtn.classList.remove('bg-blue-100', 'border-blue-300'); | |
| salarieBtn.classList.add('bg-blue-500', 'text-white'); | |
| independantBtn.classList.remove('bg-purple-500', 'text-white'); | |
| independantBtn.classList.add('bg-purple-100', 'border-purple-300'); | |
| salarieOptions.classList.remove('hidden'); | |
| independantOptions.classList.add('hidden'); | |
| }); | |
| independantBtn.addEventListener('click', function() { | |
| currentStatus = 'independant'; | |
| independantBtn.classList.remove('bg-purple-100', 'border-purple-300'); | |
| independantBtn.classList.add('bg-purple-500', 'text-white'); | |
| salarieBtn.classList.remove('bg-blue-500', 'text-white'); | |
| salarieBtn.classList.add('bg-blue-100', 'border-blue-300'); | |
| independantOptions.classList.remove('hidden'); | |
| salarieOptions.classList.add('hidden'); | |
| }); | |
| // Calcul des cotisations | |
| const calculerBtn = document.getElementById('calculer-btn'); | |
| const resultats = document.getElementById('resultats'); | |
| calculerBtn.addEventListener('click', function() { | |
| if (!currentStatus) { | |
| alert('Veuillez sélectionner votre statut professionnel'); | |
| return; | |
| } | |
| const revenu = parseFloat(document.getElementById('revenu').value) || 0; | |
| if (revenu <= 0) { | |
| alert('Veuillez entrer un revenu valide'); | |
| return; | |
| } | |
| let cotisations = []; | |
| let totalCotisations = 0; | |
| if (currentStatus === 'salarie') { | |
| // Cotisations salarié (approximatives) | |
| const cadre = document.getElementById('cadre').checked; | |
| cotisations.push({ nom: 'Sécurité sociale', taux: 0.13, montant: revenu * 0.13 }); | |
| cotisations.push({ nom: 'Assurance chômage', taux: 0.024, montant: revenu * 0.024 }); | |
| cotisations.push({ nom: 'Retraite', taux: 0.083, montant: revenu * 0.083 }); | |
| if (cadre) { | |
| cotisations.push({ nom: 'Retraite complémentaire', taux: 0.07, montant: revenu * 0.07 }); | |
| } | |
| cotisations.push({ nom: 'CSG/CRDS', taux: 0.092, montant: revenu * 0.092 }); | |
| } else if (currentStatus === 'independant') { | |
| // Cotisations indépendant (approximatives) | |
| const regime = document.getElementById('regime').value; | |
| const secteur = document.getElementById('secteur').value; | |
| const acre = document.getElementById('acre').value === 'oui'; | |
| let tauxBase = 0; | |
| if (regime === 'micro') { | |
| tauxBase = 0.22; // Taux micro-entreprise simplifié | |
| } else if (regime === 'auto') { | |
| tauxBase = 0.22; // Auto-entrepreneur | |
| } else { | |
| // Régime classique | |
| if (secteur === 'commercial') { | |
| tauxBase = 0.45; | |
| } else if (secteur === 'artisan') { | |
| tauxBase = 0.42; | |
| } else { | |
| tauxBase = 0.40; // Libéral | |
| } | |
| } | |
| if (acre && (regime === 'micro' || regime === 'auto')) { | |
| tauxBase *= 0.5; // Réduction ACRE la première année | |
| } | |
| cotisations.push({ | |
| nom: 'Cotisations sociales', | |
| taux: tauxBase, | |
| montant: revenu * tauxBase | |
| }); | |
| } | |
| // Calcul du total | |
| totalCotisations = cotisations.reduce((sum, item) => sum + item.montant, 0); | |
| const revenuNet = revenu - totalCotisations; | |
| // Affichage des résultats | |
| document.getElementById('revenu-brut').textContent = revenu.toFixed(2) + ' €'; | |
| document.getElementById('cotisations').textContent = totalCotisations.toFixed(2) + ' €'; | |
| document.getElementById('revenu-net').textContent = revenuNet.toFixed(2) + ' €'; | |
| // Détail des cotisations | |
| const detailCotisations = document.getElementById('detail-cotisations'); | |
| detailCotisations.innerHTML = ''; | |
| cotisations.forEach(item => { | |
| const row = document.createElement('tr'); | |
| row.innerHTML = ` | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${item.nom}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${(item.taux * 100).toFixed(1)}%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.montant.toFixed(2)} €</td> | |
| `; | |
| detailCotisations.appendChild(row); | |
| }); | |
| // Conseils personnalisés | |
| const conseils = document.getElementById('conseils'); | |
| if (currentStatus === 'salarie') { | |
| conseils.textContent = 'En tant que salarié, votre employeur paie également des cotisations patronales. Ces résultats ne concernent que la part salariale.'; | |
| } else { | |
| if (document.getElementById('regime').value === 'auto') { | |
| conseils.textContent = 'En tant qu\'auto-entrepreneur, vous bénéficiez d\'un régime simplifié. Pensez à déclarer votre chiffre d\'affaires chaque mois ou trimestre.'; | |
| } else { | |
| conseils.textContent = 'En tant qu\'indépendant, vos cotisations peuvent varier selon votre secteur d\'activité et votre régime. Consultez un expert-comptable pour une estimation précise.'; | |
| } | |
| } | |
| // Afficher les résultats | |
| resultats.classList.remove('hidden'); | |
| // Scroll vers les résultats | |
| resultats.scrollIntoView({ behavior: 'smooth' }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=shanezdz/cotisation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |