{"id":12,"date":"2026-01-27T17:26:16","date_gmt":"2026-01-27T17:26:16","guid":{"rendered":"https:\/\/www.myclinia.com\/?page_id=12"},"modified":"2026-02-26T08:29:18","modified_gmt":"2026-02-26T08:29:18","slug":"chat","status":"publish","type":"page","link":"https:\/\/www.myclinia.com\/es\/","title":{"rendered":"Conseil Pharmacien &amp; M\u00e9dicaments en Ligne | MyClinia"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n    \n    <style>\n        \/* --- DESIGN GLOBAL & BOUTIQUE --- *\/\n        .myclinia-store-wrapper {\n            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n            max-width: 1000px;\n            margin: 0 auto;\n            padding: 20px;\n        }\n        \n        \/* --- BADGES ET EN-T\u00caTE --- *\/\n        .store-header {\n            text-align: center;\n            margin-bottom: 30px;\n        }\n        .trust-badge {\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            background: #fdf4ff;\n            color: #86198f;\n            padding: 6px 14px;\n            border-radius: 20px;\n            font-size: 0.85em;\n            font-weight: 600;\n            margin-bottom: 15px;\n        }\n        .store-title {\n            color: #1e1b4b;\n            font-size: 2.5em;\n            font-weight: 800;\n            margin: 0 0 10px 0;\n            letter-spacing: -1px;\n        }\n        .store-subtitle {\n            font-size: 1.1em;\n            color: #475569;\n            max-width: 650px;\n            margin: 0 auto;\n        }\n\n        \/* --- S\u00c9LECTEUR D'UNIVERS (4 CATEGORIES) --- *\/\n        .univers-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n            gap: 12px;\n            margin: 25px 0;\n        }\n        .univers-card {\n            background: #fff;\n            border: 1px solid #e2e8f0;\n            padding: 16px;\n            border-radius: 16px;\n            cursor: pointer;\n            text-align: left;\n            transition: all 0.25s ease;\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            font-weight: 600;\n            color: #334155;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.02);\n        }\n        .univers-card:hover {\n            border-color: #7c3aed;\n            color: #7c3aed;\n            transform: translateY(-2px);\n            box-shadow: 0 10px 20px rgba(124,58,237,0.08);\n        }\n        .univers-icon {\n            font-size: 1.4em;\n        }\n\n        \/* --- INTERFACE DU SEARCH & DU STORE --- *\/\n        #store-container {\n            border: 1px solid #e2e8f0;\n            border-radius: 24px;\n            overflow: hidden;\n            background: #fff;\n            box-shadow: 0 20px 40px rgba(0,0,0,0.05);\n        }\n        .store-topbar {\n            background: #7c3aed;\n            padding: 20px 25px;\n            color: white;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n        }\n        .store-topbar-info {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n        }\n\n        \/* --- LOG DES PROPOSITIONS & GRILLE PRODUITS --- *\/\n        #store-display-zone {\n            padding: 25px;\n            background: #f8fafc;\n            min-height: 350px;\n            max-height: 600px;\n            overflow-y: auto;\n        }\n\n        .product-card-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n            gap: 16px;\n            margin-top: 20px;\n        }\n        .product-card {\n            background: #ffffff;\n            border: 1px solid #cbd5e1;\n            border-radius: 16px;\n            padding: 16px;\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n            position: relative;\n            transition: all 0.2s ease;\n        }\n        .product-card:hover {\n            border-color: #7c3aed;\n            box-shadow: 0 12px 24px rgba(124,58,237,0.12);\n            transform: translateY(-3px);\n        }\n        .product-badge {\n            position: absolute;\n            top: 12px;\n            right: 12px;\n            background: #f3e8ff;\n            color: #6b21a8;\n            font-size: 0.7em;\n            font-weight: 700;\n            padding: 4px 8px;\n            border-radius: 10px;\n            text-transform: uppercase;\n        }\n        .product-name {\n            font-size: 1.05em;\n            font-weight: 700;\n            color: #0f172a;\n            margin-top: 15px;\n            margin-bottom: 8px;\n            line-height: 1.3;\n        }\n        .product-desc {\n            font-size: 0.85em;\n            color: #64748b;\n            margin-bottom: 16px;\n            line-height: 1.4;\n        }\n        .product-action-row {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            border-top: 1px solid #f1f5f9;\n            padding-top: 12px;\n            margin-top: auto;\n        }\n        .product-price {\n            font-size: 1.1em;\n            font-weight: 800;\n            color: #7c3aed;\n        }\n        .product-btn-buy {\n            background: #7c3aed;\n            color: white !important;\n            border: none;\n            padding: 8px 16px;\n            border-radius: 10px;\n            font-weight: 700;\n            font-size: 0.85em;\n            cursor: pointer;\n            transition: background 0.2s;\n            text-decoration: none;\n            display: inline-flex;\n            align-items: center;\n            gap: 4px;\n        }\n        .product-btn-buy:hover {\n            background: #6d28d9;\n        }\n\n        \/* --- BARRE DE RECHERCHE SUR-MESURE --- *\/\n        .store-search-bar {\n            display: flex;\n            gap: 10px;\n            padding: 20px;\n            background: #fff;\n            border-top: 1px solid #e2e8f0;\n        }\n        .store-input {\n            flex: 1;\n            padding: 14px;\n            border: 1px solid #cbd5e1;\n            border-radius: 14px;\n            outline: none;\n            font-size: 0.95em;\n        }\n        .store-input:focus {\n            border-color: #7c3aed;\n        }\n\n        \/* --- LOADER --- *\/\n        .clinia-loader {\n            display: inline-flex;\n            align-items: center;\n            gap: 4px;\n            padding: 12px 20px;\n            background: #f1f5f9;\n            border-radius: 18px;\n        }\n        .clinia-loader span {\n            width: 8px; height: 8px; background: #94a3b8;\n            border-radius: 50%; animation: clDot 1.4s infinite both;\n        }\n        .clinia-loader span:nth-child(2) { animation-delay: 0.2s; }\n        .clinia-loader span:nth-child(3) { animation-delay: 0.4s; }\n        @keyframes clDot { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } }\n    <\/style>\n\n    <div class=\"myclinia-store-wrapper\">\n        <!-- Header Boutique -->\n        <div class=\"store-header\">\n            <div class=\"trust-badge\">\ud83d\udd25 Curation IA & Nouveaut\u00e9s en Direct<\/div>\n            <h1 class=\"store-title\">La Boutique des Tendances<\/h1>\n            <p class=\"store-subtitle\">S\u00e9lectionnez un univers ou demandez un article sp\u00e9cifique : notre IA d\u00e9niche les meilleures offres du moment.<\/p>\n            \n            <!-- Grille des 4 Univers -->\n            <div class=\"univers-grid\">\n                <div class=\"univers-card\" onclick=\"triggerCategory('\u26a1 Gadgets high-tech & accessoires malins')\">\n                    <span class=\"univers-icon\">\u26a1<\/span> High-Tech & Gadgets\n                <\/div>\n                <div class=\"univers-card\" onclick=\"triggerCategory('\ud83c\udfe0 Innovations & d\u00e9co pour la maison')\">\n                    <span class=\"univers-icon\">\ud83c\udfe0<\/span> Maison & D\u00e9co\n                <\/div>\n                <div class=\"univers-card\" onclick=\"triggerCategory('\ud83c\udf92 Accessoires de voyage & outdoor')\">\n                    <span class=\"univers-icon\">\ud83c\udf92<\/span> Voyage & Outdoor\n                <\/div>\n                <div class=\"univers-card\" onclick=\"triggerCategory('\ud83c\udf81 Id\u00e9e cadeau originale & rare')\">\n                    <span class=\"univers-icon\">\ud83c\udf81<\/span> Cadeaux Rares\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Moteur de Boutique \/ Chat Dynamique -->\n        <div id=\"store-container\">\n            <div class=\"store-topbar\">\n                <div class=\"store-topbar-info\">\n                    <div style=\"font-size:24px;\">\ud83d\udecd\ufe0f<\/div>\n                    <div>\n                        <div style=\"font-weight:700;\">Assistant Shopping & Catalogue IA<\/div>\n                        <div style=\"font-size:0.8em; opacity:0.9;\">G\u00e9n\u00e9ration de produits en temps r\u00e9el<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Zone d'affichage des cartes produits -->\n            <div id=\"store-display-zone\">\n                <div style=\"margin-bottom:20px;\">\n                    <span style=\"background:white; color:#1e293b; padding:14px 18px; border-radius:18px; display:inline-block; max-width:85%; box-shadow:0 2px 8px rgba(0,0,0,0.03);\">\n                        Bonjour ! S\u00e9lectionnez un univers ci-dessus ou d\u00e9crivez l'article recherch\u00e9 pour afficher nos produits disponibles \ud83d\udc47\n                    <\/span>\n                <\/div>\n            <\/div>\n\n            <!-- Barre de Recherche -->\n            <div class=\"store-search-bar\">\n                <input type=\"text\" id=\"store-user-input\" class=\"store-input\" placeholder=\"Ex: Support t\u00e9l\u00e9phone voiture magn\u00e9tique, r\u00e9veil doux, ...\" \/>\n                <button onclick=\"submitStoreSearch()\" style=\"background:#7c3aed; color:white; border:none; width:48px; height:48px; border-radius:14px; cursor:pointer; font-size:18px;\">\n                    \ud83d\udd0d\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n    const cliniaRestUrl = \"https:\/\/www.myclinia.com\/es\/wp-json\/clinia\/v1\/chat\";\n\n    document.addEventListener('DOMContentLoaded', function() {\n        const input = document.getElementById('store-user-input');\n        if (input) {\n            input.addEventListener('keypress', function(e) {\n                if (e.key === 'Enter') {\n                    e.preventDefault();\n                    submitStoreSearch();\n                }\n            });\n        }\n    });\n\n    function triggerCategory(categoryName) {\n        document.getElementById('store-user-input').value = categoryName;\n        submitStoreSearch();\n    }\n\n    \/\/ Redirection directe vers la page de checkout express avec passage du produit et du prix\n    function redirectToCheckout(productName, price) {\n        const cleanPrice = price.replace(\/[^0-9.,]\/g, '').replace(',', '.');\n        const checkoutUrl = \"https:\/\/www.myclinia.com\/checkout-express\/\" \n            + \"?item_name=\" + encodeURIComponent(productName) \n            + \"&item_price=\" + encodeURIComponent(cleanPrice);\n            \n        window.location.href = checkoutUrl;\n    }\n\n    async function submitStoreSearch() {\n        const input = document.getElementById('store-user-input');\n        const displayZone = document.getElementById('store-display-zone');\n        const query = input.value.trim();\n        if(!query) return;\n\n        \/\/ Affichage de la requ\u00eate utilisateur\n        displayZone.innerHTML += `\n            <div style=\"text-align:right; margin-bottom:20px;\">\n                <span style=\"background:#7c3aed; color:white; padding:12px 18px; border-radius:18px 18px 4px 18px; display:inline-block; font-weight:500;\">\n                    ${query}\n                <\/span>\n            <\/div>`;\n        input.value = '';\n\n        \/\/ Loader\n        const loaderId = 'loader-' + Date.now();\n        displayZone.innerHTML += `<div id=\"${loaderId}\" style=\"margin-bottom:20px;\"><div class=\"clinia-loader\"><span><\/span><span><\/span><span><\/span><\/div><\/div>`;\n        displayZone.scrollTop = displayZone.scrollHeight;\n\n        try {\n            const response = await fetch(cliniaRestUrl, {\n                method: 'POST',\n                headers: {'Content-Type': 'application\/json'},\n                body: JSON.stringify({ message: query })\n            });\n            const data = await response.json();\n            \n            document.getElementById(loaderId)?.remove();\n\n            const textAnswer = data.answer || \"Voici les meilleurs articles identifi\u00e9s par notre IA :\";\n            let outputHtml = `<div style=\"margin-bottom:15px;\"><span style=\"background:white; color:#1e293b; padding:14px 18px; border-radius:18px; display:inline-block;\">${textAnswer}<\/span><\/div>`;\n\n            \/\/ Rendu de la grille de produits e-commerce\n            if (data.products && data.products.length > 0) {\n                outputHtml += `<div class=\"product-card-grid\">`;\n                data.products.forEach(p => {\n                    outputHtml += `\n                        <div class=\"product-card\">\n                            <span class=\"product-badge\">Tendance<\/span>\n                            <div class=\"product-name\">${p.name}<\/div>\n                            <div class=\"product-desc\">${p.desc}<\/div>\n                            <div class=\"product-action-row\">\n                                <span class=\"product-price\">${p.price}<\/span>\n                                <button class=\"product-btn-buy\" onclick=\"redirectToCheckout('${p.name.replace(\/'\/g, \"\\\\'\")}', '${p.price}')\">\n                                    Commander \ud83d\uded2\n                                <\/button>\n                            <\/div>\n                        <\/div>\n                    `;\n                });\n                outputHtml += `<\/div>`;\n            }\n\n            displayZone.innerHTML += `<div>${outputHtml}<\/div>`;\n            displayZone.scrollTop = displayZone.scrollHeight;\n\n        } catch(e) {\n            console.error(\"Erreur e-commerce:\", e);\n            document.getElementById(loaderId)?.remove();\n        }\n    }\n    <\/script>\n    \n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\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":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.myclinia.com\/es\/wp-json\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.myclinia.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.myclinia.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.myclinia.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.myclinia.com\/es\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":15,"href":"https:\/\/www.myclinia.com\/es\/wp-json\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":153,"href":"https:\/\/www.myclinia.com\/es\/wp-json\/wp\/v2\/pages\/12\/revisions\/153"}],"wp:attachment":[{"href":"https:\/\/www.myclinia.com\/es\/wp-json\/wp\/v2\/media?parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}