{"id":4179,"date":"2025-10-29T13:14:43","date_gmt":"2025-10-29T13:14:43","guid":{"rendered":"https:\/\/pro.barestho.com\/?page_id=4179"},"modified":"2025-10-29T13:30:22","modified_gmt":"2025-10-29T13:30:22","slug":"integration-module","status":"publish","type":"page","link":"https:\/\/pro.barestho.com\/en\/integration-module\/","title":{"rendered":"Int\u00e9gration du module de r\u00e9servation Barestho"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Assistant d'int\u00e9gration Barestho<\/title>\n <!-- Font Awesome -->\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\" rel=\"stylesheet\">\n <style>\n \/* Global Wizard *\/\n .integration-assistant {font-family:Inter,sans-serif;max-width:900px;margin:auto;padding:40px 20px;text-align:center;}\n .step-block {display:none;}\n .step-block.active {display:block;}\n .step-block h3 {margin-bottom:15px;}\n .step-block p {margin-bottom:25px;}\n\n \/* Stepper *\/\n .steps {display:flex;align-items:center;justify-content:center;margin:25px 0 40px;flex-wrap:wrap;}\n .step {width:36px;height:36px;border-radius:50%;border:2px solid #dcdce4;display:flex;align-items:center;justify-content:center;font-weight:600;background:#fff;position:relative;}\n .step .number {color:#6b6b75;}\n .step.active {background:#000;border-color:#000;}\n .step.active .number {color:#fff;}\n .step.completed {background:#10b981;border-color:#10b981;}\n .step.completed .number {display:none;}\n .step.completed::after {content:\"\\f00c\";font-family:\"Font Awesome 6 Free\";font-weight:900;color:#fff;font-size:16px;position:absolute;}\n .line {height:2px;width:40px;background:#dcdce4;}\n\n \/* Card *\/\n .card {background:#fff;border-radius:12px;padding:30px;box-shadow:0 2px 10px rgba(0,0,0,0.06);}\n .features{display:flex;justify-content:center;gap:40px;margin:40px 0;flex-wrap:wrap;}\n .feature{flex:1 1 200px;padding:30px 20px;text-align:center;border-radius:12px;}\n .feature .icon{font-size:46px;margin-bottom:20px;color:#000;}\n .feature.option{background:#f5f5f5;border:1px solid #ddd;cursor:pointer;}\n .feature.option:hover{background:#252332;color:#fff;}\n .feature.option:hover .icon,.feature.option:hover h4,.feature.option:hover p{color:#fff;}\n .feature.option.selected{background:#252332;color:#fff;}\n .feature.option.selected .icon,.feature.option.selected h4,.feature.option.selected p{color:#fff;}\n\n \/* Input *\/\n .input-group {margin-bottom: 15px; position: relative;}\n .input-group label {display: block; margin-bottom: 8px; font-weight: 600;}\n .input-wrapper {display:flex;align-items:center;border:1px solid #ccc;border-radius:8px;padding:10px 12px;}\n .input-wrapper input {\n border:none;\n outline:none;\n flex:1;\n background:transparent;\n font-size: 16px; \/* CORRECTION: Taille de police fixe \u00e0 16px *\/\n }\n .input-wrapper input:focus {background: #fff;}\n .input-wrapper i {margin-right: 10px; color: #6b6b75;}\n\n \/* CORRECTION: Style pour l'info-bulle ID - alignement corrig\u00e9 *\/\n .label-with-tooltip {\n display: flex;\n align-items: start;\n gap: 8px;\n }\n \n .info-icon {\n width: 20px;\n height: 20px;\n background: #6b6b75;\n color: white;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n cursor: help;\n position: relative;\n transition: background-color 0.2s ease;\n flex-shrink: 0;\n \/* CORRECTION: font-size retir\u00e9 *\/\n }\n \n .info-icon:hover {\n background: #252332;\n }\n \n \/* CORRECTION: Nouveau style pour la tooltip desktop (survol) *\/\n .tooltip-desktop {\n position: absolute;\n top: 100%;\n left: 0;\n background: white;\n border: 1px solid #e5e5ea;\n border-radius: 12px;\n padding: 20px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n width: 320px;\n z-index: 1000;\n opacity: 0;\n visibility: hidden;\n transition: all 0.3s ease;\n margin-top: 8px;\n text-align: left;\n }\n \n .tooltip-desktop::before {\n content: '';\n position: absolute;\n bottom: 100%;\n left: 20px;\n border: 8px solid transparent;\n border-bottom-color: #e5e5ea;\n }\n \n .tooltip-desktop::after {\n content: '';\n position: absolute;\n bottom: 100%;\n left: 20px;\n border: 7px solid transparent;\n border-bottom-color: white;\n margin-bottom: -1px;\n }\n \n .info-icon:hover .tooltip-desktop {\n opacity: 1;\n visibility: visible;\n }\n \n \/* CORRECTION: Style pour la modale mobile *\/\n .tooltip-modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0,0,0,0.5);\n z-index: 10000;\n align-items: center;\n justify-content: center;\n }\n \n .tooltip-modal.active {\n display: flex;\n }\n \n .tooltip-content {\n background: white;\n border-radius: 16px;\n padding: 25px;\n max-width: 400px;\n width: 90%;\n box-shadow: 0 20px 60px rgba(0,0,0,0.2);\n position: relative;\n text-align: left;\n }\n \n .tooltip-close {\n position: absolute;\n top: 15px;\n right: 20px;\n background: none;\n border: none;\n font-size: 20px;\n cursor: pointer;\n color: #6b6b75;\n width: 30px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n transition: background-color 0.2s ease;\n }\n \n .tooltip-close:hover {\n background: #f5f5f5;\n }\n \n .tooltip-title {\n font-weight: 700;\n color: #252332;\n margin-bottom: 15px;\n font-size: 18px;\n padding-right: 40px;\n }\n \n .tooltip-text {\n color: #6b6b75;\n font-size: 14px;\n line-height: 1.5;\n margin-bottom: 15px;\n }\n \n .tooltip-example {\n background: #f8f9fa;\n border-radius: 8px;\n padding: 15px 0; \n font-size: 13px;\n color: #252332;\n margin-bottom: 12px;\n text-align: center;\n border: 1px solid #e5e5ea;\n }\n \n .tooltip-highlight {\n background: #fff3cd;\n color: #856404;\n padding: 2px 6px;\n border-radius: 4px;\n font-weight: 600;\n }\n\n \/* Step 3 *\/\n .config-card,.modes-card,.customize-grid,.code-block{border:1px solid #e5e5ea;border-radius:12px;padding:20px;margin:25px 0;text-align:left;}\n \n \/* MODIFICATION: Mode d'int\u00e9gration responsive pour mobile *\/\n .modes{display:flex;gap:20px;flex-wrap:wrap;}\n .mode-item{flex:1;border:1px solid #ccc;padding:15px;border-radius:8px;text-align:center;cursor:pointer;transition:.2s;}\n .mode-item.active{border:2px solid #252332;}\n .mode-item:hover{background:#252332;color:#fff;}\n .mode-item:hover h5,.mode-item:hover p{color:#fff;}\n\n \/* Personnalisation *\/\n .customize-grid{display:flex;gap:20px;flex-wrap:wrap;}\n .customize-box, .preview-box {flex: 1;}\n .input-color-line {display: flex; gap: 10px; margin-bottom: 15px;}\n .input-color-line input[type=\"color\"] {width: 50px; height: 40px; border: none; border-radius: 6px; cursor: pointer;}\n .input-color-line input[type=\"text\"] {\n flex: 1; \n padding: 10px; \n border: 1px solid #ccc; \n border-radius: 6px;\n font-size: 16px; \/* CORRECTION: Taille de police fixe \u00e0 16px *\/\n width:30px;\n }\n .logo-choices{display:flex;gap:10px;margin-top:8px;}\n .logo-option{border:2px solid transparent;border-radius:8px;padding:5px;cursor:pointer;display:flex;align-items:center;justify-content:center;height:50px;transition: all 0.2s ease;}\n .logo-option img{height:24px;object-fit:contain;}\n .logo-option.active{border:2px solid #000;}\n\n \/* Preview *\/\n .widget-preview{border:1px solid #ddd;border-radius:12px;overflow:hidden;}\n .preview-header{display:flex;align-items:center;justify-content:space-between;padding:10px;background:#DC0044;position:relative;}\n .preview-header img{height:18px;object-fit:contain;width:auto;}\n .preview-header .header-right{display:flex;align-items:center;gap:15px;}\n .preview-body{text-align:center;padding:20px;background:#fff;}\n .steps-preview{display:flex;justify-content:center;gap:20px;margin-bottom:6px;}\n .steps-preview .circle{width:36px;height:36px;border-radius:50%;border:2px solid #ccc;color:#aaa;display:flex;align-items:center;justify-content:center;font-size:16px;}\n .steps-preview .circle.active{border-color:#000;color:#000;}\n .preview-title{font-size:17px;font-weight:700;color:#333;margin-top:12px;}\n\n \/* Configuration Popup en plein \u00e9cran *\/\n .popup-fullscreen {display: none;}\n .popup-fullscreen.active {display: block;}\n .popup-config-grid {display: flex; gap: 40px; margin: 30px 0;}\n .popup-config-left, .popup-config-right {flex: 1;}\n .popup-config-card {border: 1px solid #e5e5ea; border-radius: 12px; padding: 25px; margin-bottom: 25px;}\n .button-preview-container {display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 250px; border: 1px solid #e5e5ea; border-radius: 12px; padding: 40px; background: #fafafa;}\n .button-preview-title {margin-bottom: 25px; font-weight: 600; color: #6b6b75; font-size: 18px;}\n\n \/* WordPress Layout *\/\n .wordpress-steps {\n margin: 30px 0;\n }\n \n .wordpress-step {\n display: flex;\n align-items: flex-start;\n gap: 20px;\n margin-bottom: 25px;\n padding: 25px;\n border: 1px solid #e5e5ea;\n border-radius: 12px;\n background: #fff;\n width: 100%;\n }\n \n .wordpress-step:last-child {\n margin-bottom: 0;\n }\n \n .step-number {\n width: 40px;\n height: 40px;\n background: #252332;\n color: white;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n flex-shrink: 0;\n font-size: 18px;\n }\n \n .step-content {\n flex: 1;\n text-align: left;\n }\n \n .step-content h4 {\n margin: 0 0 10px 0;\n color: #252332;\n font-size: 18px;\n }\n \n .step-content p {\n margin: 0;\n color: #6b6b75;\n line-height: 1.6;\n }\n\n \/* Video Section *\/\n .video-section {\n background: #fff;\n border: 1px solid #e5e5ea;\n border-radius: 12px;\n padding: 30px;\n text-align: center;\n margin: 40px 0;\n }\n \n .video-header {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 15px;\n margin-bottom: 20px;\n }\n \n .youtube-icon {\n width: 50px;\n height: 50px;\n background: #ff0000;\n color: white;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n flex-shrink: 0;\n }\n \n .video-titles {\n text-align: left;\n }\n \n .video-title {\n font-size: 20px;\n font-weight: 600;\n color: #252332;\n margin: 0 0 5px 0;\n }\n \n .video-description {\n color: #6b6b75;\n margin: 0;\n line-height: 1.5;\n font-size: 16px;\n }\n \n .video-container {\n border-radius: 12px;\n overflow: hidden;\n margin-top: 20px;\n width: 100%;\n }\n \n .video-container iframe {\n width: 100%;\n height: 600px;\n border: none;\n }\n\n \/* Wix Instructions *\/\n .wix-instructions {\n margin: 30px 0;\n }\n \n .wix-instruction {\n display: flex;\n align-items: flex-start;\n gap: 20px;\n margin-bottom: 25px;\n padding: 20px;\n border: 1px solid #e5e5ea;\n border-radius: 12px;\n background: #fff;\n }\n \n .wix-instruction:last-child {\n margin-bottom: 0;\n }\n \n .instruction-number {\n width: 40px;\n height: 40px;\n background: #252332;\n color: white;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n flex-shrink: 0;\n }\n \n .instruction-content {\n flex: 1;\n text-align: left;\n }\n \n .instruction-content h4 {\n margin: 0 0 8px 0;\n color: #252332;\n font-size: 16px;\n }\n \n .instruction-content p {\n margin: 0;\n color: #6b6b75;\n line-height: 1.5;\n }\n\n \/* Code - Hauteur r\u00e9duite avec scroll *\/\n .code-block{position:relative;}\n pre{\n background:#f5f5f5;\n padding:15px;\n border-radius:8px;\n overflow-x: auto;\n max-height: 200px;\n overflow-y: auto;\n }\n\n \/* Boutons - Style unifi\u00e9 comme le bouton \"Nouvelle int\u00e9gration\" *\/\n .cta, .copy-btn, .popup-button {\n background: #252332;\n color: white;\n border: none;\n padding: 14px 28px;\n border-radius: 8px;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n text-decoration: none;\n }\n\n .cta:hover, .copy-btn:hover, .popup-button:hover {\n background: #000;\n transform: translateY(-2px);\n }\n\n .cta:disabled {\n background: #ccc;\n color: #999;\n cursor: not-allowed;\n transform: none;\n }\n\n .cta:disabled:hover {\n background: #ccc;\n transform: none;\n }\n\n .copy-btn {\n position: absolute;\n top: 10px;\n right: 10px;\n padding: 8px 16px;\n font-size: 14px;\n }\n\n .cta-container {\n display: flex;\n justify-content: center;\n margin-top: 30px;\n gap: 15px;\n }\n\n .btn-icon {\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n \/* Step 4 - Finalisation am\u00e9lior\u00e9e *\/\n .completion-section {\n text-align: center;\n padding: 40px 20px;\n }\n \n .completion-icon {\n width: 80px;\n height: 80px;\n background: #10b981;\n color: white;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 32px;\n margin: 0 auto 25px;\n }\n \n .completion-title {\n font-size: 28px;\n font-weight: 700;\n color: #252332;\n margin-bottom: 15px;\n }\n \n .completion-message {\n font-size: 18px;\n color: #6b6b75;\n line-height: 1.6;\n margin-bottom: 30px;\n }\n \n .new-integration-btn {\n background: #252332;\n color: white;\n border: none;\n padding: 14px 28px;\n border-radius: 8px;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n display: flex;\n align-items: center;\n gap: 10px;\n margin: 0 auto;\n }\n \n .new-integration-btn:hover {\n background: #000;\n transform: translateY(-2px);\n }\n \n \/* Navigation dans l'\u00e9tape 3 *\/\n .step3-nav {display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #e5e5ea;}\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .popup-config-grid{\n display:block;\n }\n .wordpress-layout {\n flex-direction: column;\n }\n \n .wordpress-steps, .wordpress-video {\n width: 100%;\n }\n \n .customize-grid {\n flex-direction: column;\n }\n \n .completion-title {\n flex-direction: column;\n }\n \n .completion-message {\n font-size: 16px;\n }\n\n .cta-container {\n flex-direction: column;\n align-items: center;\n }\n\n .customize-box, .preview-box {\n min-width: auto;\n width: 100%;\n }\n\n .video-container iframe {\n height: 300px;\n }\n\n .wordpress-step {\n padding: 20px;\n }\n \n \/* MODIFICATION: Mode d'int\u00e9gration responsive pour mobile *\/\n .modes {\n flex-direction: column;\n }\n \n .mode-item {\n width: 100%;\n }\n \n \/* CORRECTION: Masquer la tooltip desktop sur mobile *\/\n .tooltip-desktop {\n display: none;\n }\n \n \/* CORRECTION: Afficher la modale sur mobile au clic *\/\n .info-icon {\n cursor: pointer;\n }\n }\n\n \/* CORRECTION: Masquer la modale sur desktop *\/\n @media (min-width: 769px) {\n .tooltip-modal {\n display: none !important;\n }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"integration-assistant\">\n <h2>Assistant d'int\u00e9gration Barestho<\/h2>\n <p>Int\u00e9grez votre widget de r\u00e9servation en quelques \u00e9tapes simples<\/p>\n\n <!-- Stepper -->\n <div class=\"steps\">\n <div class=\"step active\" data-step=\"1\"><span class=\"number\">1<\/span><\/div>\n <div class=\"line\"><\/div>\n <div class=\"step\" data-step=\"2\"><span class=\"number\">2<\/span><\/div>\n <div class=\"line\"><\/div>\n <div class=\"step\" data-step=\"3\"><span class=\"number\">3<\/span><\/div>\n <div class=\"line\"><\/div>\n <div class=\"step\" data-step=\"4\"><span class=\"number\">4<\/span><\/div>\n <\/div>\n\n <!-- Steps -->\n <div class=\"card\" id=\"step-content\">\n\n <!-- \u00c9tape 1 -->\n <div class=\"step-block step-1 active\">\n <h3>D\u00e9marrer l'int\u00e9gration du module de r\u00e9servation Barestho<\/h3>\n <p>Suivez ces \u00e9tapes pour int\u00e9grer facilement le module sur votre site web<\/p>\n\n <div class=\"features\">\n <div class=\"feature\"><div class=\"icon\"><i class=\"fa-solid fa-calendar-days\"><\/i><\/div><h4>R\u00e9servations<\/h4><p>Vos clients r\u00e9servent directement sur votre site<\/p><\/div>\n <div class=\"feature\"><div class=\"icon\"><i class=\"fa-solid fa-code\"><\/i><\/div><h4>Int\u00e9gration<\/h4><p>Quelques lignes de code suffisent<\/p><\/div>\n <div class=\"feature\"><div class=\"icon\"><i class=\"fa-solid fa-gear\"><\/i><\/div><h4>Configuration<\/h4><p>Pr\u00eate en quelques minutes gr\u00e2ce \u00e0 notre assistant<\/p><\/div>\n <\/div>\n\n <div class=\"cta-container\">\n <button class=\"cta next-step\">Commencer<\/button>\n <\/div>\n <\/div>\n\n <!-- \u00c9tape 2 -->\n <div class=\"step-block step-2\">\n <h3>Sur quel type de site souhaitez-vous int\u00e9grer le module ?<\/h3>\n <p>Choisissez votre plateforme pour des instructions personnalis\u00e9es<\/p>\n\n <div class=\"features selectable\">\n <div class=\"feature option\" data-choice=\"code-manuel\">\n <div class=\"icon\"><i class=\"fa-solid fa-code\"><\/i><\/div>\n <h4>Code manuel<\/h4>\n <p>HTML\/CSS\/JavaScript pour projets sur mesure<\/p>\n <\/div>\n <div class=\"feature option\" data-choice=\"wordpress\">\n <div class=\"icon\"><i class=\"fa-brands fa-wordpress\"><\/i><\/div>\n <h4>WordPress<\/h4>\n <p>Extension Barestho pour un d\u00e9ploiement facile<\/p>\n <\/div>\n <div class=\"feature option\" data-choice=\"wix\">\n <div class=\"icon\"><i class=\"fa-brands fa-wix\"><\/i><\/div>\n <h4>Wix<\/h4>\n <p>Ajout du widget via l'\u00e9diteur Wix<\/p>\n <\/div>\n <\/div>\n\n <div class=\"cta-container\">\n <button class=\"cta prev-step\">Retour<\/button>\n <\/div>\n <\/div>\n\n <!-- \u00c9tape 3 - Dynamique selon la plateforme -->\n <div class=\"step-block step-3\">\n \n <!-- Code Manuel -->\n <div id=\"step3-code-manuel\" class=\"platform-content\">\n <div id=\"step3-main\">\n <h3>Int\u00e9gration sur un site avec code manuel<\/h3>\n <p>Configurez et copiez le code \u00e0 int\u00e9grer<\/p>\n\n <!-- Config -->\n <div class=\"config-card\">\n <h4>Configuration de base<\/h4>\n <div class=\"input-group\">\n <!-- CORRECTION: Label avec info-bulle - alignement corrig\u00e9 -->\n <div class=\"label-with-tooltip\">\n <label for=\"restaurantId\">ID du restaurant *<\/label>\n <div class=\"info-icon\" tabindex=\"0\" id=\"infoIconCode\">\n ?\n <!-- CORRECTION: Tooltip desktop pour le survol -->\n <div class=\"tooltip-desktop\">\n <div class=\"tooltip-title\">O\u00f9 trouver votre ID<\/div>\n <div class=\"tooltip-text\">Votre ID de restaurant se trouve dans votre URL de r\u00e9servation :<\/div>\n <div class=\"tooltip-example\">https:\/\/ <span class=\"tooltip-highlight\">masu<\/span> .reservation.barestho.com\/<\/div>\n <div class=\"tooltip-text\">Dans cet exemple, l'ID est <strong>masu<\/strong><\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"input-wrapper\">\n <i class=\"fa-solid fa-utensils\"><\/i>\n <input type=\"text\" id=\"restaurantId\" placeholder=\"Ex: mon-restaurant-123\">\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Modes -->\n <div class=\"modes-card\">\n <h4>Choisissez un mode d'int\u00e9gration<\/h4>\n <div class=\"modes\">\n <div class=\"mode-item active\" data-mode=\"toggle\">\n <img decoding=\"async\" src=\"https:\/\/pro.barestho.com\/wp-content\/uploads\/2025\/09\/toggle.webp\" alt=\"Mode Toggle\">\n <h5>Mode Toggle<\/h5>\n <p>Bouton flottant en bas \u00e0 droite qui ouvre le module de r\u00e9servation<\/p>\n <\/div>\n <div class=\"mode-item\" data-mode=\"popup\">\n <img decoding=\"async\" src=\"https:\/\/pro.barestho.com\/wp-content\/uploads\/2025\/09\/popup.webp\" alt=\"Mode Popup\">\n <h5>Mode Popup<\/h5>\n <p>Popup centr\u00e9 s'ouvrant depuis un bouton de votre choix<\/p>\n <\/div>\n <div class=\"mode-item\" data-mode=\"in-page\">\n <img decoding=\"async\" src=\"https:\/\/pro.barestho.com\/wp-content\/uploads\/2025\/09\/in-page.webp\" alt=\"Mode In-Page\">\n <h5>Mode iFrame<\/h5>\n <p>Module directement int\u00e9gr\u00e9 \u00e0 l'endroit souhait\u00e9 sur le site<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Personnalisation & Preview -->\n <div class=\"customize-grid\">\n \n <!-- Personnalisation -->\n <div class=\"customize-box\">\n <h4>Personnalisation visuelle<\/h4>\n\n <label>Couleur du widget<\/label>\n <div class=\"input-color-line\">\n <input type=\"color\" id=\"widgetColorPicker\" value=\"#DC0044\">\n <input type=\"text\" id=\"widgetColorHex\" value=\"#DC0044\">\n <\/div>\n\n <label style=\"margin-top:15px;display:block;\">Choisir le logo Barestho<\/label>\n <div class=\"logo-choices\">\n <div class=\"logo-option active\" data-logo=\"blue\" id=\"logoBlue\">\n <img decoding=\"async\" src=\"https:\/\/pro.barestho.com\/wp-content\/uploads\/2025\/10\/barestho-blue.png\" alt=\"logo bleu\">\n <\/div>\n <div class=\"logo-option\" data-logo=\"red\" id=\"logoRed\">\n <img decoding=\"async\" src=\"https:\/\/pro.barestho.com\/wp-content\/uploads\/2025\/10\/barestho-red.png\" alt=\"logo rouge\">\n <\/div>\n <div class=\"logo-option\" data-logo=\"alt_true\" id=\"logoAlt\">\n <img decoding=\"async\" src=\"https:\/\/pro.barestho.com\/wp-content\/uploads\/2025\/10\/barestho.png\" alt=\"logo violet alt\">\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Aper\u00e7u -->\n <div class=\"preview-box\">\n <h4>Aper\u00e7u du widget<\/h4>\n <div class=\"widget-preview\">\n <div class=\"preview-header\" id=\"previewHeader\">\n <img decoding=\"async\" id=\"previewLogo\" src=\"https:\/\/pro.barestho.com\/wp-content\/uploads\/2025\/10\/barestho-blue.png\" alt=\"barestho\">\n <div class=\"header-right\">\n <span class=\"lang\" id=\"previewLang\">FR \u25be<\/span>\n <span class=\"close\" id=\"previewClose\">\u2715<\/span>\n <\/div>\n <\/div>\n <div class=\"preview-body\">\n <div class=\"steps-preview\">\n <span class=\"circle active\"><i class=\"fa-solid fa-chair\"><\/i><\/span>\n <span class=\"circle\"><i class=\"fa-solid fa-utensils\"><\/i><\/span>\n <span class=\"circle\"><i class=\"fa-regular fa-user\"><\/i><\/span>\n <span class=\"circle\"><i class=\"fa-solid fa-hands-clapping\"><\/i><\/span>\n <\/div>\n <h5 class=\"preview-title\">Les convives<\/h5>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Codes -->\n<div class=\"code-block\">\n <h4>1. Code \u00e0 ajouter dans la balise <head> de votre site<\/h4>\n <pre><code id=\"headCode\">\n<link href=\"https:\/\/cdn.jsdelivr.net\/gh\/barestho\/barestho-widget-integration@latest\/style-barestho.css\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdn.jsdelivr.net\/gh\/barestho\/barestho-widget-integration@latest\/script-barestho.js\" defer><\/script>\n <\/code><\/pre>\n <button class=\"copy-btn\" data-target=\"headCode\">\n <i class=\"fa-regular fa-copy\"><\/i> Copier\n <\/button>\n<\/div>\n\n <div class=\"code-block\">\n <h4>2. Code \u00e0 ins\u00e9rer dans le <body> de votre site<\/h4>\n <pre><code id=\"bodyCode\"><\/code><\/pre>\n <button class=\"copy-btn\" data-target=\"bodyCode\"><i class=\"fa-regular fa-copy\"><\/i> Copier<\/button>\n <\/div>\n\n <div class=\"cta-container\">\n <button class=\"cta prev-step\">Retour<\/button>\n <button class=\"cta next-step\" id=\"step3Continue\" disabled>Continuer<\/button>\n <\/div>\n <\/div>\n\n <!-- Configuration Popup en plein \u00e9cran -->\n <div id=\"step3-popup\" class=\"popup-fullscreen\">\n <h3>Configuration du bouton popup<\/h3>\n <p style=\"text-align: center; color: #6b6b75; margin-bottom: 30px;\">Personnalisez le bouton qui ouvrira le widget de r\u00e9servation en popup<\/p>\n\n <div class=\"popup-config-grid\">\n <!-- Configuration -->\n <div class=\"popup-config-left\">\n <div class=\"popup-config-card\">\n <h4>Texte du bouton<\/h4>\n <div class=\"input-group\">\n <div class=\"input-wrapper\">\n <i class=\"fa-solid fa-font\"><\/i>\n <input type=\"text\" id=\"buttonText\" value=\"R\u00e9server une table\" placeholder=\"Texte du bouton\">\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"popup-config-card\">\n <h4>Couleur du bouton<\/h4>\n <div class=\"input-color-line\">\n <input type=\"color\" id=\"buttonColorPicker\" value=\"#DC0044\">\n <input type=\"text\" id=\"buttonColorHex\" value=\"#DC0044\">\n <\/div>\n <\/div>\n\n <div class=\"popup-config-card\">\n <h4>Placement recommand\u00e9<\/h4>\n <p style=\"color: #6b6b75; line-height: 1.5;\">\n Ajoutez ce bouton pr\u00e8s de votre titre principal, dans le header, ou dans une zone visible de votre page d'accueil. Le popup s'ouvrira au clic.\n <\/p>\n <\/div>\n <\/div>\n\n <!-- Aper\u00e7u -->\n <div class=\"popup-config-right\">\n <div class=\"button-preview-container\">\n <div class=\"button-preview-title\">Aper\u00e7u du bouton<\/div>\n <button id=\"previewButton\" class=\"cta\">R\u00e9server une table<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Code du bouton -->\n <div class=\"code-block\">\n <h4>Code du bouton \u00e0 int\u00e9grer<\/h4>\n <p style=\"color: #6b6b75; margin-bottom: 15px;\">Ce bouton inclut tout le styling n\u00e9cessaire et peut \u00eatre plac\u00e9 directement dans votre HTML.<\/p>\n <pre><code id=\"buttonCode\"><\/code><\/pre>\n <button class=\"copy-btn\" data-target=\"buttonCode\"><i class=\"fa-regular fa-copy\"><\/i> Copier<\/button>\n <\/div>\n\n <div class=\"cta-container\">\n <button class=\"cta\" id=\"backToMainConfig\">Retour \u00e0 la configuration<\/button>\n <button class=\"cta next-step\">Continuer<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- WordPress -->\n <div id=\"step3-wordpress\" class=\"platform-content\" style=\"display: none;\">\n <h3>Int\u00e9gration sur WordPress<\/h3>\n <p>Suivez ces \u00e9tapes simples pour installer le module Barestho sur votre site WordPress<\/p>\n\n <!-- \u00c9tapes WordPress -->\n <div class=\"wordpress-steps\">\n <div class=\"wordpress-step\">\n <div class=\"step-number\">1<\/div>\n <div class=\"step-content\">\n <h4>Installer l'extension<\/h4>\n <p>Connectez-vous au panel admin WordPress, allez dans <strong>Extensions > Ajouter une extension<\/strong>, puis recherchez et ajoutez 'Barestho'<\/p>\n <\/div>\n <\/div>\n\n <div class=\"wordpress-step\">\n <div class=\"step-number\">2<\/div>\n <div class=\"step-content\">\n <h4>Activer l'extension<\/h4>\n <p>Cliquez sur <strong>'Activer'<\/strong> une fois l'extension install\u00e9e<\/p>\n <\/div>\n <\/div>\n\n <div class=\"wordpress-step\">\n <div class=\"step-number\">3<\/div>\n <div class=\"step-content\">\n <h4>Configurer<\/h4>\n <p>Allez dans <strong>R\u00e9glages > Barestho<\/strong> et saisissez votre ID de restaurant<\/p>\n <\/div>\n <\/div>\n\n <div class=\"wordpress-step\">\n <div class=\"step-number\">4<\/div>\n <div class=\"step-content\">\n <h4>Vid\u00e9o tutorielle<\/h4>\n <p>Regardez notre guide vid\u00e9o pour une installation pas \u00e0 pas et des astuces de configuration<\/p>\n <\/div>\n <\/div>\n <iframe \n src=\"https:\/\/www.youtube.com\/embed\/ITknOS3g7Eg\" \n title=\"Tutoriel d'installation Barestho sur WordPress\" \n width=\"100%\" \n height=\"500\" \n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" \n allowfullscreen>\n <\/iframe>\n <\/div>\n\n <div class=\"cta-container\">\n <button class=\"cta prev-step\">Retour<\/button>\n <button class=\"cta next-step\">Continuer<\/button>\n <\/div>\n <\/div>\n\n <!-- Wix -->\n <div id=\"step3-wix\" class=\"platform-content\" style=\"display: none;\">\n <h3>Int\u00e9gration sur Wix<\/h3>\n <p>Configurez le widget et suivez les instructions pour l'ajouter \u00e0 votre site Wix<\/p>\n\n <!-- Configuration de base -->\n <div class=\"config-card\">\n <h4>Configuration de base<\/h4>\n <div class=\"input-group\">\n <!-- CORRECTION: Label avec info-bulle pour Wix - alignement corrig\u00e9 -->\n <div class=\"label-with-tooltip\">\n <label for=\"wixRestaurantId\">ID du restaurant *<\/label>\n <div class=\"info-icon\" tabindex=\"0\" id=\"infoIconWix\">\n ?\n <!-- CORRECTION: Tooltip desktop pour le survol -->\n <div class=\"tooltip-desktop\">\n <div class=\"tooltip-title\">O\u00f9 trouver votre ID de restaurant<\/div>\n <div class=\"tooltip-text\">Votre ID de restaurant se trouve dans votre URL de r\u00e9servation :<\/div>\n <div class=\"tooltip-example\">https:\/\/ <span class=\"tooltip-highlight\">masu<\/span> .reservation.barestho.com\/<\/div>\n <div class=\"tooltip-text\">Dans cet exemple, l'ID est <strong>masu<\/strong><\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"input-wrapper\">\n <i class=\"fa-solid fa-utensils\"><\/i>\n <input type=\"text\" id=\"wixRestaurantId\" placeholder=\"Ex: mon-restaurant-123\">\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Personnalisation & Preview -->\n <div class=\"customize-grid\">\n \n <!-- Personnalisation -->\n <div class=\"customize-box\">\n <h4>Personnalisation visuelle<\/h4>\n\n <label>Couleur du widget<\/label>\n <div class=\"input-color-line\">\n <input type=\"color\" id=\"wixWidgetColorPicker\" value=\"#DC0044\">\n <input type=\"text\" id=\"wixWidgetColorHex\" value=\"#DC0044\">\n <\/div>\n\n <label style=\"margin-top:15px;display:block;\">Choisir le logo Barestho<\/label>\n <div class=\"logo-choices\">\n <div class=\"logo-option active\" data-logo=\"blue\" id=\"wixLogoBlue\">\n <img decoding=\"async\" src=\"https:\/\/pro.barestho.com\/wp-content\/uploads\/2025\/10\/barestho-blue.png\" alt=\"logo bleu\">\n <\/div>\n <div class=\"logo-option\" data-logo=\"red\" id=\"wixLogoRed\">\n <img decoding=\"async\" src=\"https:\/\/pro.barestho.com\/wp-content\/uploads\/2025\/10\/barestho-red.png\" alt=\"logo rouge\">\n <\/div>\n <div class=\"logo-option\" data-logo=\"alt_true\" id=\"wixLogoAlt\">\n <img decoding=\"async\" src=\"https:\/\/pro.barestho.com\/wp-content\/uploads\/2025\/10\/barestho.png\" alt=\"logo violet alt\">\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Aper\u00e7u -->\n <div class=\"preview-box\">\n <h4>Aper\u00e7u du widget<\/h4>\n <div class=\"widget-preview\">\n <div class=\"preview-header\" id=\"wixPreviewHeader\">\n <img decoding=\"async\" id=\"wixPreviewLogo\" src=\"https:\/\/pro.barestho.com\/wp-content\/uploads\/2025\/10\/barestho-blue.png\" alt=\"barestho\">\n <div class=\"header-right\">\n <span class=\"lang\" id=\"wixPreviewLang\">FR \u25be<\/span>\n <span class=\"close\" id=\"wixPreviewClose\">\u2715<\/span>\n <\/div>\n <\/div>\n <div class=\"preview-body\">\n <div class=\"steps-preview\">\n <span class=\"circle active\"><i class=\"fa-solid fa-chair\"><\/i><\/span>\n <span class=\"circle\"><i class=\"fa-solid fa-utensils\"><\/i><\/span>\n <span class=\"circle\"><i class=\"fa-regular fa-user\"><\/i><\/span>\n <span class=\"circle\"><i class=\"fa-solid fa-hands-clapping\"><\/i><\/span>\n <\/div>\n <h5 class=\"preview-title\">Les convives<\/h5>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Instructions Wix -->\n <div class=\"wix-instructions\">\n <h4>Instructions pour Wix :<\/h4>\n \n <div class=\"wix-instruction\">\n <div class=\"instruction-number\">1<\/div>\n <div class=\"instruction-content\">\n <h4>Cliquez sur le bouton \"+\"<\/h4>\n <p>Dans l'\u00e9diteur, cliquez sur le bouton \"+\"<\/p>\n <\/div>\n <\/div>\n\n <div class=\"wix-instruction\">\n <div class=\"instruction-number\">2<\/div>\n <div class=\"instruction-content\">\n <h4>Choisissez Code d'int\u00e9gration<\/h4>\n <p>Choisissez Code d'int\u00e9gration > HTML int\u00e9gr\u00e9<\/p>\n <\/div>\n <\/div>\n\n <div class=\"wix-instruction\">\n <div class=\"instruction-number\">3<\/div>\n <div class=\"instruction-content\">\n <h4>Collez le code suivant<\/h4>\n <p>Collez le code suivant dans la fen\u00eatre qui s'affiche<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Code Wix avec hauteur r\u00e9duite -->\n <div class=\"code-block\">\n <h4>Code \u00e0 int\u00e9grer sur Wix<\/h4>\n <pre><code id=\"wixCode\"><\/code><\/pre>\n <button class=\"copy-btn\" data-target=\"wixCode\"><i class=\"fa-regular fa-copy\"><\/i> Copier<\/button>\n <\/div>\n\n <div class=\"cta-container\">\n <button class=\"cta prev-step\">Retour<\/button>\n <button class=\"cta next-step\" id=\"wixStep3Continue\" disabled>Continuer<\/button>\n <\/div>\n <\/div>\n\n <\/div>\n\n <!-- \u00c9tape 4 - Finalisation am\u00e9lior\u00e9e -->\n <div class=\"step-block step-4\">\n <div class=\"completion-section\">\n <div class=\"completion-icon\">\n <i class=\"fa-solid fa-check\"><\/i>\n <\/div>\n <h2 class=\"completion-title\">F\u00e9licitations !<\/h2>\n <p class=\"completion-message\">L'int\u00e9gration est termin\u00e9e avec succ\u00e8s.<br>Votre module Barestho est maintenant pr\u00eat \u00e0 \u00eatre utilis\u00e9 sur votre site \ud83c\udf89<\/p>\n <button class=\"new-integration-btn\" id=\"newIntegration\">\n <div class=\"btn-icon\">\n <i class=\"fa-solid fa-arrow-rotate-right\"><\/i>\n <\/div>\n Nouvelle int\u00e9gration\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<!-- CORRECTION: Modale pour l'info-bulle mobile seulement -->\n<div class=\"tooltip-modal\" id=\"tooltipModal\">\n <div class=\"tooltip-content\">\n <button class=\"tooltip-close\" id=\"tooltipClose\">\u2715<\/button>\n <div class=\"tooltip-title\">O\u00f9 trouver votre ID de restaurant<\/div>\n <div class=\"tooltip-text\">Votre ID de restaurant se trouve dans votre URL de r\u00e9servation :<\/div>\n <div class=\"tooltip-example\">https:\/\/ <span class=\"tooltip-highlight\">masu<\/span> .reservation.barestho.com\/<\/div>\n <div class=\"tooltip-text\">Dans cet exemple, l'ID est <strong>masu<\/strong><\/div>\n <\/div>\n<\/div>\n\n<script>\nlet currentStep = 1;\nlet integrationMode = { value: \"toggle\" }; \/\/ Mode Toggle actif par d\u00e9faut\nlet selectedPlatform = null;\n\n\/\/ CORRECTION: Scroll vers le haut uniquement sur mobile\nfunction scrollToTop() {\n window.scrollTo({\n top: 0,\n behavior: 'smooth'\n });\n}\n\nfunction updateSteps(step) {\n document.querySelectorAll('.step').forEach(st => {\n const num = parseInt(st.dataset.step);\n st.classList.remove('active', 'completed');\n if (num < step) st.classList.add('completed');\n else if (num === step) st.classList.add('active');\n });\n \n document.querySelectorAll('.step-block').forEach(bl => bl.classList.remove('active'));\n document.querySelector('.step-' + step).classList.add('active');\n \n \/\/ Scroll vers le haut apr\u00e8s le changement d'\u00e9tape (uniquement sur mobile)\n setTimeout(scrollToTop, 100);\n}\n\n\/\/ CORRECTION: Gestion de la modale d'info-bulle (mobile seulement)\nconst tooltipModal = document.getElementById('tooltipModal');\nconst tooltipClose = document.getElementById('tooltipClose');\nconst infoIconCode = document.getElementById('infoIconCode');\nconst infoIconWix = document.getElementById('infoIconWix');\n\nfunction openTooltip() {\n \/\/ CORRECTION: Ouvrir la modale seulement sur mobile\n if (window.innerWidth <= 768) {\n tooltipModal.classList.add('active');\n document.body.style.overflow = 'hidden'; \/\/ Emp\u00eache le scroll en arri\u00e8re-plan\n }\n \/\/ Sur desktop, la tooltip s'affiche automatiquement au survol\n}\n\nfunction closeTooltip() {\n tooltipModal.classList.remove('active');\n document.body.style.overflow = ''; \/\/ R\u00e9tablit le scroll\n}\n\n\/\/ \u00c9v\u00e9nements pour ouvrir la modale (mobile seulement)\ninfoIconCode.addEventListener('click', openTooltip);\ninfoIconWix.addEventListener('click', openTooltip);\n\n\/\/ \u00c9v\u00e9nements pour fermer la modale\ntooltipClose.addEventListener('click', closeTooltip);\n\n\/\/ Fermer la modale en cliquant \u00e0 l'ext\u00e9rieur\ntooltipModal.addEventListener('click', function(e) {\n if (e.target === tooltipModal) {\n closeTooltip();\n }\n});\n\n\/\/ Fermer la modale avec la touche \u00c9chap\ndocument.addEventListener('keydown', function(e) {\n if (e.key === 'Escape' && tooltipModal.classList.contains('active')) {\n closeTooltip();\n }\n});\n\n\/\/ Navigation entre les \u00e9tapes\ndocument.querySelectorAll('.next-step').forEach(btn => {\n btn.addEventListener(\"click\", () => {\n if (currentStep === 3) {\n \/\/ Si on est \u00e0 l'\u00e9tape 3 et qu'on clique sur continuer\n if (selectedPlatform === \"code-manuel\" && integrationMode.value === \"popup\" && !document.getElementById('step3-popup').classList.contains('active')) {\n \/\/ Mode popup - on affiche la configuration du bouton en plein \u00e9cran\n showPopupConfig();\n scrollToTop();\n return; \/\/ On ne change pas d'\u00e9tape\n }\n }\n \n if (currentStep < 4) {\n currentStep++;\n updateSteps(currentStep);\n }\n });\n});\n\ndocument.querySelectorAll('.prev-step').forEach(btn => {\n btn.addEventListener(\"click\", () => {\n if (currentStep > 1) {\n currentStep--;\n updateSteps(currentStep);\n }\n });\n});\n\n\/\/ S\u00e9lection du type de site (\u00e9tape 2)\ndocument.querySelectorAll('.feature.option').forEach(opt => {\n opt.addEventListener(\"click\", () => {\n document.querySelectorAll('.feature.option').forEach(o => o.classList.remove('selected'));\n opt.classList.add('selected');\n selectedPlatform = opt.dataset.choice;\n \n \/\/ Passage direct \u00e0 l'\u00e9tape 3 apr\u00e8s s\u00e9lection avec le bon contenu\n currentStep = 3;\n updateSteps(3);\n showPlatformContent(selectedPlatform);\n scrollToTop();\n });\n});\n\n\/\/ Nouvelle int\u00e9gration\ndocument.getElementById('newIntegration').addEventListener('click', () => {\n currentStep = 1;\n selectedPlatform = null;\n updateSteps(currentStep);\n \n \/\/ R\u00e9initialiser les s\u00e9lections\n document.querySelectorAll('.feature.option').forEach(o => o.classList.remove('selected'));\n document.querySelectorAll('.platform-content').forEach(content => {\n content.style.display = 'none';\n });\n \n scrollToTop();\n});\n\n\/\/ Afficher le contenu de la plateforme s\u00e9lectionn\u00e9e\nfunction showPlatformContent(platform) {\n \/\/ Masquer tous les contenus de plateforme\n document.querySelectorAll('.platform-content').forEach(content => {\n content.style.display = 'none';\n });\n \n \/\/ R\u00e9initialiser la vue popup si on revient au code manuel\n if (platform === \"code-manuel\") {\n showMainConfig();\n }\n \n \/\/ Afficher le contenu de la plateforme s\u00e9lectionn\u00e9e\n document.getElementById(`step3-${platform}`).style.display = 'block';\n}\n\n\/\/ Configuration pour Code Manuel\nconst restaurantInput = document.getElementById(\"restaurantId\");\nconst widgetColorPicker = document.getElementById(\"widgetColorPicker\");\nconst widgetColorHex = document.getElementById(\"widgetColorHex\");\nconst previewHeader = document.getElementById(\"previewHeader\");\nconst previewLogo = document.getElementById(\"previewLogo\");\nconst previewLang = document.getElementById(\"previewLang\");\nconst previewClose = document.getElementById(\"previewClose\");\nconst bodyCode = document.getElementById(\"bodyCode\");\nconst modeItems = document.querySelectorAll(\"#step3-code-manuel .mode-item\");\nconst logoOptions = document.querySelectorAll(\"#step3-code-manuel .logo-option\");\nconst logoBlue = document.getElementById(\"logoBlue\");\nconst logoRed = document.getElementById(\"logoRed\");\nconst logoAlt = document.getElementById(\"logoAlt\");\nconst step3Continue = document.getElementById(\"step3Continue\");\n\n\/\/ Configuration pour Wix\nconst wixRestaurantInput = document.getElementById(\"wixRestaurantId\");\nconst wixWidgetColorPicker = document.getElementById(\"wixWidgetColorPicker\");\nconst wixWidgetColorHex = document.getElementById(\"wixWidgetColorHex\");\nconst wixPreviewHeader = document.getElementById(\"wixPreviewHeader\");\nconst wixPreviewLogo = document.getElementById(\"wixPreviewLogo\");\nconst wixPreviewLang = document.getElementById(\"wixPreviewLang\");\nconst wixPreviewClose = document.getElementById(\"wixPreviewClose\");\nconst wixCode = document.getElementById(\"wixCode\");\nconst wixLogoOptions = document.querySelectorAll(\"#step3-wix .logo-option\");\nconst wixLogoBlue = document.getElementById(\"wixLogoBlue\");\nconst wixLogoRed = document.getElementById(\"wixLogoRed\");\nconst wixLogoAlt = document.getElementById(\"wixLogoAlt\");\nconst wixStep3Continue = document.getElementById(\"wixStep3Continue\");\n\n\/\/ Configuration de l'\u00e9tape 3 - Popup int\u00e9gr\u00e9\nconst buttonText = document.getElementById(\"buttonText\");\nconst buttonColorPicker = document.getElementById(\"buttonColorPicker\");\nconst buttonColorHex = document.getElementById(\"buttonColorHex\");\nconst previewButton = document.getElementById(\"previewButton\");\nconst buttonCode = document.getElementById(\"buttonCode\");\nconst backToMainConfig = document.getElementById(\"backToMainConfig\");\n\n\/\/ Fonction pour afficher la configuration popup en plein \u00e9cran\nfunction showPopupConfig() {\n document.getElementById('step3-main').style.display = 'none';\n document.getElementById('step3-popup').classList.add('active');\n scrollToTop();\n}\n\n\/\/ Fonction pour revenir \u00e0 la configuration principale\nfunction showMainConfig() {\n document.getElementById('step3-popup').classList.remove('active');\n document.getElementById('step3-main').style.display = 'block';\n scrollToTop();\n}\n\n\/\/ Validation de l'ID du restaurant pour Code Manuel\nfunction validateRestaurantId() {\n const id = restaurantInput.value.trim();\n const isValid = id.length > 0;\n \n step3Continue.disabled = !isValid;\n \n if (isValid) {\n restaurantInput.style.borderColor = '#ccc';\n } else {\n restaurantInput.style.borderColor = '#ff4444';\n }\n \n return isValid;\n}\n\n\/\/ Validation de l'ID du restaurant pour Wix\nfunction validateWixRestaurantId() {\n const id = wixRestaurantInput.value.trim();\n const isValid = id.length > 0;\n \n wixStep3Continue.disabled = !isValid;\n \n if (isValid) {\n wixRestaurantInput.style.borderColor = '#ccc';\n } else {\n wixRestaurantInput.style.borderColor = '#ff4444';\n }\n \n return isValid;\n}\n\n\/\/ Initialisation des inputs d'ID avec placeholder\nrestaurantInput.placeholder = \"Ex: mon-restaurant-123\";\nrestaurantInput.addEventListener('focus', function() {\n this.style.background = '#fff';\n});\n\n\/\/ CORRECTION: Ajouter l'\u00e9couteur pour mettre \u00e0 jour le bouton popup quand l'ID change\nrestaurantInput.addEventListener('input', function() {\n validateRestaurantId();\n updateCode();\n updatePopupButton(); \/\/ CORRECTION: Mettre \u00e0 jour le bouton popup aussi\n});\n\nwixRestaurantInput.placeholder = \"Ex: mon-restaurant-123\";\nwixRestaurantInput.addEventListener('focus', function() {\n this.style.background = '#fff';\n});\n\nwixRestaurantInput.addEventListener('input', function() {\n validateWixRestaurantId();\n updateWixCode();\n});\n\n\/\/ Synchronisation du color picker et du champ texte pour Code Manuel\nwidgetColorPicker.addEventListener(\"input\", () => {\n widgetColorHex.value = widgetColorPicker.value;\n updateCode();\n});\n\nwidgetColorHex.addEventListener(\"input\", () => {\n widgetColorPicker.value = widgetColorHex.value;\n updateCode();\n});\n\n\/\/ Synchronisation du color picker et du champ texte pour Wix\nwixWidgetColorPicker.addEventListener(\"input\", () => {\n wixWidgetColorHex.value = wixWidgetColorPicker.value;\n updateWixCode();\n});\n\nwixWidgetColorHex.addEventListener(\"input\", () => {\n wixWidgetColorPicker.value = wixWidgetColorHex.value;\n updateWixCode();\n});\n\n\/\/ Synchronisation du color picker et du champ texte (popup)\nbuttonColorPicker.addEventListener(\"input\", () => {\n buttonColorHex.value = buttonColorPicker.value;\n updatePopupButton();\n});\n\nbuttonColorHex.addEventListener(\"input\", () => {\n buttonColorPicker.value = buttonColorHex.value;\n updatePopupButton();\n});\n\n\/\/ CORRECTION: Mise \u00e0 jour du texte du bouton\nbuttonText.addEventListener(\"input\", updatePopupButton);\n\n\/\/ Retour \u00e0 la configuration principale\nbackToMainConfig.addEventListener(\"click\", showMainConfig);\n\n\/\/ Mise \u00e0 jour du code en fonction des s\u00e9lections (Code Manuel)\nfunction updateCode() {\n const id = restaurantInput.value.trim() || \"mon-restaurant-123\";\n const color = widgetColorHex.value;\n \n let selectedLogo = \"blue\";\n document.querySelectorAll(\"#step3-code-manuel .logo-option\").forEach(opt => {\n if (opt.classList.contains(\"active\")) selectedLogo = opt.dataset.logo;\n });\n \n let logoSrc = \"\", logoParam = \"\", alternate = \"\", textColor = \"\";\n \n \/\/ Configuration des param\u00e8tres selon le logo choisi\n if (selectedLogo === \"blue\") {\n logoSrc = \"https:\/\/pro.barestho.com\/wp-content\/uploads\/2025\/10\/barestho-blue.png\";\n logoParam = \"%23252332\";\n alternate = \"false\";\n textColor = \"%23FFFFFF\";\n }\n if (selectedLogo === \"red\") {\n logoSrc = \"https:\/\/pro.barestho.com\/wp-content\/uploads\/2025\/10\/barestho-red.png\";\n logoParam = \"%23DC0044\";\n alternate = \"false\";\n textColor = \"%23FFFFFF\";\n }\n if (selectedLogo === \"alt_true\") {\n logoSrc = \"https:\/\/pro.barestho.com\/wp-content\/uploads\/2025\/10\/barestho.png\";\n logoParam = \"%23DC0044\";\n alternate = \"true\";\n textColor = \"%23252332\";\n }\n \n \/\/ Mise \u00e0 jour de l'aper\u00e7u\n previewHeader.style.background = color;\n previewLogo.src = logoSrc;\n \n \/\/ Mise \u00e0 jour des fonds des options de logo avec la couleur primaire\n logoBlue.style.background = color;\n logoRed.style.background = color;\n logoAlt.style.background = color;\n \n \/\/ Ajuster la couleur du texte dans l'aper\u00e7u selon le logo choisi\n if (selectedLogo === \"alt_true\") {\n previewLang.style.color = '#252332';\n previewClose.style.color = '#252332';\n } else {\n previewLang.style.color = '#FFFFFF';\n previewClose.style.color = '#FFFFFF';\n }\n \n \/\/ Mise \u00e0 jour du code body avec commentaire dynamique\n let comment = \"\";\n if (integrationMode.value === \"toggle\") {\n comment = \"<!-- Mode Toggle - Ajoutez ce code dans le <body> -->\\n\";\n } else if (integrationMode.value === \"popup\") {\n comment = \"<!-- Mode Popup - Ajoutez ce code dans le <body> -->\\n\";\n } else if (integrationMode.value === \"in-page\") {\n comment = \"<!-- Mode In-Page - Ajoutez ce code \u00e0 l'emplacement souhait\u00e9 -->\\n\";\n }\n \n \/\/ MODIFICATION: Ajout du param\u00e8tre secondary-color avec la m\u00eame couleur que primary-color\n const iframeCode = `<iframe id=\"${id}\" class=\"barestho-widget\"\nsrc=\"https:\/\/${id}.reservation.barestho.com\/?view=${integrationMode.value}&primary-color=${color.replace(\"#\", \"%23\")}&secondary-color=${color.replace(\"#\", \"%23\")}&text-color=${textColor}&barestho-logo=${logoParam}&barestho-alternate=${alternate}\"><\/iframe>`;\n \n bodyCode.textContent = comment + iframeCode;\n}\n\n\/\/ Mise \u00e0 jour du code Wix en fonction des s\u00e9lections\nfunction updateWixCode() {\n const id = wixRestaurantInput.value.trim() || \"mon-restaurant-123\";\n const color = wixWidgetColorHex.value;\n \n let selectedLogo = \"blue\";\n document.querySelectorAll(\"#step3-wix .logo-option\").forEach(opt => {\n if (opt.classList.contains(\"active\")) selectedLogo = opt.dataset.logo;\n });\n \n let logoSrc = \"\", logoParam = \"\", alternate = \"\", textColor = \"\";\n \n \/\/ Configuration des param\u00e8tres selon le logo choisi\n if (selectedLogo === \"blue\") {\n logoSrc = \"https:\/\/pro.barestho.com\/wp-content\/uploads\/2025\/10\/barestho-blue.png\";\n logoParam = \"%23252332\";\n alternate = \"false\";\n textColor = \"%23FFFFFF\";\n }\n if (selectedLogo === \"red\") {\n logoSrc = \"https:\/\/pro.barestho.com\/wp-content\/uploads\/2025\/10\/barestho-red.png\";\n logoParam = \"%23DC0044\";\n alternate = \"false\";\n textColor = \"%23FFFFFF\";\n }\n if (selectedLogo === \"alt_true\") {\n logoSrc = \"https:\/\/pro.barestho.com\/wp-content\/uploads\/2025\/10\/barestho.png\";\n logoParam = \"%23DC0044\";\n alternate = \"true\";\n textColor = \"%23252332\";\n }\n \n \/\/ Mise \u00e0 jour de l'aper\u00e7u\n wixPreviewHeader.style.background = color;\n wixPreviewLogo.src = logoSrc;\n \n \/\/ Mise \u00e0 jour des fonds des options de logo avec la couleur primaire\n wixLogoBlue.style.background = color;\n wixLogoRed.style.background = color;\n wixLogoAlt.style.background = color;\n \n \/\/ Ajuster la couleur du texte dans l'aper\u00e7u selon le logo choisi\n if (selectedLogo === \"alt_true\") {\n wixPreviewLang.style.color = '#252332';\n wixPreviewClose.style.color = '#252332';\n } else {\n wixPreviewLang.style.color = '#FFFFFF';\n wixPreviewClose.style.color = '#FFFFFF';\n }\n \n \/\/ G\u00e9n\u00e9ration du code Wix\n const wixCodeText = `<div>\n <style>\n .barestho-widget.in-page {\n border: none;\n box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;\n height: 600px;\n max-width: 370px;\n width: 100%;\n border-radius: 20px;\n background-color: white;\n }\n\n .barestho-widget.popup {\n display: none;\n }\n\n .barestho-widget.popup.open {\n width: 370px;\n height: 700px;\n border-radius: 20px;\n background-color: white;\n border: none;\n font-family: 'Poppins', 'Ubuntu', 'sans-serif';\n max-height: 95%;\n position: fixed;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n display: block;\n z-index: 9999;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: end;\n }\n\n #barestho-popup-background{\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background-color: #000000db;\n z-index: 9998;\n }\n\n .barestho-widget.toggle{\n font-family: 'Poppins', 'Ubuntu', 'sans-serif';\n border-radius: 20px;\n position: fixed;\n bottom: 15px;\n right: 15px;\n border: none;\n width: 370px;\n z-index: 9997;\n transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .barestho-widget.toggle.open {\n height: 100% !important;\n }\n\n \/* Responsive *\/\n @media (min-width: 450px) {\n .barestho-widget.toggle {\n max-height: 90%;\n }\n }\n\n @media (max-width: 450px) {\n .barestho-widget.in-page {\n height: 645px !important;\n }\n .barestho-widget.popup.open {\n width: 100%;\n height: 100%;\n border-radius: 0px;\n box-shadow: none;\n right: 0;\n bottom: 0;\n overflow: auto;\n position: fixed;\n }\n .barestho-widget.toggle {\n width: 100%;\n box-shadow: none;\n right: 0;\n bottom: 0;\n border-radius: 0px;\n overflow: auto;\n position: fixed;\n z-index: 9997;\n }\n }\n <\/style>\n\n <iframe\n id=\"${id}\"\n class=\"barestho-widget in-page\"\n src=\"https:\/\/${id}.reservation.barestho.com\/?view=in-page&primary-color=${color.replace(\"#\", \"%23\")}&secondary-color=${color.replace(\"#\", \"%23\")}&barestho-logo=${logoParam}&barestho-alternate=${alternate}&text-color=${textColor}\">\n <\/iframe>\n<\/div>`;\n \n wixCode.textContent = wixCodeText;\n}\n\n\/\/ CORRECTION: Mise \u00e0 jour du bouton popup avec ID dynamique\nfunction updatePopupButton() {\n const text = buttonText.value || \"R\u00e9server une table\";\n const color = buttonColorHex.value;\n \n \/\/ CORRECTION: R\u00e9cup\u00e9rer l'ID dynamique du restaurant\n const restaurantId = restaurantInput.value.trim() || \"mon-restaurant-123\";\n \n \/\/ Mise \u00e0 jour de l'aper\u00e7u\n previewButton.textContent = text;\n previewButton.style.backgroundColor = color;\n \n \/\/ Calcul de la couleur plus fonc\u00e9e pour l'effet hover\n const hoverColor = darkenColor(color, 20);\n \n \/\/ CORRECTION: Utilisation de l'ID dynamique\n const buttonCodeText = `<button \n onclick=\"barestho.openPopup('${restaurantId}')\"\n style=\"background-color: ${color}; color: white; padding: 12px 24px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; transition: all 0.3s ease; font-weight: 600;\"\n onmouseover=\"this.style.backgroundColor='${hoverColor}'; this.style.transform='translateY(-2px)'\"\n onmouseout=\"this.style.backgroundColor='${color}'; this.style.transform='translateY(0)'\"\n>\n ${text}\n<\/button>`;\n \n buttonCode.textContent = buttonCodeText;\n}\n\n\/\/ Fonction pour assombrir une couleur\nfunction darkenColor(color, percent) {\n const num = parseInt(color.replace(\"#\", \"\"), 16);\n const amt = Math.round(2.55 * percent);\n const R = (num >> 16) - amt;\n const G = (num >> 8 & 0x00FF) - amt;\n const B = (num & 0x0000FF) - amt;\n \n return \"#\" + (\n 0x1000000 +\n (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +\n (G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +\n (B < 255 ? (B < 1 ? 0 : B) : 255)\n ).toString(16).slice(1);\n}\n\n\/\/ Gestion des modes d'int\u00e9gration pour Code Manuel\nmodeItems.forEach(item => {\n item.addEventListener(\"click\", () => {\n modeItems.forEach(m => m.classList.remove(\"active\"));\n item.classList.add(\"active\");\n integrationMode.value = item.dataset.mode;\n updateCode();\n });\n});\n\n\/\/ Gestion des logos pour Code Manuel\nlogoOptions.forEach(opt => {\n opt.addEventListener(\"click\", () => {\n logoOptions.forEach(o => o.classList.remove(\"active\"));\n opt.classList.add(\"active\");\n updateCode();\n });\n});\n\n\/\/ Gestion des logos pour Wix\nwixLogoOptions.forEach(opt => {\n opt.addEventListener(\"click\", () => {\n wixLogoOptions.forEach(o => o.classList.remove(\"active\"));\n opt.classList.add(\"active\");\n updateWixCode();\n });\n});\n\n\/\/ Gestion de la copie du code\ndocument.querySelectorAll(\".copy-btn\").forEach(btn => {\n btn.addEventListener(\"click\", () => {\n const target = document.getElementById(btn.dataset.target);\n navigator.clipboard.writeText(target.textContent);\n btn.innerHTML = \"<i class='fa-solid fa-check'><\/i> Copi\u00e9\";\n setTimeout(() => {\n btn.innerHTML = '<i class=\"fa-regular fa-copy\"><\/i> Copier';\n }, 1500);\n });\n});\n\n\/\/ Initialisation\nvalidateRestaurantId();\nvalidateWixRestaurantId();\nupdateCode();\nupdateWixCode();\nupdatePopupButton();\nupdateSteps(currentStep);\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Assistant d’int\u00e9gration Barestho Assistant d’int\u00e9gration Barestho Int\u00e9grez votre widget de r\u00e9servation en quelques \u00e9tapes simples 1 2 3 4 D\u00e9marrer l’int\u00e9gration du module de r\u00e9servation Barestho Suivez ces \u00e9tapes pour int\u00e9grer facilement le module sur votre site web R\u00e9servations Vos clients r\u00e9servent directement sur votre site Int\u00e9gration Quelques lignes de code suffisent Configuration Pr\u00eate en […]<\/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-4179","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pro.barestho.com\/en\/wp-json\/wp\/v2\/pages\/4179","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pro.barestho.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pro.barestho.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pro.barestho.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pro.barestho.com\/en\/wp-json\/wp\/v2\/comments?post=4179"}],"version-history":[{"count":22,"href":"https:\/\/pro.barestho.com\/en\/wp-json\/wp\/v2\/pages\/4179\/revisions"}],"predecessor-version":[{"id":4201,"href":"https:\/\/pro.barestho.com\/en\/wp-json\/wp\/v2\/pages\/4179\/revisions\/4201"}],"wp:attachment":[{"href":"https:\/\/pro.barestho.com\/en\/wp-json\/wp\/v2\/media?parent=4179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}