{"id":106,"date":"2025-10-14T11:14:36","date_gmt":"2025-10-14T09:14:36","guid":{"rendered":"https:\/\/novaid.fr\/?page_id=106"},"modified":"2026-02-10T11:34:34","modified_gmt":"2026-02-10T10:34:34","slug":"produits_accessoires","status":"publish","type":"page","link":"https:\/\/novaid.fr\/index.php\/produits_accessoires\/","title":{"rendered":"produits_accessoires"},"content":{"rendered":"\n\n\n\n \n \n Novaid \u2013 Accessoires pour l’\u00c9tiquetage et la Tra\u00e7abilit\u00e9<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Rajdhani:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <style>\n \/* ========== VARIABLES GLOBALES ========== *\/\n :root {\n --novaid-orange: #f39200;\n --novaid-blue: #1a5490;\n --novaid-dark: #2c3e50;\n --precision-teal: #00a651;\n --carbon-black: #1a1a1a;\n --aluminum-silver: #bdc3c7;\n --safety-yellow: #f39c12;\n \n --gradient-primary: linear-gradient(135deg, #1a5490 0%, #0d3d6b 100%);\n --gradient-accent: linear-gradient(135deg, #f39200 0%, #d17d00 100%);\n --gradient-success: linear-gradient(135deg, #00a651 0%, #008f43 100%);\n \n --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.08);\n --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.12);\n --shadow-hard: 0 16px 48px rgba(0, 0, 0, 0.18);\n \n --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n \n --space-xs: 0.25rem;\n --space-sm: 0.5rem;\n --space-md: 1rem;\n --space-lg: 1.5rem;\n --space-xl: 2rem;\n --space-2xl: 3rem;\n \n --font-display: 'Rajdhani', sans-serif;\n --font-body: 'Outfit', sans-serif;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: var(--font-body);\n color: var(--carbon-black);\n background: #f5f7fa;\n line-height: 1.6;\n overflow-x: hidden;\n }\n\n \/* ========== HEADER ========== *\/\n .novaid-top-bar {\n background: var(--gradient-primary);\n color: white;\n padding: 0.75rem 0;\n font-size: 0.9rem;\n border-bottom: 2px solid var(--novaid-orange);\n }\n\n .novaid-top-bar-content {\n max-width: 100%;\n margin: 0 auto;\n padding: 0 var(--space-lg);\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--space-md);\n }\n\n .novaid-banner-item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n opacity: 0.95;\n transition: var(--transition-fast);\n }\n\n .novaid-banner-item:hover {\n opacity: 1;\n transform: translateX(3px);\n }\n\n .novaid-main-header {\n background: white;\n box-shadow: var(--shadow-medium);\n position: sticky;\n top: 0;\n z-index: 1000;\n border-bottom: 3px solid var(--novaid-orange);\n }\n\n .novaid-header-content {\n max-width: 100%;\n margin: 0 auto;\n padding: var(--space-lg);\n display: grid;\n grid-template-columns: auto 1fr auto;\n gap: var(--space-xl);\n align-items: center;\n }\n\n .novaid-logo {\n font-family: var(--font-display);\n font-size: 2.5rem;\n font-weight: 700;\n background: var(--gradient-accent);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n letter-spacing: -1px;\n text-transform: uppercase;\n }\n\n .novaid-search-container {\n position: relative;\n max-width: 600px;\n }\n\n .novaid-search-input {\n width: 100%;\n padding: 0.875rem 3.5rem 0.875rem 3rem;\n border: 2px solid #e0e6ed;\n border-radius: 50px;\n font-size: 1rem;\n font-family: var(--font-body);\n transition: var(--transition-smooth);\n background: #f8fafc;\n }\n\n .novaid-search-input:focus {\n outline: none;\n border-color: var(--novaid-orange);\n box-shadow: 0 0 0 4px rgba(243, 146, 0, 0.1);\n background: white;\n }\n\n .novaid-search-icon {\n position: absolute;\n left: 1.125rem;\n top: 50%;\n transform: translateY(-50%);\n font-size: 1.25rem;\n color: var(--aluminum-silver);\n }\n\n .novaid-header-actions {\n display: flex;\n gap: var(--space-md);\n align-items: center;\n }\n\n .novaid-btn {\n padding: 0.75rem 1.5rem;\n border-radius: 8px;\n font-weight: 600;\n font-family: var(--font-display);\n text-decoration: none;\n cursor: pointer;\n border: none;\n transition: var(--transition-smooth);\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.95rem;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n position: relative;\n overflow: hidden;\n }\n\n .novaid-btn::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.3);\n transform: translate(-50%, -50%);\n transition: width 0.6s, height 0.6s;\n }\n\n .novaid-btn:hover::before {\n width: 300px;\n height: 300px;\n }\n\n .novaid-btn-primary {\n background: var(--gradient-primary);\n color: white;\n box-shadow: var(--shadow-soft);\n }\n\n .novaid-btn-primary:hover {\n transform: translateY(-2px);\n box-shadow: var(--shadow-medium);\n }\n\n .novaid-btn-accent {\n background: var(--gradient-accent);\n color: white;\n box-shadow: var(--shadow-soft);\n }\n\n .novaid-btn-accent:hover {\n transform: translateY(-2px);\n box-shadow: var(--shadow-medium);\n }\n\n .novaid-btn-icon {\n width: 48px;\n height: 48px;\n padding: 0;\n border-radius: 50%;\n justify-content: center;\n }\n\n .novaid-badge {\n position: absolute;\n top: -6px;\n right: -6px;\n background: var(--safety-yellow);\n color: var(--carbon-black);\n border-radius: 50%;\n width: 22px;\n height: 22px;\n font-size: 0.75rem;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n border: 2px solid white;\n animation: pulse 2s infinite;\n }\n\n @keyframes pulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.1); }\n }\n\n \/* ========== TOOLBAR ========== *\/\n .novaid-toolbar {\n background: white;\n box-shadow: var(--shadow-soft);\n position: sticky;\n top: 88px;\n z-index: 999;\n border-bottom: 2px solid #e0e6ed;\n }\n\n .novaid-toolbar-content {\n max-width: 100%;\n margin: 0 auto;\n padding: var(--space-lg);\n display: grid;\n grid-template-columns: auto 1fr auto auto;\n gap: var(--space-lg);\n align-items: center;\n }\n\n .novaid-view-toggle {\n display: flex;\n gap: 0.25rem;\n background: #f8fafc;\n padding: 0.25rem;\n border-radius: 8px;\n }\n\n .novaid-view-btn {\n padding: 0.625rem 1rem;\n border: none;\n background: transparent;\n cursor: pointer;\n border-radius: 6px;\n transition: var(--transition-fast);\n font-size: 1.125rem;\n color: var(--aluminum-silver);\n }\n\n .novaid-view-btn.active {\n background: white;\n color: var(--novaid-orange);\n box-shadow: var(--shadow-soft);\n }\n\n .novaid-filter-group {\n display: flex;\n gap: var(--space-sm);\n align-items: center;\n flex-wrap: wrap;\n }\n\n .novaid-filter-select {\n padding: 0.625rem 1rem;\n border: 2px solid #e0e6ed;\n border-radius: 8px;\n font-family: var(--font-body);\n font-size: 0.9375rem;\n background: white;\n cursor: pointer;\n transition: var(--transition-fast);\n min-width: 180px;\n }\n\n .novaid-filter-select:hover,\n .novaid-filter-select:focus {\n border-color: var(--novaid-orange);\n outline: none;\n }\n\n .novaid-filter-toggle {\n padding: 0.625rem 1.25rem;\n background: var(--gradient-accent);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n font-weight: 600;\n font-family: var(--font-display);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n transition: var(--transition-smooth);\n box-shadow: var(--shadow-soft);\n }\n\n .novaid-filter-toggle:hover {\n transform: translateY(-2px);\n box-shadow: var(--shadow-medium);\n }\n\n .novaid-active-filters {\n display: flex;\n gap: 0.5rem;\n flex-wrap: wrap;\n }\n\n .novaid-filter-tag {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.375rem 0.75rem;\n background: var(--novaid-orange);\n color: white;\n border-radius: 20px;\n font-size: 0.875rem;\n font-weight: 500;\n }\n\n .novaid-filter-tag-remove {\n background: rgba(255, 255, 255, 0.3);\n border: none;\n color: white;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.75rem;\n transition: var(--transition-fast);\n }\n\n .novaid-filter-tag-remove:hover {\n background: rgba(255, 255, 255, 0.5);\n }\n\n \/* ========== CONTAINER & GRID ========== *\/\n .novaid-container {\n max-width: 100%;\n margin: 0 auto;\n padding: var(--space-xl) var(--space-lg);\n }\n\n .novaid-products-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n gap: var(--space-xl);\n }\n\n .novaid-products-grid.list-view {\n grid-template-columns: 1fr;\n }\n\n \/* ========== PRODUCT CARD ========== *\/\n .novaid-product-card {\n background: white;\n border-radius: 16px;\n overflow: hidden;\n box-shadow: var(--shadow-soft);\n transition: var(--transition-smooth);\n border: 2px solid transparent;\n display: flex;\n flex-direction: column;\n position: relative;\n }\n\n .novaid-product-card:hover {\n transform: translateY(-8px);\n box-shadow: var(--shadow-hard);\n border-color: var(--novaid-orange);\n }\n\n .novaid-products-grid.list-view .novaid-product-card {\n flex-direction: row;\n }\n\n .novaid-products-grid.list-view .novaid-product-card:hover {\n transform: translateX(8px);\n }\n\n .novaid-product-badges {\n position: absolute;\n top: var(--space-md);\n right: var(--space-md);\n display: flex;\n flex-direction: column;\n gap: var(--space-sm);\n z-index: 2;\n }\n\n .novaid-product-badge {\n padding: 0.375rem 0.75rem;\n border-radius: 20px;\n font-size: 0.75rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n box-shadow: var(--shadow-soft);\n }\n\n .novaid-badge-new {\n background: var(--safety-yellow);\n color: var(--carbon-black);\n }\n\n .novaid-badge-spares {\n background: var(--novaid-orange);\n color: white;\n }\n\n .novaid-product-image-wrapper {\n position: relative;\n background: linear-gradient(135deg, #f8fafc 0%, #e8eef5 100%);\n border-bottom: 2px solid #e0e6ed;\n }\n\n .novaid-products-grid.list-view .novaid-product-image-wrapper {\n min-width: 280px;\n max-width: 280px;\n border-bottom: none;\n border-right: 2px solid #e0e6ed;\n }\n\n .novaid-product-image {\n width: 100%;\n height: 280px;\n object-fit: contain;\n padding: var(--space-xl);\n transition: var(--transition-smooth);\n }\n\n .novaid-products-grid.list-view .novaid-product-image {\n height: 100%;\n }\n\n .novaid-product-card:hover .novaid-product-image {\n transform: scale(1.05);\n }\n\n .novaid-product-quick-actions {\n position: absolute;\n top: var(--space-md);\n left: var(--space-md);\n display: flex;\n gap: var(--space-sm);\n opacity: 0;\n transform: translateY(-10px);\n transition: var(--transition-smooth);\n }\n\n .novaid-product-card:hover .novaid-product-quick-actions {\n opacity: 1;\n transform: translateY(0);\n }\n\n .novaid-quick-action-btn {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n border: none;\n background: white;\n color: var(--novaid-blue);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: var(--shadow-medium);\n transition: var(--transition-fast);\n }\n\n .novaid-quick-action-btn:hover {\n background: var(--novaid-orange);\n color: white;\n transform: scale(1.1);\n }\n\n .novaid-quick-action-btn.active {\n background: var(--novaid-orange);\n color: white;\n }\n\n .novaid-product-info {\n padding: var(--space-xl);\n flex: 1;\n display: flex;\n flex-direction: column;\n }\n\n .novaid-product-category {\n display: inline-block;\n padding: 0.25rem 0.75rem;\n background: rgba(243, 146, 0, 0.1);\n color: var(--novaid-orange);\n border-radius: 20px;\n font-size: 0.75rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: var(--space-sm);\n width: fit-content;\n }\n\n .novaid-product-title {\n font-family: var(--font-display);\n font-size: 1.125rem;\n font-weight: 700;\n color: var(--novaid-dark);\n margin-bottom: var(--space-sm);\n line-height: 1.3;\n min-height: 2.6em;\n }\n\n .novaid-product-ref {\n font-family: 'Courier New', monospace;\n font-size: 0.875rem;\n color: var(--aluminum-silver);\n font-weight: 600;\n margin-bottom: var(--space-md);\n }\n\n .novaid-product-specs {\n background: #f8fafc;\n padding: var(--space-md);\n border-radius: 8px;\n margin-bottom: var(--space-md);\n border-left: 3px solid var(--novaid-orange);\n }\n\n .novaid-spec-item {\n display: flex;\n justify-content: space-between;\n padding: 0.375rem 0;\n font-size: 0.875rem;\n border-bottom: 1px solid #e0e6ed;\n }\n\n .novaid-spec-item:last-child {\n border-bottom: none;\n }\n\n .novaid-spec-label {\n color: var(--aluminum-silver);\n font-weight: 500;\n }\n\n .novaid-spec-value {\n color: var(--novaid-dark);\n font-weight: 600;\n }\n\n .novaid-product-price-section {\n margin: var(--space-md) 0;\n padding: var(--space-md);\n background: linear-gradient(135deg, rgba(243, 146, 0, 0.05) 0%, rgba(243, 146, 0, 0.1) 100%);\n border-radius: 8px;\n border: 1px solid rgba(243, 146, 0, 0.2);\n }\n\n .novaid-product-price {\n font-family: var(--font-display);\n font-size: 2rem;\n font-weight: 700;\n color: var(--novaid-orange);\n display: block;\n line-height: 1;\n }\n\n .novaid-product-price-label {\n font-size: 0.75rem;\n color: var(--aluminum-silver);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-top: 0.25rem;\n }\n\n .novaid-product-actions {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--space-sm);\n margin-top: auto;\n }\n\n .novaid-product-actions .novaid-btn-cart {\n grid-column: span 3;\n }\n\n .novaid-spares-toggle {\n grid-column: span 3;\n margin-top: var(--space-sm);\n background: var(--gradient-accent);\n color: white;\n border: none;\n padding: 0.75rem;\n border-radius: 8px;\n cursor: pointer;\n font-weight: 600;\n font-family: var(--font-display);\n transition: var(--transition-smooth);\n }\n\n .novaid-spares-toggle:hover {\n transform: scale(1.02);\n box-shadow: var(--shadow-medium);\n }\n\n .novaid-spares-section {\n display: none;\n background: linear-gradient(135deg, #fff9f0 0%, #ffedd9 100%);\n padding: var(--space-xl);\n border-top: 3px solid var(--novaid-orange);\n }\n\n .novaid-spares-section.active {\n display: block;\n }\n\n .novaid-spares-header {\n font-family: var(--font-display);\n font-size: 1.125rem;\n font-weight: 700;\n color: var(--novaid-orange);\n margin-bottom: var(--space-md);\n text-transform: uppercase;\n }\n\n .novaid-spare-item {\n display: flex;\n align-items: center;\n gap: var(--space-md);\n padding: var(--space-md);\n background: white;\n border-radius: 8px;\n margin-bottom: var(--space-sm);\n border: 1px solid #e0e6ed;\n transition: var(--transition-fast);\n }\n\n .novaid-spare-item:hover {\n box-shadow: var(--shadow-soft);\n border-color: var(--novaid-orange);\n }\n\n .novaid-spare-info {\n flex: 1;\n }\n\n .novaid-spare-ref {\n font-family: 'Courier New', monospace;\n font-size: 0.75rem;\n color: var(--aluminum-silver);\n font-weight: 600;\n }\n\n .novaid-spare-name {\n font-size: 0.9375rem;\n color: var(--novaid-dark);\n font-weight: 600;\n margin-top: 0.25rem;\n }\n\n .novaid-spare-price {\n font-family: var(--font-display);\n font-size: 1.125rem;\n font-weight: 700;\n color: var(--novaid-orange);\n }\n\n .novaid-spare-add-btn {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n border: none;\n background: var(--novaid-orange);\n color: white;\n cursor: pointer;\n font-size: 1.25rem;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: var(--transition-fast);\n }\n\n .novaid-spare-add-btn:hover {\n background: var(--novaid-blue);\n transform: scale(1.1);\n }\n\n \/* ========== FLOATING ACTIONS ========== *\/\n .novaid-floating-actions {\n position: fixed;\n bottom: var(--space-xl);\n right: var(--space-xl);\n display: flex;\n flex-direction: column;\n gap: var(--space-md);\n z-index: 1500;\n }\n\n .novaid-floating-btn {\n width: 64px;\n height: 64px;\n border-radius: 50%;\n border: none;\n color: white;\n cursor: pointer;\n font-size: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: var(--shadow-medium);\n transition: var(--transition-smooth);\n position: relative;\n }\n\n .novaid-floating-btn:hover {\n transform: scale(1.1);\n box-shadow: var(--shadow-hard);\n }\n\n .novaid-floating-compare {\n background: var(--gradient-primary);\n }\n\n .novaid-floating-favorites {\n background: var(--gradient-accent);\n }\n\n .novaid-floating-cart {\n background: var(--gradient-success);\n }\n\n .novaid-floating-export {\n background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);\n }\n\n \/* ========== CART PANEL ========== *\/\n .novaid-cart-panel {\n position: fixed;\n top: 0;\n right: -500px;\n width: 500px;\n height: 100vh;\n background: white;\n box-shadow: var(--shadow-hard);\n z-index: 2001;\n transition: right var(--transition-smooth);\n display: flex;\n flex-direction: column;\n }\n\n .novaid-cart-panel.active {\n right: 0;\n }\n\n .novaid-cart-header {\n padding: var(--space-xl);\n background: var(--gradient-success);\n color: white;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .novaid-cart-header h3 {\n font-family: var(--font-display);\n font-size: 1.5rem;\n font-weight: 700;\n text-transform: uppercase;\n }\n\n .novaid-cart-body {\n flex: 1;\n overflow-y: auto;\n padding: var(--space-lg);\n }\n\n .novaid-cart-item {\n display: flex;\n gap: var(--space-md);\n padding: var(--space-md);\n background: #f8fafc;\n border-radius: 12px;\n margin-bottom: var(--space-md);\n border: 2px solid #e0e6ed;\n }\n\n .novaid-cart-item-image {\n width: 80px;\n height: 80px;\n object-fit: contain;\n background: white;\n border-radius: 8px;\n padding: var(--space-sm);\n }\n\n .novaid-cart-item-info {\n flex: 1;\n }\n\n .novaid-cart-item-title {\n font-weight: 700;\n color: var(--novaid-dark);\n margin-bottom: 0.25rem;\n }\n\n .novaid-cart-item-ref {\n font-family: 'Courier New', monospace;\n font-size: 0.75rem;\n color: var(--aluminum-silver);\n }\n\n .novaid-cart-item-price {\n font-family: var(--font-display);\n font-weight: 700;\n color: var(--novaid-orange);\n margin-top: 0.5rem;\n }\n\n .novaid-cart-item-remove {\n background: #e74c3c;\n color: white;\n border: none;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .novaid-cart-footer {\n padding: var(--space-xl);\n border-top: 2px solid #e0e6ed;\n background: #f8fafc;\n }\n\n .novaid-cart-total {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: var(--space-lg);\n padding: var(--space-lg);\n background: white;\n border-radius: 12px;\n border: 2px solid var(--novaid-orange);\n }\n\n .novaid-cart-total-label {\n font-family: var(--font-display);\n font-size: 1.25rem;\n font-weight: 700;\n text-transform: uppercase;\n }\n\n .novaid-cart-total-amount {\n font-family: var(--font-display);\n font-size: 2rem;\n font-weight: 700;\n color: var(--novaid-orange);\n }\n\n \/* ========== MODAL ========== *\/\n .novaid-modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.8);\n backdrop-filter: blur(4px);\n z-index: 3000;\n align-items: center;\n justify-content: center;\n padding: var(--space-xl);\n }\n\n .novaid-modal.active {\n display: flex;\n }\n\n .novaid-modal-content {\n background: white;\n border-radius: 20px;\n max-width: 1400px;\n width: 100%;\n max-height: 90vh;\n overflow-y: auto;\n }\n\n .novaid-modal-header {\n padding: var(--space-xl);\n background: var(--gradient-primary);\n color: white;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-radius: 20px 20px 0 0;\n }\n\n .novaid-modal-header h2 {\n font-family: var(--font-display);\n font-size: 2rem;\n font-weight: 700;\n text-transform: uppercase;\n }\n\n .novaid-modal-close {\n background: rgba(255, 255, 255, 0.2);\n border: none;\n color: white;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n cursor: pointer;\n font-size: 1.75rem;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .novaid-modal-body {\n padding: var(--space-xl);\n }\n\n .novaid-empty-state {\n text-align: center;\n padding: var(--space-2xl);\n color: var(--aluminum-silver);\n }\n\n .novaid-empty-state-icon {\n font-size: 4rem;\n margin-bottom: var(--space-lg);\n opacity: 0.5;\n }\n\n \/* ========== FILTER PANEL ========== *\/\n .novaid-filter-panel {\n position: fixed;\n top: 0;\n right: -450px;\n width: 450px;\n height: 100vh;\n background: white;\n box-shadow: var(--shadow-hard);\n z-index: 2000;\n transition: right var(--transition-smooth);\n display: flex;\n flex-direction: column;\n }\n\n .novaid-filter-panel.active {\n right: 0;\n }\n\n .novaid-filter-header {\n padding: var(--space-xl);\n background: var(--gradient-primary);\n color: white;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .novaid-filter-body {\n flex: 1;\n overflow-y: auto;\n padding: var(--space-xl);\n }\n\n .novaid-filter-section {\n margin-bottom: var(--space-xl);\n }\n\n .novaid-filter-section-title {\n font-family: var(--font-display);\n font-size: 1.125rem;\n font-weight: 700;\n text-transform: uppercase;\n margin-bottom: var(--space-md);\n color: var(--novaid-blue);\n }\n\n .novaid-price-range {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-md);\n }\n\n .novaid-filter-input {\n padding: 0.625rem 1rem;\n border: 2px solid #e0e6ed;\n border-radius: 8px;\n font-family: var(--font-body);\n width: 100%;\n }\n\n .novaid-checkbox-group {\n display: flex;\n flex-direction: column;\n gap: var(--space-sm);\n }\n\n .novaid-checkbox-item {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n padding: var(--space-sm);\n border-radius: 6px;\n cursor: pointer;\n }\n\n .novaid-checkbox-item:hover {\n background: #f8fafc;\n }\n\n .novaid-checkbox-item input {\n width: 20px;\n height: 20px;\n accent-color: var(--novaid-orange);\n }\n\n \/* ========== RESPONSIVE ========== *\/\n @media (max-width: 1024px) {\n .novaid-header-content {\n grid-template-columns: 1fr;\n gap: var(--space-md);\n }\n\n .novaid-toolbar-content {\n grid-template-columns: 1fr;\n }\n\n .novaid-products-grid {\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n }\n }\n\n @media (max-width: 640px) {\n .novaid-products-grid {\n grid-template-columns: 1fr;\n }\n\n .novaid-cart-panel,\n .novaid-filter-panel {\n width: 100%;\n }\n }\n\n \/* ========== ANIMATIONS ========== *\/\n @keyframes slideInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .novaid-product-card {\n animation: slideInUp 0.4s ease-out backwards;\n }\n\n @media print {\n .novaid-main-header,\n .novaid-toolbar,\n .novaid-floating-actions,\n .novaid-filter-panel,\n .novaid-cart-panel,\n .novaid-modal,\n .novaid-product-actions {\n display: none !important;\n }\n }\n <\/style>\n<\/head>\n<body>\n <!-- Main Header -->\n <header class=\"novaid-main-header\">\n <div class=\"novaid-header-content\">\n \n \n <div class=\"novaid-search-container\">\n <span class=\"novaid-search-icon\">\ud83d\udd0d<\/span>\n <input type=\"text\" id=\"novaidSearchInput\" class=\"novaid-search-input\" placeholder=\"Rechercher par produit, r\u00e9f\u00e9rence, cat\u00e9gorie...\">\n <\/div>\n\n <div class=\"novaid-header-actions\">\n <button class=\"novaid-btn novaid-btn-icon novaid-btn-primary\" onclick=\"novaidOpenFavorites()\" title=\"Favoris\">\n \u2764\ufe0f\n <span class=\"novaid-badge\" id=\"novaidFavoritesCount\">0<\/span>\n <\/button>\n <button class=\"novaid-btn novaid-btn-icon novaid-btn-primary\" onclick=\"novaidOpenComparison()\" title=\"Comparateur\">\n \u2696\ufe0f\n <span class=\"novaid-badge\" id=\"novaidCompareCount\">0<\/span>\n <\/button>\n <button class=\"novaid-btn novaid-btn-icon novaid-btn-accent\" onclick=\"novaidToggleCart()\" title=\"Panier\">\n \ud83d\uded2\n <span class=\"novaid-badge\" id=\"novaidCartCount\">0<\/span>\n <\/button>\n <\/div>\n <\/div>\n <\/header>\n\n <!-- Toolbar -->\n <div class=\"novaid-toolbar\">\n <div class=\"novaid-toolbar-content\">\n <div class=\"novaid-view-toggle\">\n <button class=\"novaid-view-btn active\" onclick=\"novaidSetView('grid')\" title=\"Vue grille\">\u25a6<\/button>\n <button class=\"novaid-view-btn\" onclick=\"novaidSetView('list')\" title=\"Vue liste\">\u2630<\/button>\n <\/div>\n\n <div class=\"novaid-filter-group\">\n <select id=\"novaidCategoryFilter\" class=\"novaid-filter-select\" onchange=\"novaidFilterProducts()\">\n <option value=\"\">Toutes les cat\u00e9gories<\/option>\n <\/select>\n <select id=\"novaidSortFilter\" class=\"novaid-filter-select\" onchange=\"novaidSortProducts()\">\n <option value=\"default\">Tri par d\u00e9faut<\/option>\n <option value=\"price-asc\">Prix croissant<\/option>\n <option value=\"price-desc\">Prix d\u00e9croissant<\/option>\n <option value=\"name-asc\">Nom A-Z<\/option>\n <\/select>\n <\/div>\n\n <div class=\"novaid-active-filters\" id=\"novaidActiveFilters\"><\/div>\n\n <button class=\"novaid-filter-toggle\" onclick=\"novaidToggleFilters()\">\n \ud83c\udfaf Filtres Avanc\u00e9s\n <\/button>\n <\/div>\n <\/div>\n\n <!-- Products Container -->\n <div class=\"novaid-container\">\n <div id=\"novaidProductsContainer\" class=\"novaid-products-grid\"><\/div>\n <\/div>\n\n <!-- Filter Panel -->\n <div class=\"novaid-filter-panel\" id=\"novaidFilterPanel\">\n <div class=\"novaid-filter-header\">\n <h3>\ud83c\udfaf Filtres<\/h3>\n <button class=\"novaid-modal-close\" onclick=\"novaidToggleFilters()\">\u00d7<\/button>\n <\/div>\n <div class=\"novaid-filter-body\">\n <div class=\"novaid-filter-section\">\n <div class=\"novaid-filter-section-title\">\ud83d\udcb0 Plage de Prix<\/div>\n <div class=\"novaid-price-range\">\n <input type=\"number\" id=\"novaidPriceMin\" class=\"novaid-filter-input\" placeholder=\"Min (\u20ac)\" min=\"0\">\n <input type=\"number\" id=\"novaidPriceMax\" class=\"novaid-filter-input\" placeholder=\"Max (\u20ac)\" min=\"0\">\n <\/div>\n <\/div>\n <div class=\"novaid-filter-section\">\n <div class=\"novaid-filter-section-title\">\ud83d\udd27 Pi\u00e8ces D\u00e9tach\u00e9es<\/div>\n <div class=\"novaid-checkbox-group\">\n <label class=\"novaid-checkbox-item\">\n <input type=\"checkbox\" id=\"novaidFilterSpares\" onchange=\"novaidApplyFilters()\">\n <span>Avec pi\u00e8ces disponibles<\/span>\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n <div style=\"padding: var(--space-xl); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md);\">\n <button class=\"novaid-btn novaid-btn-primary\" onclick=\"novaidClearFilters()\">R\u00e9initialiser<\/button>\n <button class=\"novaid-btn novaid-btn-accent\" onclick=\"novaidApplyFilters()\">Appliquer<\/button>\n <\/div>\n <\/div>\n\n <!-- Cart Panel -->\n <div class=\"novaid-cart-panel\" id=\"novaidCartPanel\">\n <div class=\"novaid-cart-header\">\n <h3>\ud83d\uded2 Mon Panier<\/h3>\n <button class=\"novaid-modal-close\" onclick=\"novaidToggleCart()\">\u00d7<\/button>\n <\/div>\n <div class=\"novaid-cart-body\" id=\"novaidCartBody\">\n <div class=\"novaid-empty-state\">\n <div class=\"novaid-empty-state-icon\">\ud83d\uded2<\/div>\n <p>Votre panier est vide<\/p>\n <\/div>\n <\/div>\n <div class=\"novaid-cart-footer\" id=\"novaidCartFooter\" style=\"display: none;\">\n <div class=\"novaid-cart-total\">\n <span class=\"novaid-cart-total-label\">Total HT<\/span>\n <span class=\"novaid-cart-total-amount\" id=\"novaidCartTotal\">0,00 \u20ac<\/span>\n <\/div>\n <div style=\"display: grid; gap: var(--space-sm);\">\n <button class=\"novaid-btn novaid-btn-primary\" onclick=\"novaidRequestQuote()\">\ud83d\udce7 Demander un Devis<\/button>\n <button class=\"novaid-btn novaid-btn-accent\" onclick=\"novaidExportPDF()\">\ud83d\udcc4 Export PDF<\/button>\n <button class=\"novaid-btn novaid-btn-primary\" onclick=\"novaidClearCart()\">\ud83d\uddd1\ufe0f Vider<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Comparison Modal -->\n <div class=\"novaid-modal\" id=\"novaidComparisonModal\">\n <div class=\"novaid-modal-content\">\n <div class=\"novaid-modal-header\">\n <h2>\u2696\ufe0f Comparateur<\/h2>\n <button class=\"novaid-modal-close\" onclick=\"novaidCloseComparison()\">\u00d7<\/button>\n <\/div>\n <div class=\"novaid-modal-body\" id=\"novaidComparisonBody\">\n <div class=\"novaid-empty-state\">\n <div class=\"novaid-empty-state-icon\">\u2696\ufe0f<\/div>\n <p>S\u00e9lectionnez des produits pour les comparer<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Favorites Modal -->\n <div class=\"novaid-modal\" id=\"novaidFavoritesModal\">\n <div class=\"novaid-modal-content\">\n <div class=\"novaid-modal-header\">\n <h2>\u2764\ufe0f Mes Favoris<\/h2>\n <button class=\"novaid-modal-close\" onclick=\"novaidCloseFavorites()\">\u00d7<\/button>\n <\/div>\n <div class=\"novaid-modal-body\" id=\"novaidFavoritesBody\">\n <div class=\"novaid-empty-state\">\n <div class=\"novaid-empty-state-icon\">\u2764\ufe0f<\/div>\n <p>Aucun favori enregistr\u00e9<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Floating Actions -->\n <div class=\"novaid-floating-actions\">\n <button class=\"novaid-floating-btn novaid-floating-compare\" onclick=\"novaidOpenComparison()\">\n \u2696\ufe0f\n <span class=\"novaid-badge\" id=\"novaidFloatingCompareCount\">0<\/span>\n <\/button>\n <button class=\"novaid-floating-btn novaid-floating-favorites\" onclick=\"novaidOpenFavorites()\">\n \u2764\ufe0f\n <span class=\"novaid-badge\" id=\"novaidFloatingFavCount\">0<\/span>\n <\/button>\n <button class=\"novaid-floating-btn novaid-floating-cart\" onclick=\"novaidToggleCart()\">\n \ud83d\uded2\n <span class=\"novaid-badge\" id=\"novaidFloatingCartCount\">0<\/span>\n <\/button>\n <button class=\"novaid-floating-btn novaid-floating-export\" onclick=\"novaidExportPDF()\">\n \ud83d\udcc4\n <\/button>\n <\/div>\n\n <script>\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \/\/ DONN\u00c9ES PRODUITS - INSTRUCTION IMPORTANTE :\n \/\/ Copiez le bloc \"const novaidProductsData = {...};\" COMPLET\n \/\/ depuis votre page catalogue actuelle (entre les balises <script>)\n \/\/ et collez-le ICI \u00e0 la place de la ligne ci-dessous.\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n const novaidProductsData = {};\n \/\/ \u00c9tat global\n let novaidCurrentView = 'grid';\n let novaidCurrentCategory = '';\n let novaidCurrentSort = 'default';\n let novaidSearchTerm = '';\n let novaidCart = [];\n let novaidFavorites = [];\n let novaidComparison = [];\n let novaidFilters = {\n priceMin: null,\n priceMax: null,\n withSpares: false\n };\n\n \/\/ Initialisation\n document.addEventListener('DOMContentLoaded', function() {\n novaidLoadState();\n novaidInitializeCategories();\n novaidDisplayProducts();\n novaidUpdateAllCounts();\n \n document.getElementById('novaidSearchInput').addEventListener('input', function(e) {\n novaidSearchTerm = e.target.value.toLowerCase();\n novaidDisplayProducts();\n });\n });\n\n function novaidLoadState() {\n const savedCart = localStorage.getItem('novaid_cart');\n const savedFavorites = localStorage.getItem('novaid_favorites');\n const savedComparison = localStorage.getItem('novaid_comparison');\n \n if (savedCart) novaidCart = JSON.parse(savedCart);\n if (savedFavorites) novaidFavorites = JSON.parse(savedFavorites);\n if (savedComparison) novaidComparison = JSON.parse(savedComparison);\n }\n\n function novaidSaveState() {\n localStorage.setItem('novaid_cart', JSON.stringify(novaidCart));\n localStorage.setItem('novaid_favorites', JSON.stringify(novaidFavorites));\n localStorage.setItem('novaid_comparison', JSON.stringify(novaidComparison));\n }\n\n function novaidInitializeCategories() {\n const select = document.getElementById('novaidCategoryFilter');\n Object.keys(novaidProductsData).forEach(cat => {\n const option = document.createElement('option');\n option.value = cat;\n option.textContent = cat;\n select.appendChild(option);\n });\n }\n\n function novaidSetView(view) {\n novaidCurrentView = view;\n document.querySelectorAll('.novaid-view-btn').forEach(btn => btn.classList.remove('active'));\n event.target.classList.add('active');\n \n const grid = document.getElementById('novaidProductsContainer');\n if (view === 'list') {\n grid.classList.add('list-view');\n } else {\n grid.classList.remove('list-view');\n }\n }\n\n function novaidFilterProducts() {\n novaidCurrentCategory = document.getElementById('novaidCategoryFilter').value;\n novaidDisplayProducts();\n }\n\n function novaidSortProducts() {\n novaidCurrentSort = document.getElementById('novaidSortFilter').value;\n novaidDisplayProducts();\n }\n\n function novaidDisplayProducts() {\n const container = document.getElementById('novaidProductsContainer');\n container.innerHTML = '';\n \n let allProducts = [];\n \n Object.keys(novaidProductsData).forEach(family => {\n if (!novaidCurrentCategory || novaidCurrentCategory === family) {\n Object.keys(novaidProductsData[family]).forEach(subcat => {\n novaidProductsData[family][subcat].forEach(p => {\n allProducts.push({\n ...p,\n family: family,\n subcategory: subcat\n });\n });\n });\n }\n });\n \n if (novaidSearchTerm) {\n allProducts = allProducts.filter(p => \n p.name.toLowerCase().includes(novaidSearchTerm) ||\n p.ref.toLowerCase().includes(novaidSearchTerm) ||\n p.family.toLowerCase().includes(novaidSearchTerm)\n );\n }\n \n if (novaidFilters.priceMin) {\n allProducts = allProducts.filter(p => p.price >= novaidFilters.priceMin);\n }\n if (novaidFilters.priceMax) {\n allProducts = allProducts.filter(p => p.price <= novaidFilters.priceMax);\n }\n if (novaidFilters.withSpares) {\n allProducts = allProducts.filter(p => p.spares && p.spares.length > 0);\n }\n \n allProducts = novaidSortProductsArray(allProducts);\n \n if (allProducts.length === 0) {\n container.innerHTML = '<div class=\"novaid-empty-state\"><div class=\"novaid-empty-state-icon\">\ud83d\udd0d<\/div><h3>Aucun produit trouv\u00e9<\/h3><\/div>';\n return;\n }\n \n allProducts.forEach(product => {\n container.appendChild(novaidCreateProductCard(product));\n });\n }\n\n function novaidSortProductsArray(products) {\n switch(novaidCurrentSort) {\n case 'price-asc':\n return products.sort((a, b) => a.price - b.price);\n case 'price-desc':\n return products.sort((a, b) => b.price - a.price);\n case 'name-asc':\n return products.sort((a, b) => a.name.localeCompare(b.name));\n default:\n return products;\n }\n }\n\n function novaidCreateProductCard(product) {\n const card = document.createElement('div');\n card.className = 'novaid-product-card';\n \n const hasSpares = product.spares && product.spares.length > 0;\n const imageUrl = product.picture_url || 'https:\/\/via.placeholder.com\/350x250?text=Novaid';\n const isInCart = novaidCart.some(item => item.ref === product.ref);\n const isInFavorites = novaidFavorites.some(item => item.ref === product.ref);\n const isInComparison = novaidComparison.some(item => item.ref === product.ref);\n \n card.innerHTML = `\n ${hasSpares ? '<div class=\"novaid-product-badges\"><div class=\"novaid-product-badge novaid-badge-spares\">\ud83d\udd27 ' + product.spares.length + ' pi\u00e8ces<\/div><\/div>' : ''}\n \n <div class=\"novaid-product-image-wrapper\">\n <div class=\"novaid-product-quick-actions\">\n <button class=\"novaid-quick-action-btn ${isInFavorites ? 'active' : ''}\" onclick=\"novaidToggleFavorite(event, '${product.ref}')\" title=\"Favori\">\n ${isInFavorites ? '\u2764\ufe0f' : '\ud83e\udd0d'}\n <\/button>\n <button class=\"novaid-quick-action-btn ${isInComparison ? 'active' : ''}\" onclick=\"novaidToggleComparison(event, '${product.ref}')\" title=\"Comparer\">\n \u2696\ufe0f\n <\/button>\n <\/div>\n <img decoding=\"async\" src=\"${imageUrl}\" alt=\"${product.name}\" class=\"novaid-product-image\" onerror=\"this.src='https:\/\/via.placeholder.com\/350x250\/f39200\/ffffff?text=Novaid'\">\n <\/div>\n \n <div class=\"novaid-product-info\">\n <span class=\"novaid-product-category\">${product.subcategory}<\/span>\n <h3 class=\"novaid-product-title\">${product.name}<\/h3>\n <div class=\"novaid-product-ref\">R\u00e9f: ${product.ref}<\/div>\n \n ${novaidCreateSpecsHTML(product.specs)}\n \n <div class=\"novaid-product-price-section\">\n <span class=\"novaid-product-price\">${novaidFormatPrice(product.price)}<\/span>\n <small class=\"novaid-product-price-label\">Prix HT<\/small>\n <\/div>\n \n <div class=\"novaid-product-actions\">\n <button class=\"novaid-btn novaid-btn-accent novaid-btn-cart\" onclick=\"novaidAddToCart(event, '${product.ref}')\">\n \ud83d\uded2 Ajouter\n <\/button>\n <\/div>\n \n ${hasSpares ? '<button class=\"novaid-spares-toggle\" onclick=\"novaidToggleSpares(this)\">\ud83d\udd27 Voir les pi\u00e8ces (' + product.spares.length + ')<\/button>' : ''}\n <\/div>\n \n ${hasSpares ? novaidCreateSparesHTML(product.spares) : ''}\n `;\n \n return card;\n }\n\n function novaidCreateSpecsHTML(specs) {\n const validSpecs = [];\n \n if (specs.max_width) validSpecs.push(['Largeur max', specs.max_width + ' mm']);\n if (specs.max_diameter) validSpecs.push(['Diam\u00e8tre max', specs.max_diameter + ' mm']);\n if (specs.max_weight) validSpecs.push(['Poids max', specs.max_weight + ' kg']);\n if (specs.max_speed) validSpecs.push(['Vitesse max', specs.max_speed + ' cm\/s']);\n \n if (validSpecs.length === 0) return '';\n \n return `\n <div class=\"novaid-product-specs\">\n ${validSpecs.map(([label, value]) => \n `<div class=\"novaid-spec-item\">\n <span class=\"novaid-spec-label\">${label}:<\/span>\n <span class=\"novaid-spec-value\">${value}<\/span>\n <\/div>`\n ).join('')}\n <\/div>\n `;\n }\n\n function novaidCreateSparesHTML(spares) {\n return `\n <div class=\"novaid-spares-section\">\n <div class=\"novaid-spares-header\">\ud83d\udd27 Pi\u00e8ces d\u00e9tach\u00e9es disponibles<\/div>\n ${spares.map(spare => `\n <div class=\"novaid-spare-item\">\n <div class=\"novaid-spare-info\">\n <div class=\"novaid-spare-ref\">${spare.ref}<\/div>\n <div class=\"novaid-spare-name\">${spare.name}<\/div>\n <\/div>\n <div class=\"novaid-spare-price\">${novaidFormatPrice(spare.price)}<\/div>\n <button class=\"novaid-spare-add-btn\" onclick=\"novaidAddSpareToCart(event, '${spare.ref}', '${spare.name}', ${spare.price})\">+<\/button>\n <\/div>\n `).join('')}\n <\/div>\n `;\n }\n\n function novaidToggleSpares(button) {\n const card = button.closest('.novaid-product-card');\n const sparesSection = card.querySelector('.novaid-spares-section');\n sparesSection.classList.toggle('active');\n \n const count = card.querySelectorAll('.novaid-spare-item').length;\n button.textContent = sparesSection.classList.contains('active') \n ? '\u274c Masquer les pi\u00e8ces'\n : `\ud83d\udd27 Voir les pi\u00e8ces (${count})`;\n }\n\n function novaidFormatPrice(price) {\n return price ? price.toFixed(2).replace('.', ',') + ' \u20ac' : 'Sur demande';\n }\n\n function novaidGetProductByRef(ref) {\n for (const family in novaidProductsData) {\n for (const subcat in novaidProductsData[family]) {\n const product = novaidProductsData[family][subcat].find(p => p.ref === ref);\n if (product) return { ...product, family, subcategory: subcat };\n }\n }\n return null;\n }\n\n function novaidToggleCart() {\n document.getElementById('novaidCartPanel').classList.toggle('active');\n novaidUpdateCart();\n }\n\n function novaidAddToCart(event, ref) {\n event.stopPropagation();\n const product = novaidGetProductByRef(ref);\n if (product && !novaidCart.some(item => item.ref === ref)) {\n novaidCart.push(product);\n novaidSaveState();\n novaidUpdateCart();\n novaidUpdateAllCounts();\n novaidShowNotification('\u2713 Produit ajout\u00e9 au panier');\n }\n }\n\n function novaidAddSpareToCart(event, ref, name, price) {\n event.stopPropagation();\n const spare = { ref, name, price, isSpare: true };\n if (!novaidCart.some(item => item.ref === ref)) {\n novaidCart.push(spare);\n novaidSaveState();\n novaidUpdateCart();\n novaidUpdateAllCounts();\n novaidShowNotification('\u2713 Pi\u00e8ce ajout\u00e9e au panier');\n }\n }\n\n function novaidRemoveFromCart(ref) {\n novaidCart = novaidCart.filter(item => item.ref !== ref);\n novaidSaveState();\n novaidUpdateCart();\n novaidUpdateAllCounts();\n }\n\n function novaidClearCart() {\n if (confirm('Vider le panier ?')) {\n novaidCart = [];\n novaidSaveState();\n novaidUpdateCart();\n novaidUpdateAllCounts();\n }\n }\n\n function novaidUpdateCart() {\n const cartBody = document.getElementById('novaidCartBody');\n const cartFooter = document.getElementById('novaidCartFooter');\n \n if (novaidCart.length === 0) {\n cartBody.innerHTML = '<div class=\"novaid-empty-state\"><div class=\"novaid-empty-state-icon\">\ud83d\uded2<\/div><p>Votre panier est vide<\/p><\/div>';\n cartFooter.style.display = 'none';\n } else {\n cartBody.innerHTML = novaidCart.map(item => `\n <div class=\"novaid-cart-item\">\n <img decoding=\"async\" src=\"${item.picture_url || 'https:\/\/via.placeholder.com\/80'}\" class=\"novaid-cart-item-image\" onerror=\"this.src='https:\/\/via.placeholder.com\/80'\">\n <div class=\"novaid-cart-item-info\">\n <div class=\"novaid-cart-item-title\">${item.name}<\/div>\n <div class=\"novaid-cart-item-ref\">${item.ref}<\/div>\n <div class=\"novaid-cart-item-price\">${novaidFormatPrice(item.price)}<\/div>\n <\/div>\n <button class=\"novaid-cart-item-remove\" onclick=\"novaidRemoveFromCart('${item.ref}')\">\u00d7<\/button>\n <\/div>\n `).join('');\n \n const total = novaidCart.reduce((sum, item) => sum + (item.price || 0), 0);\n document.getElementById('novaidCartTotal').textContent = novaidFormatPrice(total);\n cartFooter.style.display = 'block';\n }\n }\n\n function novaidToggleFavorite(event, ref) {\n event.stopPropagation();\n const product = novaidGetProductByRef(ref);\n if (!product) return;\n \n const index = novaidFavorites.findIndex(item => item.ref === ref);\n if (index >= 0) {\n novaidFavorites.splice(index, 1);\n novaidShowNotification('\u2764\ufe0f Retir\u00e9 des favoris');\n } else {\n novaidFavorites.push(product);\n novaidShowNotification('\u2764\ufe0f Ajout\u00e9 aux favoris');\n }\n novaidSaveState();\n novaidUpdateAllCounts();\n novaidDisplayProducts();\n }\n\n function novaidOpenFavorites() {\n document.getElementById('novaidFavoritesModal').classList.add('active');\n novaidUpdateFavorites();\n }\n\n function novaidCloseFavorites() {\n document.getElementById('novaidFavoritesModal').classList.remove('active');\n }\n\n function novaidUpdateFavorites() {\n const favBody = document.getElementById('novaidFavoritesBody');\n \n if (novaidFavorites.length === 0) {\n favBody.innerHTML = '<div class=\"novaid-empty-state\"><div class=\"novaid-empty-state-icon\">\u2764\ufe0f<\/div><p>Aucun favori<\/p><\/div>';\n } else {\n favBody.innerHTML = '<div class=\"novaid-products-grid\">' + \n novaidFavorites.map(product => novaidCreateProductCard(product).outerHTML).join('') + \n '<\/div>';\n }\n }\n\n function novaidToggleComparison(event, ref) {\n event.stopPropagation();\n const product = novaidGetProductByRef(ref);\n if (!product) return;\n \n const index = novaidComparison.findIndex(item => item.ref === ref);\n if (index >= 0) {\n novaidComparison.splice(index, 1);\n novaidShowNotification('\u2696\ufe0f Retir\u00e9 de la comparaison');\n } else {\n if (novaidComparison.length >= 4) {\n novaidShowNotification('\u26a0\ufe0f Maximum 4 produits');\n return;\n }\n novaidComparison.push(product);\n novaidShowNotification('\u2696\ufe0f Ajout\u00e9 \u00e0 la comparaison');\n }\n novaidSaveState();\n novaidUpdateAllCounts();\n novaidDisplayProducts();\n }\n\n function novaidOpenComparison() {\n document.getElementById('novaidComparisonModal').classList.add('active');\n novaidUpdateComparison();\n }\n\n function novaidCloseComparison() {\n document.getElementById('novaidComparisonModal').classList.remove('active');\n }\n\n function novaidUpdateComparison() {\n const compBody = document.getElementById('novaidComparisonBody');\n \n if (novaidComparison.length === 0) {\n compBody.innerHTML = '<div class=\"novaid-empty-state\"><div class=\"novaid-empty-state-icon\">\u2696\ufe0f<\/div><p>S\u00e9lectionnez des produits<\/p><\/div>';\n } else {\n compBody.innerHTML = `\n <table style=\"width: 100%; border-collapse: collapse;\">\n <thead>\n <tr>\n <th style=\"padding: 1rem; background: #f8fafc; text-align: left;\">Caract\u00e9ristique<\/th>\n ${novaidComparison.map(p => `<th style=\"padding: 1rem; background: #f8fafc;\">${p.name}<\/th>`).join('')}\n <\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td style=\"padding: 1rem; border-bottom: 1px solid #e0e6ed;\"><strong>Prix<\/strong><\/td>\n ${novaidComparison.map(p => `<td style=\"padding: 1rem; border-bottom: 1px solid #e0e6ed; text-align: center;\"><strong>${novaidFormatPrice(p.price)}<\/strong><\/td>`).join('')}\n <\/tr>\n <tr>\n <td style=\"padding: 1rem; border-bottom: 1px solid #e0e6ed;\">Largeur max<\/td>\n ${novaidComparison.map(p => `<td style=\"padding: 1rem; border-bottom: 1px solid #e0e6ed; text-align: center;\">${p.specs.max_width || '-'} mm<\/td>`).join('')}\n <\/tr>\n <tr>\n <td style=\"padding: 1rem; border-bottom: 1px solid #e0e6ed;\">Diam\u00e8tre max<\/td>\n ${novaidComparison.map(p => `<td style=\"padding: 1rem; border-bottom: 1px solid #e0e6ed; text-align: center;\">${p.specs.max_diameter || '-'} mm<\/td>`).join('')}\n <\/tr>\n <tr>\n <td style=\"padding: 1rem; border-bottom: 1px solid #e0e6ed;\">Poids max<\/td>\n ${novaidComparison.map(p => `<td style=\"padding: 1rem; border-bottom: 1px solid #e0e6ed; text-align: center;\">${p.specs.max_weight || '-'} kg<\/td>`).join('')}\n <\/tr>\n <tr>\n <td style=\"padding: 1rem;\">Pi\u00e8ces d\u00e9tach\u00e9es<\/td>\n ${novaidComparison.map(p => `<td style=\"padding: 1rem; text-align: center;\">${p.spares ? p.spares.length : 0}<\/td>`).join('')}\n <\/tr>\n <\/tbody>\n <\/table>\n `;\n }\n }\n\n function novaidToggleFilters() {\n document.getElementById('novaidFilterPanel').classList.toggle('active');\n }\n\n function novaidApplyFilters() {\n novaidFilters.priceMin = parseFloat(document.getElementById('novaidPriceMin').value) || null;\n novaidFilters.priceMax = parseFloat(document.getElementById('novaidPriceMax').value) || null;\n novaidFilters.withSpares = document.getElementById('novaidFilterSpares').checked;\n \n novaidDisplayProducts();\n novaidToggleFilters();\n }\n\n function novaidClearFilters() {\n document.getElementById('novaidPriceMin').value = '';\n document.getElementById('novaidPriceMax').value = '';\n document.getElementById('novaidFilterSpares').checked = false;\n \n novaidFilters = {\n priceMin: null,\n priceMax: null,\n withSpares: false\n };\n \n novaidDisplayProducts();\n }\n\n function novaidExportPDF() {\n novaidShowNotification('\ud83d\udcc4 Pr\u00e9paration du PDF...');\n window.print();\n }\n\n function novaidRequestQuote() {\n const items = novaidCart.map(item => `- ${item.name} (${item.ref}) - ${novaidFormatPrice(item.price)}`).join('\\\\n');\n const total = novaidCart.reduce((sum, item) => sum + (item.price || 0), 0);\n const subject = 'Demande de devis - Novaid';\n const body = `Bonjour,\\\\n\\\\nJe souhaite obtenir un devis pour les produits suivants :\\\\n\\\\n${items}\\\\n\\\\nTotal indicatif : ${novaidFormatPrice(total)}\\\\n\\\\nCordialement`;\n window.location.href = `mailto:marc@novaid.fr?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;\n }\n\n function novaidUpdateAllCounts() {\n const cartCount = novaidCart.length;\n const favCount = novaidFavorites.length;\n const compCount = novaidComparison.length;\n \n document.getElementById('novaidCartCount').textContent = cartCount;\n document.getElementById('novaidFavoritesCount').textContent = favCount;\n document.getElementById('novaidCompareCount').textContent = compCount;\n document.getElementById('novaidFloatingCartCount').textContent = cartCount;\n document.getElementById('novaidFloatingFavCount').textContent = favCount;\n document.getElementById('novaidFloatingCompareCount').textContent = compCount;\n }\n\n function novaidShowNotification(message) {\n const notification = document.createElement('div');\n notification.style.cssText = `\n position: fixed;\n top: 100px;\n right: 30px;\n background: var(--novaid-orange);\n color: white;\n padding: 15px 25px;\n border-radius: 8px;\n box-shadow: var(--shadow-lg);\n z-index: 9999;\n animation: slideInUp 0.3s ease-out;\n font-weight: 600;\n `;\n notification.textContent = message;\n document.body.appendChild(notification);\n \n setTimeout(() => {\n notification.style.opacity = '0';\n notification.style.transform = 'translateX(400px)';\n notification.style.transition = 'all 0.3s';\n setTimeout(() => notification.remove(), 300);\n }, 2000);\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Novaid \u2013 Accessoires pour l’\u00c9tiquetage et la Tra\u00e7abilit\u00e9 \ud83d\udd0d \u2764\ufe0f 0 \u2696\ufe0f 0 \ud83d\uded2 0 \u25a6 \u2630 Toutes les cat\u00e9gories Tri par d\u00e9fautPrix croissantPrix d\u00e9croissantNom A-Z \ud83c\udfaf Filtres Avanc\u00e9s \ud83c\udfaf Filtres \u00d7 \ud83d\udcb0 Plage de Prix \ud83d\udd27 Pi\u00e8ces D\u00e9tach\u00e9es Avec pi\u00e8ces disponibles R\u00e9initialiser Appliquer \ud83d\uded2 Mon Panier \u00d7 \ud83d\uded2 Votre panier est vide Total HT […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-106","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/novaid.fr\/index.php\/wp-json\/wp\/v2\/pages\/106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/novaid.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/novaid.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/novaid.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/novaid.fr\/index.php\/wp-json\/wp\/v2\/comments?post=106"}],"version-history":[{"count":10,"href":"https:\/\/novaid.fr\/index.php\/wp-json\/wp\/v2\/pages\/106\/revisions"}],"predecessor-version":[{"id":10169,"href":"https:\/\/novaid.fr\/index.php\/wp-json\/wp\/v2\/pages\/106\/revisions\/10169"}],"wp:attachment":[{"href":"https:\/\/novaid.fr\/index.php\/wp-json\/wp\/v2\/media?parent=106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}