{"id":123904,"date":"2026-03-17T08:29:03","date_gmt":"2026-03-17T07:29:03","guid":{"rendered":"https:\/\/www.sosve.tn\/?page_id=123904"},"modified":"2026-03-17T11:41:17","modified_gmt":"2026-03-17T10:41:17","slug":"zaket-fitr","status":"publish","type":"page","link":"https:\/\/www.sosve.tn\/fr\/zaket-fitr\/","title":{"rendered":"Zaket Fitr"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"123904\" class=\"elementor elementor-123904\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c2bec84 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c2bec84\" 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-50 elementor-top-column elementor-element elementor-element-9811012\" data-id=\"9811012\" 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-aa3e4bb elementor-widget elementor-widget-html\" data-id=\"aa3e4bb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"zakat-container\">\r\n    <div class=\"friendly-hint\">\r\n        <span>Cliquez sur le ballon pour modifier le montant \ud83d\udc47<\/span>\r\n    <\/div>\r\n\r\n    <div class=\"sky-area\">\r\n        <div class=\"balloon-wrapper\">\r\n            <div class=\"balloon-main\" id=\"balloon-body\" onclick=\"document.getElementById('total-val-visual').focus()\">\r\n                <div class=\"balloon-inner\">\r\n                    <div class=\"input-group\">\r\n                        <input type=\"number\" id=\"total-val-visual\" value=\"2\" step=\"any\" autofocus>\r\n                        <span class=\"currency\">DT<\/span>\r\n                    <\/div>\r\n                    <div class=\"edit-icon-hint\">\u270e<\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"ribbon-container\">\r\n                    <div class=\"ribbon-text\">\r\n                        \"La Zakat Al-Fitr comme purification pour le je\u00fbneur des propos futiles ou obsc\u00e8nes et comme nourriture pour les pauvres.\" - Hadith\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"balloon-string\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"control-card\">\r\n        <div class=\"grid-controls\">\r\n            <div class=\"control-box tooltip-trigger\">\r\n                <label>Nombre de membres de la famille<\/label>\r\n                <div class=\"stepper\">\r\n                    <button type=\"button\" class=\"step-btn\" onclick=\"changeQtyPerfect(1)\">+<\/button>\r\n                    <input type=\"number\" id=\"fam-count-input\" value=\"1\" min=\"1\" step=\"1\">\r\n                    <button type=\"button\" class=\"step-btn\" onclick=\"changeQtyPerfect(-1)\">-<\/button>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"control-box tooltip-trigger\">\r\n                <label>Montant de la Zakat par personne (DT)<\/label>\r\n                <div class=\"price-display\">\r\n                    <input type=\"number\" id=\"price-per-unit\" value=\"2\" step=\"0.5\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"boost-section\">\r\n            <label style=\"display:block; text-align:center; font-size:14px; color:#888; margin-bottom:10px;\">Ajoutez un don suppl\u00e9mentaire \u00e0 votre Zakat<\/label>\r\n            <div class=\"boost-grid\">\r\n                <button type=\"button\" class=\"boost-btn\" onclick=\"addDonation(5)\">+ 5 DT<\/button>\r\n                <button type=\"button\" class=\"boost-btn\" onclick=\"addDonation(10)\">+ 10 DT<\/button>\r\n                <button type=\"button\" class=\"boost-btn\" onclick=\"addDonation(20)\">+ 20 DT<\/button>\r\n                <button type=\"button\" class=\"boost-btn\" onclick=\"addDonation(50)\">+ 50 DT<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <button type=\"button\" class=\"main-cta-btn\" id=\"btn-submit-zakat\" style=\"margin-top:20px;\">\r\n                Offrez un A\u00efd joyeux aux enfants gr\u00e2ce \u00e0 votre Zakat \u2728\r\n        <\/button>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function($) {\r\n    'use strict';\r\n\r\n    function syncWithSystem(val) {\r\n        const inputField = $('#wcdp-donation-amount'); \r\n        const radioOther = $('input[value=\"other\"], input[name=\"wcdp_radio_group\"][value=\"other\"]'); \r\n\r\n        if (inputField.length) {\r\n            if (radioOther.length && !radioOther.is(':checked')) {\r\n                radioOther.prop('checked', true).trigger('change');\r\n            }\r\n\r\n            inputField.val(parseFloat(val)).trigger('input').trigger('change').trigger('blur');\r\n\r\n            $(document.body).trigger('update_checkout');\r\n        }\r\n    }\r\n\r\n    $(document).on('ready updated_checkout', function() {\r\n        const famIn = $('#fam-count-input');\r\n        const priceIn = $('#price-per-unit');\r\n        const totalVisual = $('#total-val-visual');\r\n\r\n        function calculateTotal() {\r\n            let f = Math.max(1, parseInt(famIn.val()) || 1);\r\n            let p = parseFloat(priceIn.val()) || 0;\r\n            let t = f * p;\r\n            totalVisual.val(t);\r\n            syncWithSystem(t);\r\n        }\r\n\r\n        window.changeQtyPerfect = function(v) {\r\n            let val = Math.max(1, parseInt(famIn.val()) + v);\r\n            famIn.val(val);\r\n            calculateTotal();\r\n        };\r\n\r\n        window.addDonation = function(amount) {\r\n            let currentTotal = parseFloat(totalVisual.val()) || 0;\r\n            let newTotal = currentTotal + amount;\r\n            totalVisual.val(newTotal);\r\n            syncWithSystem(newTotal);\r\n        };\r\n\r\n        totalVisual.off('input').on('input', function() {\r\n            syncWithSystem($(this).val());\r\n        });\r\n\r\n        famIn.off('input').on('input', calculateTotal);\r\n        priceIn.off('input').on('input', calculateTotal);\r\n\r\n        $('#btn-submit-zakat').off('click').on('click', function(e) {\r\n            e.preventDefault(); \r\n            const target = document.getElementById('billing_first_name') || document.querySelector('.woocommerce-checkout');\r\n            \r\n            if (target) { \r\n                target.scrollIntoView({ behavior: 'smooth', block: 'center' }); \r\n                \r\n                if (target.id === 'billing_first_name') {\r\n                    setTimeout(function() {\r\n                        target.focus();\r\n                    }, 500); \r\n                }\r\n            }\r\n        });\r\n        \r\n    });\r\n\r\n})(jQuery);\r\n<\/script>\r\n\r\n<style>\r\n#total-val-visual:focus {\r\n    outline: none;\r\n    border: 2px solid #ffffff;\r\n    box-shadow: 0 0 10px 3px rgb(189 189 189 \/ 60%);\r\n}\r\n.boost-section { margin-top: 10px; }\r\n.boost-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }\r\n.boost-btn { background: #f8fafc; border: 1px solid #edf2f7; color: var(--primary-blue); border-radius: 12px; padding: 10px 5px; font-weight: 700; cursor: pointer; transition: 0.3s; font-size: 12px; }\r\n.boost-btn:hover { background: var(--primary-blue); color: white; border-color: var(--primary-blue); }\r\n\r\n.zakat-container, .zakat-container * { box-sizing: border-box; }\r\n:root { --primary-blue: #00aeef; --dark-blue: #008cc0; --accent-yellow: #ffce00; --white: #ffffff; }\r\n.zakat-container { max-width: 450px; margin: 20px auto; font-family: 'Cairo', sans-serif; direction: ltr; position: relative; padding: 15px; }\r\n.stepper, .price-display { background: #f8fafc; border: 1px solid #edf2f7; border-radius: 20px; height: 60px; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 10px; width: 100%; overflow: hidden; }\r\n.step-btn { width: 40px; height: 40px; flex-shrink: 0; border: none; background: #fff; border-radius: 12px; color: var(--primary-blue); font-size: 20px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }\r\n.stepper input, .price-display input { width: 100%; background: transparent; border: none; text-align: center; font-size: 22px !important; font-weight: 900; color: #333; outline: none; margin: 0; padding: 0; line-height: 60px; }\r\n.price-display input { color: var(--primary-blue); }\r\n.friendly-hint { text-align: center; margin-bottom: 20px; animation: bounceText 2s infinite; }\r\n.friendly-hint span { background: var(--white); padding: 8px 16px; border-radius: 50px; font-size: 14px; font-weight: 700; color: var(--primary-blue); box-shadow: 0 5px 15px rgba(0,174,239,0.2); border: 1px solid #e0f2ff; }\r\n.sky-area { background: linear-gradient(180deg, #e0f4ff 0%, #ffffff 100%); border-radius: 50px 50px 0 0; height: 380px; display: flex; justify-content: center; align-items: center; position: relative; }\r\n.balloon-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; z-index: 10; }\r\n.balloon-main { width: 200px; height: 240px; background: radial-gradient(circle at 30% 30%, #33c1ff, var(--primary-blue) 70%); border-radius: 50% 50% 50% 50% \/ 40% 40% 60% 60%; box-shadow: inset -10px -10px 20px rgba(0,0,0,0.1), 0 20px 40px rgba(0, 174, 239, 0.3); display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; cursor: pointer; animation: windSway 6s infinite ease-in-out; }\r\n@keyframes windSway { 0%, 100% { transform: rotate(-3deg) translateX(-5px); } 50% { transform: rotate(3deg) translateX(5px); } }\r\n.input-group { display: flex; align-items: center; justify-content: center; gap: 4px; }\r\n#total-val-visual {\r\n    direction:ltr;\r\n    background: transparent; border: none; border-bottom: 2px dashed rgba(255,255,255,0.3); color: var(--white); font-size: 50px; font-weight: 900; width: 130px; text-align: center; outline: none; }\r\n.currency { color: var(--accent-yellow); font-weight: 900; font-size: 18px; margin-top: 10px; }\r\n.edit-icon-hint { color: rgba(255,255,255,0.6); font-size: 14px; margin-top: -5px; }\r\n.ribbon-container { position: absolute; bottom: -30px; width: 280px; background: var(--white); padding: 12px 20px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); transform: rotate(-1deg); }\r\n.ribbon-text { font-size: 13px; font-weight: 700; color: #444; text-align: center; }\r\n.balloon-string { width: 2px; height: 100px; background: linear-gradient(to bottom, rgba(0,0,0,0.1), transparent); }\r\n.control-card { background: var(--white); border-radius: 40px; padding: 40px 30px; margin-top: -60px; position: relative; z-index: 20; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1); }\r\n.grid-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 30px; }\r\n.control-box { position: relative; min-width: 0; }\r\n.control-box label { display: block; font-size: 12px; color: #888; font-weight: 800; margin-bottom: 10px; }\r\n.main-cta-btn { width: 100%;  background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue)); color: var(--white); border: none; border-radius: 22px; padding: 15px; font-size: 20px; font-weight: 900; cursor: pointer; box-shadow: 0 15px 30px rgba(0, 174, 239, 0.3); transition: 0.3s; padding:0;    line-height: 24px;}\r\n@keyframes bounceText { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }\r\ninput::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\r\ninput[type=number] { -moz-appearance: textfield; }\r\n\r\n@media screen and (max-width: 480px) {\r\n    .control-card {\r\n        padding: 25px 15px;\r\n    }\r\n    .grid-controls {\r\n        gap: 8px;\r\n    }\r\n    .stepper, .price-display {\r\n        padding: 0 5px;\r\n    }\r\n    .step-btn {\r\n        width: 32px;\r\n        height: 32px;\r\n        font-size: 18px;\r\n    }\r\n    .stepper input, .price-display input {\r\n        min-width: 0;\r\n        width: auto;\r\n        flex: 1;\r\n        font-size: 18px !important;\r\n        padding: 0; \r\n    }\r\n    .boost-grid {\r\n        gap: 5px;\r\n    }\r\n    .boost-btn {\r\n        font-size: 11px;\r\n        padding: 8px 2px;\r\n    }\r\n    .main-cta-btn {\r\n        padding: 15px 10px !important;\r\n        font-size: 16px;\r\n        line-height: 1.4;\r\n    }\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-854cb1b\" data-id=\"854cb1b\" 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-b209f70 elementor-widget elementor-widget-html\" data-id=\"b209f70\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\ndirection: ltr;\n.payment_method_mpgs img {\n    width: 40%;\n}\nform.checkout.woocommerce-checkout h3 {\n    font-size: 28px;\n}\n    .wcdp-body::before, #wgl-accordion-5c6d2e4::before {\n    display: none;\n    }\ndiv#wcdp_va_amount, .woocommerce-checkout svg.wcdp-divider-arrow:nth-child(1)  {\n    display: none;\n}\np#billing_choix_zaket_field {\n    display: none !important;\n}\n\np#billing_email_field {\n    width: 100%;\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e245dd9 elementor-widget elementor-widget-shortcode\" data-id=\"e245dd9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><ul class=\"woocommerce-error wcdp-error-message\" id=\"wcdp-ajax-error\" role=\"alert\"><li>In the current view, the donation form is not available.<\/li><\/ul><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-476c455 elementor-widget elementor-widget-text-editor\" data-id=\"476c455\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><style>ul#select2-billing_country-results { background: #fff; }<\/style><\/p><p><script>\njQuery(document).ready(function($) {\n    $('.wcdp_options input[type=\"radio\"], .wcdp_cu_field input').on('change input', function(){\n        const isCustom = $(this).closest('li').find('.wcdp_cu_field').length &gt; 0;\n        if (!isCustom) {\n            $('html, body').animate({\n                scrollTop: $('.woocommerce-billing-fields').offset().top\n            }, 600);\n        }\n        if (isCustom &amp;&amp; $(this).val().length &gt; 0) {\n            $('html, body').animate({\n                scrollTop: $('.woocommerce-billing-fields').offset().top\n            }, 600);\n        }\n    });\n});\n<\/script><\/p>\t\t\t\t\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":"<p>Cliquez sur le ballon pour modifier le montant \ud83d\udc47 DT \u270e &#8220;La Zakat Al-Fitr comme purification pour le je\u00fbneur des propos futiles ou obsc\u00e8nes et comme nourriture pour les pauvres.&#8221; &#8211; Hadith Nombre de membres de la famille + &#8211; Montant de la Zakat par personne (DT) Ajoutez un don suppl\u00e9mentaire \u00e0 votre Zakat + [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-123904","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.sosve.tn\/fr\/wp-json\/wp\/v2\/pages\/123904","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sosve.tn\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.sosve.tn\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.sosve.tn\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sosve.tn\/fr\/wp-json\/wp\/v2\/comments?post=123904"}],"version-history":[{"count":13,"href":"https:\/\/www.sosve.tn\/fr\/wp-json\/wp\/v2\/pages\/123904\/revisions"}],"predecessor-version":[{"id":124285,"href":"https:\/\/www.sosve.tn\/fr\/wp-json\/wp\/v2\/pages\/123904\/revisions\/124285"}],"wp:attachment":[{"href":"https:\/\/www.sosve.tn\/fr\/wp-json\/wp\/v2\/media?parent=123904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}