{"id":58,"date":"2025-10-02T16:45:56","date_gmt":"2025-10-02T16:45:56","guid":{"rendered":"http:\/\/lemarbre.tn\/lemarbre\/?page_id=58"},"modified":"2025-10-11T13:47:36","modified_gmt":"2025-10-11T13:47:36","slug":"salle-a-manger","status":"publish","type":"page","link":"https:\/\/lemarbre.tn\/lemarbre\/salle-a-manger\/","title":{"rendered":"Salle \u00e0 Manger"},"content":{"rendered":"\n<style> \n.products-container {\n    max-width: 1400px;\n    margin: 0 auto;\n    padding: 60px 20px;\n}\n\n.page-header {\n    text-align: center;\n    margin-bottom: 60px;\n}\n\n.page-header h1 {\n    font-size: 42px;\n    font-weight: 300;\n    color: #222;\n    margin-bottom: 15px;\n}\n\n.page-header p {\n    font-size: 18px;\n    color: #666;\n}\n\n.products-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));\n    gap: 50px;\n    margin-bottom: 40px;\n    justify-items: center;\n}\n\n.product-card {\n    background: white;\n    border-radius: 8px;\n    overflow: hidden;\n    box-shadow: 0 2px 15px rgba(0,0,0,0.08);\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\n    max-width: 550px;\n    width: 100%;\n}\n\n.product-card:hover {\n    transform: translateY(-5px);\n    box-shadow: 0 8px 25px rgba(0,0,0,0.12);\n}\n\n.product-image-container {\n    position: relative;\n    width: 100%;\n    height: 350px;\n    overflow: hidden;\n    background: #f5f5f5;\n}\n\n.product-image {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    transition: opacity 0.3s ease;\n}\n\n.discount-badge {\n    position: absolute;\n    top: 15px;\n    right: 15px;\n    background: #e74c3c;\n    color: white;\n    padding: 8px 15px;\n    border-radius: 25px;\n    font-size: 14px;\n    font-weight: 600;\n}\n\n.product-info {\n    padding: 30px;\n}\n\n.product-title {\n    font-size: 26px;\n    font-weight: 500;\n    color: #222;\n    margin-bottom: 15px;\n}\n\n.product-description {\n    font-size: 15px;\n    color: #777;\n    margin-bottom: 25px;\n    line-height: 1.8;\n}\n\n.color-selector {\n    margin-bottom: 25px;\n}\n\n.color-label {\n    font-size: 13px;\n    color: #666;\n    margin-bottom: 12px;\n    display: block;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.color-options {\n    display: flex;\n    gap: 12px;\n}\n\n.color-option {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    border: 3px solid transparent;\n    cursor: pointer;\n    transition: all 0.3s ease;\n}\n\n.color-option:hover {\n    transform: scale(1.1);\n}\n\n.color-option.active {\n    border-color: #333;\n    box-shadow: 0 0 0 2px white, 0 0 0 4px #333;\n}\n\n.color-black { background-color: #1a1a1a; }\n.color-white { background-color: #ffffff; border: 2px solid #ddd; }\n.color-gray { background-color: #808080; }\n.color-beige { background-color: #d4c5b9; }\n.color-brown { background-color: #8b4513; }\n.color-quartz {\n  background: linear-gradient(135deg, #ececec 0%, #d9d9d9 50%, #f2f2f2 100%);\n  border: 2px solid #ddd;\n}\n\n.btn-details {\n    width: 100%;\n    padding: 16px 30px;\n    background: #222;\n    color: white;\n    border: none;\n    border-radius: 5px;\n    font-size: 16px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.3s ease;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n}\n\n.btn-details:hover {\n    background: #000;\n}\n\n@media (max-width: 768px) {\n    .products-grid {\n        grid-template-columns: 1fr;\n    }\n    .page-header h1 {\n        font-size: 32px;\n    }\n    .product-image-container {\n        height: 280px;\n    }\n}\n<\/style>\n\n<div class=\"products-container\">\n    <div class=\"page-header\">\n        <h1>Meubles de Salle \u00e0 Manger en Quartz<\/h1>\n    <\/div>\n\n    <div class=\"products-grid\" id=\"productsGrid\"><\/div>\n<\/div>\n\n<script>\nconst products = [\n    {\n        id: 1,\n        name: \"Ensemble Salle \u00e0 Manger Moderne\",\n        description: \"Table \u00e0 manger 6-8 places  en quartz. Design contemporain \u00e9pur\u00e9 avec finitions impeccables. Parfait pour cr\u00e9er un espace convivial et \u00e9l\u00e9gant dans votre salle \u00e0 manger.\",\n        discount: 20,\n        images: {\n            quartz: \"http:\/\/lemarbre.tn\/lemarbre\/wp-content\/uploads\/2025\/10\/WhatsApp-Image-2025-10-09-at-13.40.51.jpeg\",\n        },\n        colors: ['quartz']\n    },\n   \n];\n\nfunction getColorName(color) {\n    const names = { \n        black: 'Noir', \n        white: 'Blanc',\n        gray: 'Gris',\n        beige: 'Beige',\n        brown: 'Marron',\n        quartz: 'Quartz'\n\n    };\n    return names[color] || color;\n}\n\nfunction renderProducts() {\n    const grid = document.getElementById('productsGrid');\n    \n    products.forEach(product => {\n        const card = document.createElement('div');\n        card.className = 'product-card';\n        const firstColor = product.colors[0];\n        \n        card.innerHTML = `\n            <div class=\"product-image-container\">\n                <img decoding=\"async\" src=\"${product.images[firstColor]}\" alt=\"${product.name}\" class=\"product-image\" id=\"img-${product.id}\">\n                <div class=\"discount-badge\">-${product.discount}%<\/div>\n            <\/div>\n            <div class=\"product-info\">\n                <h3 class=\"product-title\">${product.name}<\/h3>\n                <p class=\"product-description\">${product.description}<\/p>\n                \n                <div class=\"color-selector\">\n                    <span class=\"color-label\">Finitions disponibles<\/span>\n                    <div class=\"color-options\">\n                        ${product.colors.map((color, index) => `\n                            <div class=\"color-option color-${color} ${index === 0 ? 'active' : ''}\" \n                                 data-color=\"${color}\" \n                                 data-product-id=\"${product.id}\"\n                                 title=\"${getColorName(color)}\">\n                            <\/div>\n                        `).join('')}\n                    <\/div>\n                <\/div>\n                \n                <button class=\"btn-details\" onclick=\"window.location.href='?page_id=218&#038;id=${product.id}'\">\n                    Voir les d\u00e9tails\n                <\/button>\n            <\/div>\n        `;\n        \n        grid.appendChild(card);\n    });\n    \n    document.querySelectorAll('.color-option').forEach(option => {\n        option.addEventListener('click', function(e) {\n            e.stopPropagation();\n            const productId = this.dataset.productId;\n            const color = this.dataset.color;\n            const product = products.find(p => p.id == productId);\n            const img = document.getElementById(`img-${productId}`);\n            \n            img.style.opacity = '0';\n            setTimeout(() => {\n                img.src = product.images[color];\n                img.style.opacity = '1';\n            }, 200);\n            \n            const card = this.closest('.product-card');\n            card.querySelectorAll('.color-option').forEach(opt => opt.classList.remove('active'));\n            this.classList.add('active');\n        });\n    });\n}\n\nif (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', renderProducts);\n} else {\n    renderProducts();\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Meubles de Salle \u00e0 Manger en Quartz<\/p>\n","protected":false},"author":1,"featured_media":375,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-58","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/lemarbre.tn\/lemarbre\/wp-json\/wp\/v2\/pages\/58","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lemarbre.tn\/lemarbre\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lemarbre.tn\/lemarbre\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lemarbre.tn\/lemarbre\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lemarbre.tn\/lemarbre\/wp-json\/wp\/v2\/comments?post=58"}],"version-history":[{"count":8,"href":"https:\/\/lemarbre.tn\/lemarbre\/wp-json\/wp\/v2\/pages\/58\/revisions"}],"predecessor-version":[{"id":469,"href":"https:\/\/lemarbre.tn\/lemarbre\/wp-json\/wp\/v2\/pages\/58\/revisions\/469"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lemarbre.tn\/lemarbre\/wp-json\/wp\/v2\/media\/375"}],"wp:attachment":[{"href":"https:\/\/lemarbre.tn\/lemarbre\/wp-json\/wp\/v2\/media?parent=58"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}