{"id":123931,"date":"2026-03-17T08:44:19","date_gmt":"2026-03-17T07:44:19","guid":{"rendered":"https:\/\/www.sosve.tn\/?page_id=123931"},"modified":"2026-03-26T12:49:59","modified_gmt":"2026-03-26T11:49:59","slug":"commande","status":"publish","type":"page","link":"https:\/\/www.sosve.tn\/fr\/commande\/","title":{"rendered":"Commande"},"content":{"rendered":"\n<style>\n\/* --- SOS VILLAGES: UPDATED CHECKOUT LAYOUT --- *\/\n\n\/* 1. MAIN WRAPPER: Side-by-Side Layout *\/\n@media (min-width: 992px) {\n    form.checkout.woocommerce-checkout {\n        display: grid !important;\n        grid-template-columns: 1.2fr 1fr !important;\n        \/* Define two rows: Row 1 for the title, Row 2 for the table *\/\n        grid-template-rows: auto auto; \n        gap: 0 40px !important; \/* Row gap 0 to control space via margins instead *\/\n        align-items: flex-start !important;\n        max-width: 1200px;\n        margin: 30px auto !important;\n    }\n\n    \/* Left Side (Billing) - Spans both rows so it doesn't push the table down *\/\n    #customer_details {\n        grid-column: 1;\n        grid-row: 1 \/ span 2; \n        width: 100% !important;\n    }\n\n    \/* Right Side Title - Stays in Row 1 *\/\n    #order_review_heading {\n        grid-column: 2;\n        grid-row: 1;\n        margin-bottom: 20px !important; \/* Adjust this to control gap under the blue line *\/\n        margin-top: 0 !important;\n    }\n\n    \/* Right Side Table Box - Stays in Row 2 (immediately under the title) *\/\n    #order_review {\n        grid-column: 2;\n        grid-row: 2;\n        width: 100% !important;\n        margin-top: 0 !important; \/* Snaps it to the title above *\/\n    }\n}\n\n\/* 2. BOX STYLING (The White Cards) *\/\n.woocommerce-billing-fields, \n#order_review {\n    background: #ffffff !important;\n    border-radius: 20px !important;\n    padding: 30px !important;\n    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;\n    border: 1px solid #eef2f5 !important;\n}\n\n\/* 3. HEADINGS STYLE *\/\n.woocommerce-checkout h3 {\n    color: #005fa9 !important;\n    font-size: 24px !important;\n    font-weight: 800 !important;\n    margin-bottom: 25px !important;\n    border-bottom: 3px solid #00aeef;\n    padding-bottom: 10px;\n    display: inline-block;\n}\n\n\/* 4. BILLING FIELDS: 2-COLUMN INTERNAL LAYOUT *\/\n.woocommerce-billing-fields__field-wrapper {\n    display: flex !important;\n    flex-wrap: wrap !important;\n    gap: 0 4% !important;\n}\n\n\/* Force specific fields to be half-width to sit side-by-side *\/\n#billing_first_name_field, #billing_last_name_field,\n#billing_country_field, #billing_phone_field,\n#billing_email_field, #billing_choix_zaket_field {\n    width: 48% !important;\n    float: none !important;\n}\n\n\/* 5. INPUT FIELDS STYLING *\/\n.woocommerce-checkout input.input-text, \n.woocommerce-checkout select,\n.select2-container--default .select2-selection--single {\n    background-color: #f9f9f9 !important;\n    border: 1.5px solid #ebebeb !important;\n    border-radius: 10px !important;\n    padding: 12px 15px !important;\n    height: 50px !important;\n    font-size: 14px !important;\n    color: #333 !important;\n}\n\n\/* FIX: Centers \"Tunisie\" text vertically in the dropdown *\/\n.select2-container--default .select2-selection--single .select2-selection__rendered {\n    line-height: 50px !important;\n    padding: 0 !important;\n}\n\n.woocommerce-checkout label {\n    font-weight: 700 !important;\n    color: #005fa9 !important;\n    font-size: 13px !important;\n    margin-bottom: 5px !important;\n}\n\n\/* 6. ZAKAT BOX (Special Styling for the Right side field) *\/\n#billing_choix_zaket_field {\n    border: 2px solid #df506b !important; \/* Red border as seen in your image 2 *\/\n    border-radius: 10px !important;\n    padding: 10px 15px !important;\n    display: flex !important;\n    align-items: center !important;\n    height: 50px !important;\n    margin-top: 25px !important; \/* Align with Email label *\/\n}\n\n#billing_choix_zaket_field label {\n    margin-bottom: 0 !important;\n    display: flex !important;\n    flex-direction: row-reverse !important;\n    gap: 10px !important;\n    width: 100% !important;\n    justify-content: space-between !important;\n}\n\n\/* 7. ORDER TABLE STYLING *\/\n.shop_table.woocommerce-checkout-review-order-table {\n    border: none !important;\n}\n\n.shop_table thead th {\n    background: #e9ecef !important;\n    padding: 15px !important;\n    color: #333 !important;\n    border-radius: 0 !important; \/* FIX: Joins the gray boxes into one bar *\/\n}\n\n\/* FIX: Round only the outer corners of the header bar *\/\n.shop_table thead th:first-child { border-radius: 10px 0 0 10px !important; }\n.shop_table thead th:last-child { border-radius: 0 10px 10px 0 !important; }\n\n.product-total .amount, .cart-subtotal .amount {\n    color: #00aeef !important;\n    font-weight: 700 !important;\n}\n\n.order-total .amount {\n    color: #005fa9 !important;\n    font-size: 22px !important;\n    font-weight: 900 !important;\n}\n\n\/* 8. PAYMENT & COMMANDER BUTTON *\/\n#payment {\n    background: transparent !important;\n    padding: 0 !important;\n}\n\n.sosdon-reminder-wrapper {\n    background: #e1f5fe !important;\n    border: none !important;\n    border-radius: 10px !important;\n}\n\n#place_order {\n    background: #00aeef !important;\n    color: #fff !important;\n    width: 100% !important;\n    height: 55px !important;\n    border-radius: 30px !important;\n    font-size: 18px !important;\n    font-weight: 700 !important;\n    text-transform: uppercase !important;\n    border: none !important;\n    margin-top: 20px !important;\n}\n\n\/* 9. MOBILE FIX *\/\n@media (max-width: 991px) {\n    form.checkout.woocommerce-checkout {\n        display: block !important;\n    }\n    #billing_first_name_field, #billing_last_name_field,\n    #billing_country_field, #billing_phone_field,\n    #billing_email_field, #billing_choix_zaket_field {\n        width: 100% !important;\n    }\n}\n<\/style><style>\n\/* --- SOS VILLAGES: MODERN PREMIUM UPGRADE --- *\/\n\n:root {\n    --sos-blue: #005fa9;\n    --sos-light-blue: #00aeef;\n    --sos-accent-pink: #df506b;\n    --soft-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 1px 8px rgba(0, 0, 0, 0.02);\n    --input-bg: #fdfdfe;\n}\n\n\/* 1. LAYOUT REFINEMENT *\/\n@media (min-width: 992px) {\n    form.checkout.woocommerce-checkout {\n        display: grid !important;\n        grid-template-columns: 1.2fr 1fr !important;\n        grid-template-rows: auto auto;\n        gap: 0 50px !important;\n        max-width: 1250px;\n        margin: 40px auto !important;\n    }\n    #customer_details { grid-column: 1; grid-row: 1 \/ span 2; }\n    #order_review_heading { grid-column: 2; grid-row: 1; }\n    #order_review { grid-column: 2; grid-row: 2; }\n}\n\n\/* 2. PREMIUM CARDS *\/\n.woocommerce-billing-fields, \n#order_review {\n    background: #ffffff !important;\n    border-radius: 24px !important;\n    padding: 35px !important;\n    box-shadow: var(--soft-shadow) !important;\n    border: 1px solid rgba(238, 242, 245, 0.8) !important;\n    transition: transform 0.3s ease;\n}\n\n\/* 3. MODERN HEADINGS *\/\n.woocommerce-checkout h3 {\n    color: var(--sos-blue) !important;\n    font-size: 26px !important;\n    font-weight: 800 !important;\n    letter-spacing: -0.5px;\n    margin-bottom: 30px !important;\n    border-bottom: none !important; \/* Removing the old line *\/\n    position: relative;\n}\n\n\/* Adding a cleaner, shorter accent line under headings *\/\n.woocommerce-checkout h3::after {\n    content: '';\n    position: absolute;\n    bottom: -8px;\n    left: 0;\n    width: 50px;\n    height: 4px;\n    background: var(--sos-light-blue);\n    border-radius: 10px;\n}\n\n\/* 4. SLEEK INPUT FIELDS *\/\n.woocommerce-checkout input.input-text, \n.woocommerce-checkout select,\n.select2-container--default .select2-selection--single {\n    background-color: var(--input-bg) !important;\n    border: 1.5px solid #e2e8f0 !important;\n    border-radius: 12px !important;\n    transition: all 0.2s ease-in-out !important;\n    font-size: 15px !important;\n}\n\n.woocommerce-checkout input.input-text:focus {\n    border-color: var(--sos-light-blue) !important;\n    background-color: #fff !important;\n    box-shadow: 0 0 0 4px rgba(0, 174, 239, 0.1) !important;\n    outline: none;\n}\n\n\/* 5. REDESIGNED ZAKAT BOX (Card Style) *\/\n#billing_choix_zaket_field {\n    background: rgba(223, 80, 107, 0.04) !important; \/* Soft Pink tint *\/\n    border: 1.5px dashed var(--sos-accent-pink) !important;\n    border-radius: 15px !important;\n    padding: 15px 20px !important;\n    height: auto !important;\n    margin-top: 15px !important;\n    cursor: pointer;\n}\n\n#billing_choix_zaket_field label {\n    font-size: 14px !important;\n    color: var(--sos-accent-pink) !important;\n    display: flex !important;\n    align-items: center !important;\n    justify-content: space-between !important;\n    flex-direction: row-reverse !important;\n}\n\n\/* 6. CLEAN ORDER TABLE *\/\n.shop_table.woocommerce-checkout-review-order-table {\n    margin-bottom: 25px !important;\n}\n\n.shop_table thead th {\n    background: transparent !important; \/* Removing the gray box *\/\n    border-bottom: 2px solid #f1f5f9 !important;\n    text-transform: uppercase;\n    font-size: 12px;\n    letter-spacing: 1px;\n    color: #94a3b8 !important;\n    padding: 10px 0 !important;\n}\n\n.cart_item td {\n    padding: 15px 0 !important;\n    border-bottom: 1px solid #f8fafc !important;\n}\n\n.product-name { color: #334155; font-weight: 500; }\n.product-total .amount { color: var(--sos-light-blue) !important; font-size: 16px; }\n\n\/* 7. PAYMENT AREA REFINEMENT *\/\n#payment { margin-top: 30px; border-top: 1px solid #f1f5f9; padding-top: 25px !important; }\n\n.payment_method_mpgs_payment_link label img {\n    max-height: 35px !important;\n    margin-top: 15px;\n    display: block;\n}\n\n\/* 8. REDESIGNED MONTHLY REMINDER (Card Style) *\/\n.sosdon-reminder-wrapper {\n    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;\n    border: none !important;\n    border-radius: 16px !important;\n    padding: 20px !important;\n    margin-bottom: 25px !important;\n    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);\n}\n\n.sosdon-reminder-wrapper label {\n    color: var(--sos-blue) !important;\n    font-size: 14px !important;\n    line-height: 1.4;\n}\n\n.sosdon-reminder-wrapper input[type=\"checkbox\"] {\n    width: 22px !important;\n    height: 22px !important;\n    border-radius: 6px !important;\n}\n\n\/* 9. THE \"ORDER\" BUTTON (The Star of the show) *\/\n#place_order {\n    background: linear-gradient(to right, #00aeef, #0089d1) !important;\n    box-shadow: 0 10px 20px rgba(0, 174, 239, 0.3) !important;\n    border: none !important;\n    height: 60px !important;\n    letter-spacing: 1px !important;\n    transition: all 0.3s ease !important;\n}\n\n#place_order:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 15px 25px rgba(0, 174, 239, 0.4) !important;\n}\n\/* --- TIGHTEN ORDER REVIEW TO REDUCE SCROLLING --- *\/\n\n\/* 1. Reduce padding inside product rows *\/\n.cart_item td {\n    padding: 5px 0 !important; \/* Reduced from 15px to 5px *\/\n    border-bottom: 1px solid #f8fafc !important;\n}\n\n\/* 2. Reduce padding in the header (PRODUIT \/ SOUS-TOTAL) *\/\n.shop_table thead th {\n    padding: 5px 0 !important; \/* Reduced from 10px to 5px *\/\n}\n\n\/* 3. Reduce space below the table before the totals start *\/\n.shop_table.woocommerce-checkout-review-order-table {\n    margin-bottom: 10px !important; \/* Reduced from 25px *\/\n}\n\n\/* 4. Reduce padding in the Subtotal and Total rows *\/\n.shop_table tfoot th, \n.shop_table tfoot td {\n    padding: 8px 0 !important;\n}\n\n\/* 5. Reduce the gap above the payment section *\/\n#payment { \n    margin-top: 15px !important; \/* Reduced from 30px *\/\n    padding-top: 15px !important; \/* Reduced from 25px *\/\n}\n\n\/* 6. Reduce spacing in the monthly reminder card *\/\n.sosdon-reminder-wrapper {\n    padding: 12px 15px !important; \/* More compact padding *\/\n    margin-bottom: 15px !important; \/* Reduced from 25px *\/\n}\n<\/style>\n\n\n<div class=\"woocommerce\"><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-123931","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.sosve.tn\/fr\/wp-json\/wp\/v2\/pages\/123931","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=123931"}],"version-history":[{"count":33,"href":"https:\/\/www.sosve.tn\/fr\/wp-json\/wp\/v2\/pages\/123931\/revisions"}],"predecessor-version":[{"id":133590,"href":"https:\/\/www.sosve.tn\/fr\/wp-json\/wp\/v2\/pages\/123931\/revisions\/133590"}],"wp:attachment":[{"href":"https:\/\/www.sosve.tn\/fr\/wp-json\/wp\/v2\/media?parent=123931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}