{"id":2977,"date":"2025-08-19T22:04:41","date_gmt":"2025-08-19T22:04:41","guid":{"rendered":"https:\/\/eliteservicesenegal.com\/?page_id=2977"},"modified":"2025-08-19T22:11:06","modified_gmt":"2025-08-19T22:11:06","slug":"simulateur-de-salaire","status":"publish","type":"page","link":"https:\/\/eliteservicesenegal.com\/index.php\/simulateur-de-salaire\/","title":{"rendered":"SIMULATEUR DE SALAIRE"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2977\" class=\"elementor elementor-2977\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7e147a7 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7e147a7\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b4566c6\" data-id=\"b4566c6\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f088683 elementor-widget elementor-widget-shortcode\" data-id=\"f088683\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <style>\n        \/* Design moderne et professionnel pour le simulateur *\/\n        .simu-container {\n            max-width: 800px;\n            margin: 32px auto;\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            border-radius: 24px;\n            padding: 3px;\n            box-shadow: 0 20px 50px rgba(102, 126, 234, 0.15);\n        }\n        \n        .simu-wrap {\n            background: white;\n            border-radius: 21px;\n            padding: 40px;\n            position: relative;\n            overflow: hidden;\n        }\n        \n        .simu-wrap::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            height: 4px;\n            background: linear-gradient(90deg, #667eea, #764ba2, #667eea);\n            background-size: 200% 100%;\n            animation: gradient-shift 3s ease-in-out infinite;\n        }\n        \n        @keyframes gradient-shift {\n            0%, 100% { background-position: 0% 50%; }\n            50% { background-position: 100% 50%; }\n        }\n        \n        .simu-header {\n            text-align: center;\n            margin-bottom: 40px;\n        }\n        \n        .simu-title {\n            font-size: 32px;\n            font-weight: 800;\n            color: #2d3748;\n            margin-bottom: 12px;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            background-clip: text;\n        }\n        \n        .simu-subtitle {\n            font-size: 16px;\n            color: #718096;\n            margin: 0;\n        }\n        \n        .simu-form-card {\n            background: #f8f9fa;\n            border: 2px solid #e2e8f0;\n            border-radius: 20px;\n            padding: 32px;\n            margin-bottom: 32px;\n            transition: all 0.3s ease;\n        }\n        \n        .simu-form-card:hover {\n            box-shadow: 0 8px 30px rgba(0,0,0,0.1);\n            transform: translateY(-2px);\n        }\n        \n        .simu-field {\n            margin-bottom: 24px;\n        }\n        \n        .simu-label {\n            font-size: 16px;\n            font-weight: 600;\n            color: #4a5568;\n            margin-bottom: 10px;\n            display: block;\n        }\n        \n        .simu-input {\n            width: 100%;\n            padding: 16px 20px;\n            border: 2px solid #e2e8f0;\n            border-radius: 16px;\n            font-size: 18px;\n            font-weight: 500;\n            background: white;\n            outline: none;\n            transition: all 0.2s ease;\n            box-sizing: border-box;\n        }\n        \n        .simu-input:focus {\n            border-color: #667eea;\n            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);\n            transform: translateY(-1px);\n        }\n        \n        .simu-input::placeholder {\n            color: #a0aec0;\n            font-weight: 400;\n        }\n        \n        .simu-checkbox-group {\n            background: white;\n            border: 2px solid #e2e8f0;\n            border-radius: 16px;\n            padding: 20px;\n            transition: all 0.2s ease;\n        }\n        \n        .simu-checkbox-group:hover {\n            border-color: #cbd5e0;\n            box-shadow: 0 2px 8px rgba(0,0,0,0.05);\n        }\n        \n        .simu-checkbox-wrapper {\n            display: flex;\n            align-items: flex-start;\n            gap: 16px;\n            cursor: pointer;\n        }\n        \n        .simu-checkbox {\n            width: 20px;\n            height: 20px;\n            border: 2px solid #667eea;\n            border-radius: 6px;\n            position: relative;\n            flex-shrink: 0;\n            margin-top: 2px;\n            transition: all 0.2s ease;\n        }\n        \n        .simu-checkbox input {\n            position: absolute;\n            opacity: 0;\n            cursor: pointer;\n            width: 100%;\n            height: 100%;\n            margin: 0;\n        }\n        \n        .simu-checkbox input:checked + .simu-checkmark {\n            background: #667eea;\n            border-color: #667eea;\n        }\n        \n        .simu-checkbox input:checked + .simu-checkmark::after {\n            display: block;\n        }\n        \n        .simu-checkmark {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            border-radius: 4px;\n            transition: all 0.2s ease;\n        }\n        \n        .simu-checkmark::after {\n            content: \"\";\n            position: absolute;\n            display: none;\n            left: 6px;\n            top: 2px;\n            width: 6px;\n            height: 10px;\n            border: solid white;\n            border-width: 0 2px 2px 0;\n            transform: rotate(45deg);\n        }\n        \n        .simu-checkbox-content {\n            flex: 1;\n        }\n        \n        .simu-checkbox-label {\n            font-size: 16px;\n            font-weight: 600;\n            color: #2d3748;\n            margin-bottom: 6px;\n            display: block;\n        }\n        \n        .simu-checkbox-info {\n            font-size: 14px;\n            color: #718096;\n            line-height: 1.5;\n            margin-top: 8px;\n            padding: 12px;\n            background: #edf2f7;\n            border-left: 4px solid #667eea;\n            border-radius: 8px;\n        }\n        \n        .simu-btn {\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            color: white;\n            border: none;\n            padding: 18px 40px;\n            border-radius: 16px;\n            font-size: 18px;\n            font-weight: 700;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);\n            position: relative;\n            overflow: hidden;\n            width: 100%;\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n        }\n        \n        .simu-btn::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: -100%;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);\n            transition: left 0.5s;\n        }\n        \n        .simu-btn:hover::before {\n            left: 100%;\n        }\n        \n        .simu-btn:hover {\n            transform: translateY(-3px);\n            box-shadow: 0 8px 30px rgba(102, 126, 234, 0.4);\n        }\n        \n        .simu-btn:active {\n            transform: translateY(-1px);\n        }\n        \n        .simu-btn:disabled {\n            opacity: 0.6;\n            cursor: not-allowed;\n            transform: none;\n        }\n        \n        .simu-result {\n            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);\n            border: 2px solid #e2e8f0;\n            border-radius: 20px;\n            padding: 32px;\n            box-shadow: 0 8px 25px rgba(0,0,0,0.1);\n            position: relative;\n            overflow: hidden;\n            animation: slideInUp 0.5s ease-out;\n        }\n        \n        @keyframes slideInUp {\n            from {\n                opacity: 0;\n                transform: translateY(30px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n        \n        .simu-result::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 6px;\n            height: 100%;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n        }\n        \n        .simu-result-header {\n            text-align: center;\n            margin-bottom: 28px;\n            padding-bottom: 20px;\n            border-bottom: 2px solid #e2e8f0;\n        }\n        \n        .simu-result-title {\n            font-size: 24px;\n            font-weight: 700;\n            color: #2d3748;\n            margin: 0;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 12px;\n        }\n        \n        .simu-result-grid {\n            display: grid;\n            gap: 16px;\n            margin-bottom: 24px;\n        }\n        \n        .simu-line {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding: 16px 20px;\n            background: white;\n            border: 1px solid #e2e8f0;\n            border-radius: 12px;\n            transition: all 0.2s ease;\n        }\n        \n        .simu-line:hover {\n            box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n            transform: translateX(4px);\n        }\n        \n        .simu-line-label {\n            font-size: 15px;\n            color: #4a5568;\n            font-weight: 500;\n        }\n        \n        .simu-line-value {\n            font-size: 16px;\n            font-weight: 700;\n            color: #2d3748;\n        }\n        \n        .simu-total-line {\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            color: white;\n            border: none;\n            padding: 20px;\n            margin-top: 8px;\n        }\n        \n        .simu-total-line:hover {\n            transform: translateY(-2px);\n        }\n        \n        .simu-total-line .simu-line-label,\n        .simu-total-line .simu-line-value {\n            color: white;\n            font-size: 18px;\n        }\n        \n        .simu-note {\n            margin-top: 24px;\n            padding: 20px;\n            background: #fef9e7;\n            border: 1px solid #f6e05e;\n            border-left: 4px solid #ed8936;\n            border-radius: 12px;\n            font-size: 14px;\n            color: #744210;\n            line-height: 1.6;\n        }\n        \n        .simu-note::before {\n            content: \"\u26a0\ufe0f\";\n            font-size: 18px;\n            margin-right: 8px;\n        }\n        \n        \/* Responsive Design *\/\n        @media (max-width: 768px) {\n            .simu-container {\n                margin: 16px;\n                border-radius: 20px;\n            }\n            \n            .simu-wrap {\n                padding: 24px 20px;\n                border-radius: 17px;\n            }\n            \n            .simu-title {\n                font-size: 24px;\n            }\n            \n            .simu-subtitle {\n                font-size: 14px;\n            }\n            \n            .simu-form-card {\n                padding: 24px 20px;\n            }\n            \n            .simu-input {\n                padding: 14px 16px;\n                font-size: 16px;\n            }\n            \n            .simu-btn {\n                padding: 16px 32px;\n                font-size: 16px;\n            }\n            \n            .simu-result {\n                padding: 24px 20px;\n            }\n            \n            .simu-result-title {\n                font-size: 20px;\n            }\n            \n            .simu-line {\n                padding: 14px 16px;\n                flex-direction: column;\n                align-items: flex-start;\n                gap: 8px;\n            }\n            \n            .simu-line-value {\n                align-self: flex-end;\n                font-size: 18px;\n            }\n            \n            .simu-total-line .simu-line-value {\n                font-size: 20px;\n            }\n        }\n        \n        @media (max-width: 480px) {\n            .simu-container {\n                margin: 12px;\n            }\n            \n            .simu-wrap {\n                padding: 20px 16px;\n            }\n            \n            .simu-title {\n                font-size: 20px;\n            }\n            \n            .simu-form-card {\n                padding: 20px 16px;\n            }\n            \n            .simu-checkbox-wrapper {\n                gap: 12px;\n            }\n            \n            .simu-checkbox-label {\n                font-size: 15px;\n            }\n            \n            .simu-checkbox-info {\n                font-size: 13px;\n                padding: 10px;\n            }\n        }\n    <\/style>\n\n    <div class=\"simu-container\">\n        <div class=\"simu-wrap\">\n            <div class=\"simu-header\">\n                <h1 class=\"simu-title\">Simulateur de Salaire<\/h1>\n                <p class=\"simu-subtitle\">Calculez votre salaire brut et les charges sociales<\/p>\n            <\/div>\n            \n            <div class=\"simu-form-card\">\n                <form id=\"simu-form\">\n                    <div class=\"simu-field\">\n                        <label class=\"simu-label\">\ud83d\udcb0 Salaire Net souhait\u00e9 (FCFA)<\/label>\n                        <input \n                            type=\"number\" \n                            id=\"net\" \n                            class=\"simu-input\" \n                            placeholder=\"Ex: 76 470\" \n                            required\n                            min=\"1\"\n                            step=\"1\"\n                        >\n                    <\/div>\n                    \n                    <div class=\"simu-field\">\n                        <div class=\"simu-checkbox-group\">\n                            <label class=\"simu-checkbox-wrapper\">\n                                <div class=\"simu-checkbox\">\n                                    <input type=\"checkbox\" id=\"prime\">\n                                    <span class=\"simu-checkmark\"><\/span>\n                                <\/div>\n                                <div class=\"simu-checkbox-content\">\n                                    <span class=\"simu-checkbox-label\">\ud83d\ude8c Ajouter la prime de transport (26 000 FCFA)<\/span>\n                                    <div class=\"simu-checkbox-info\">\n                                        <strong>Information importante :<\/strong> La prime de transport est obligatoirement due si le salari\u00e9 habite au del\u00e0 de trois (3) kilom\u00e8tres, \u00e0 vol d'oiseau, de son lieu de travail.\n                                    <\/div>\n                                <\/div>\n                            <\/label>\n                        <\/div>\n                    <\/div>\n                    \n                    <button type=\"submit\" class=\"simu-btn\" id=\"simu-btn\">\n                        \ud83e\uddee \u00c9valuez votre co\u00fbt de revient salarial\n                    <\/button>\n                <\/form>\n            <\/div>\n\n            <div class=\"simu-result\" id=\"simu-result\" style=\"display:none;\">\n                <div class=\"simu-result-header\">\n                    <h2 class=\"simu-result-title\">\n                        \ud83d\udcca D\u00e9tail de votre simulation\n                    <\/h2>\n                <\/div>\n                \n                <div class=\"simu-result-grid\">\n                    <div class=\"simu-line\">\n                        <span class=\"simu-line-label\">\ud83d\udcb5 Salaire Net<\/span>\n                        <span class=\"simu-line-value\" id=\"res-net\"><\/span>\n                    <\/div>\n                    \n                    <div class=\"simu-line\">\n                        <span class=\"simu-line-label\">\ud83d\udcbc Salaire Brut<\/span>\n                        <span class=\"simu-line-value\" id=\"res-brut\"><\/span>\n                    <\/div>\n                    \n                    <div class=\"simu-line\">\n                        <span class=\"simu-line-label\">\ud83d\udccb Cotisations salariales (5,6%)<\/span>\n                        <span class=\"simu-line-value\" id=\"res-salarial\"><\/span>\n                    <\/div>\n                    \n                    <div class=\"simu-line\">\n                        <span class=\"simu-line-label\">\ud83c\udfe2 Charges employeur (20%)<\/span>\n                        <span class=\"simu-line-value\" id=\"res-employeur\"><\/span>\n                    <\/div>\n                    \n                    <div class=\"simu-line\" id=\"res-prime-wrap\" style=\"display:none;\">\n                        <span class=\"simu-line-label\">\ud83d\ude8c Prime de transport<\/span>\n                        <span class=\"simu-line-value\" id=\"res-prime\"><\/span>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"simu-line simu-total-line\">\n                    <span class=\"simu-line-label\">\ud83d\udc8e Co\u00fbt total pour l'employeur<\/span>\n                    <span class=\"simu-line-value\" id=\"res-total\"><\/span>\n                <\/div>\n                \n                <div class=\"simu-note\">\n                    <strong>Avertissement :<\/strong> Cette simulation est une estimation bas\u00e9e sur les taux de cotisations standards. Pour obtenir un calcul pr\u00e9cis adapt\u00e9 \u00e0 votre situation (convention collective, cat\u00e9gorie professionnelle, etc.), contactez-nous.\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        document.getElementById('simu-form').addEventListener('submit', async function(e){\n            e.preventDefault();\n\n            const netInput = document.getElementById('net');\n            const primeCheckbox = document.getElementById('prime');\n            const submitBtn = document.getElementById('simu-btn');\n            \n            const net = parseFloat(netInput.value);\n            const primeChecked = primeCheckbox.checked;\n            const prime = 26000;\n\n            if (!net || net <= 0) {\n                alert(\"\u26a0\ufe0f Veuillez entrer un salaire net valide.\");\n                netInput.focus();\n                return;\n            }\n\n            \/\/ Animation du bouton de chargement\n            submitBtn.disabled = true;\n            submitBtn.innerHTML = '\u23f3 Calcul en cours...';\n\n            \/\/ Simulation d'un petit d\u00e9lai pour l'animation\n            await new Promise(resolve => setTimeout(resolve, 500));\n\n            \/\/ Conversion net -> brut\n            const brut = Math.round(net \/ 0.9294);\n            const partSalariale = Math.round(brut * 0.056);\n            const partEmployeur = Math.round(brut * 0.20);\n\n            let total = brut + partEmployeur;\n            if (primeChecked) total += prime;\n\n            \/\/ Fonction pour formater les nombres\n            function formatNumber(num) {\n                return num.toLocaleString('fr-FR') + ' FCFA';\n            }\n\n            \/\/ Affichage des r\u00e9sultats\n            document.getElementById('res-net').textContent = formatNumber(net);\n            document.getElementById('res-brut').textContent = formatNumber(brut);\n            document.getElementById('res-salarial').textContent = formatNumber(partSalariale);\n            document.getElementById('res-employeur').textContent = formatNumber(partEmployeur);\n            document.getElementById('res-total').textContent = formatNumber(total);\n\n            \/\/ Gestion de la prime de transport\n            const primeWrap = document.getElementById('res-prime-wrap');\n            if (primeChecked) {\n                document.getElementById('res-prime').textContent = formatNumber(prime);\n                primeWrap.style.display = '';\n            } else {\n                primeWrap.style.display = 'none';\n            }\n\n            \/\/ Affichage des r\u00e9sultats avec animation\n            document.getElementById('simu-result').style.display = '';\n            document.getElementById('simu-result').scrollIntoView({ \n                behavior: 'smooth', \n                block: 'nearest' \n            });\n\n            \/\/ Restaurer le bouton\n            submitBtn.disabled = false;\n            submitBtn.innerHTML = '\ud83e\uddee \u00c9valuez votre co\u00fbt de revient salarial';\n\n            \/\/ Envoi AJAX pour log (version am\u00e9lior\u00e9e)\n            try {\n                const formData = new FormData();\n                formData.append('action','simu_save_log');\n                formData.append('_ajax_nonce','cd951fcb53');\n                formData.append('net', net);\n                formData.append('brut', brut);\n                formData.append('charges_employeur', partEmployeur);\n                formData.append('prime', primeChecked ? prime : 0);\n                formData.append('total', total);\n\n                await fetch('https:\/\/eliteservicesenegal.com\/wp-admin\/admin-ajax.php', {\n                    method: 'POST',\n                    body: formData\n                });\n            } catch (error) {\n                console.warn('Erreur lors de l\\'enregistrement du log:', error);\n            }\n        });\n\n        \/\/ Animation sur focus des inputs\n        document.getElementById('net').addEventListener('input', function(e) {\n            \/\/ Suppression des espaces et caract\u00e8res non num\u00e9riques\n            e.target.value = e.target.value.replace(\/[^\\d]\/g, '');\n        });\n\n        \/\/ Formatage automatique du nombre pendant la saisie\n        document.getElementById('net').addEventListener('blur', function(e) {\n            if (e.target.value) {\n                const num = parseInt(e.target.value);\n                if (!isNaN(num)) {\n                    e.target.value = num;\n                }\n            }\n        });\n    <\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_glsr_average":0,"_glsr_ranking":0,"_glsr_reviews":0,"footnotes":""},"class_list":["post-2977","page","type-page","status-publish","hentry"],"featured_image_urls":{},"_links":{"self":[{"href":"https:\/\/eliteservicesenegal.com\/index.php\/wp-json\/wp\/v2\/pages\/2977","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eliteservicesenegal.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eliteservicesenegal.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eliteservicesenegal.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eliteservicesenegal.com\/index.php\/wp-json\/wp\/v2\/comments?post=2977"}],"version-history":[{"count":4,"href":"https:\/\/eliteservicesenegal.com\/index.php\/wp-json\/wp\/v2\/pages\/2977\/revisions"}],"predecessor-version":[{"id":2983,"href":"https:\/\/eliteservicesenegal.com\/index.php\/wp-json\/wp\/v2\/pages\/2977\/revisions\/2983"}],"wp:attachment":[{"href":"https:\/\/eliteservicesenegal.com\/index.php\/wp-json\/wp\/v2\/media?parent=2977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}