{"id":276079,"date":"2026-02-09T15:56:36","date_gmt":"2026-02-09T20:56:36","guid":{"rendered":"https:\/\/cheeesebox.ca\/?page_id=276079"},"modified":"2026-04-15T08:56:44","modified_gmt":"2026-04-15T12:56:44","slug":"options-photobooth-montreal","status":"publish","type":"page","link":"https:\/\/cheeesebox.ca\/fr\/options-photobooth-montreal\/","title":{"rendered":"Options Photobooth et Th\u00e8mes IA Personnalis\u00e9s | Location CheeeseBOX Canada"},"content":{"rendered":"<p>[et_pb_section admin_label=\u00a0\u00bbsection\u00a0\u00bb]<br \/>\n\t\t\t[et_pb_row admin_label=\u00a0\u00bbrow\u00a0\u00bb]<br \/>\n\t\t\t\t[et_pb_column type=\u00a0\u00bb4_4&Prime;][et_pb_text admin_label=\u00a0\u00bbText\u00a0\u00bb]    \r\n    <div id=\"cbx-op-root\" class=\"cbx-op-root\">\r\n      <!-- Critical CSS -->\r\n      <style>\r\n        \/* ========================================\r\n           CSS CUSTOM PROPERTIES - BRAND COLORS\r\n           ======================================== *\/\r\n        :root {\r\n          --cbx-primary: #0c1e8a;\r\n          --cbx-secondary: #ffb702;\r\n          --cbx-primary-rgb: 12, 30, 138;\r\n          --cbx-secondary-rgb: 255, 183, 2;\r\n          --cbx-primary-light: rgba(12, 30, 138, 0.08);\r\n          --cbx-primary-medium: rgba(12, 30, 138, 0.15);\r\n          --cbx-primary-dark: #091666;\r\n          --cbx-secondary-light: rgba(255, 183, 2, 0.1);\r\n          --cbx-secondary-medium: rgba(255, 183, 2, 0.2);\r\n          --cbx-white: #ffffff;\r\n          --cbx-light: #f8f9fa;\r\n          --cbx-gray-100: #f1f3f5;\r\n          --cbx-gray-200: #e9ecef;\r\n          --cbx-gray-300: #dee2e6;\r\n          --cbx-gray-400: #ced4da;\r\n          --cbx-gray-500: #adb5bd;\r\n          --cbx-gray-600: #6c757d;\r\n          --cbx-gray-700: #495057;\r\n          --cbx-gray-800: #343a40;\r\n          --cbx-dark: #1a1a1a;\r\n          --cbx-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n          --cbx-radius-sm: 4px;\r\n          --cbx-radius-md: 8px;\r\n          --cbx-radius-lg: 12px;\r\n          --cbx-radius-xl: 16px;\r\n          --cbx-radius-2xl: 20px;\r\n          --cbx-radius-full: 9999px;\r\n          --cbx-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);\r\n          --cbx-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);\r\n          --cbx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);\r\n          --cbx-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);\r\n          --cbx-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);\r\n          --cbx-shadow-primary: 0 4px 14px rgba(12, 30, 138, 0.25);\r\n          --cbx-shadow-secondary: 0 4px 14px rgba(255, 183, 2, 0.25);\r\n          --cbx-transition-fast: 150ms ease;\r\n          --cbx-transition-base: 250ms ease;\r\n          --cbx-transition-slow: 350ms ease;\r\n          --cbx-transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);\r\n          --cbx-container-max: 1200px;\r\n          --cbx-section-padding: 80px;\r\n        }\r\n        \r\n        * { margin: 0; padding: 0; box-sizing: border-box; }\r\n        \r\n        .cbx-op-root {\r\n          position: relative;\r\n          width: 100%;\r\n          min-height: 100vh;\r\n          font-family: var(--cbx-font-family);\r\n          color: var(--cbx-dark);\r\n          overflow-x: hidden;\r\n          background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);\r\n        }\r\n        \r\n        .cbx-op-background {\r\n          position: fixed;\r\n          top: 0;\r\n          left: 0;\r\n          width: 100%;\r\n          height: 100vh;\r\n          z-index: 1;\r\n          pointer-events: none;\r\n        }\r\n        \r\n        .cbx-op-container {\r\n          width: 100%;\r\n          max-width: var(--cbx-container-max);\r\n          margin: 0 auto;\r\n          padding: 0 24px;\r\n        }\r\n        \r\n        .cbx-op-section {\r\n          padding: var(--cbx-section-padding) 0;\r\n          position: relative;\r\n          z-index: 10;\r\n        }\r\n        \r\n        .cbx-op-section--gray-bg {\r\n          background: linear-gradient(180deg, var(--cbx-gray-100) 0%, var(--cbx-white) 100%);\r\n        }\r\n        \r\n        .cbx-op-section-header {\r\n          text-align: center;\r\n          margin-bottom: 48px;\r\n        }\r\n        \r\n        .cbx-op-section-title {\r\n          font-size: 36px;\r\n          font-weight: 800;\r\n          color: var(--cbx-primary);\r\n          margin-bottom: 16px;\r\n          position: relative;\r\n          display: inline-block;\r\n          letter-spacing: -0.5px;\r\n          font-family: 'objectivity 5', Helvetica, Arial, Lucida, sans-serif;\r\n          color: #3942EF;\r\n        }\r\n        \r\n        .cbx-op-section-title::after {\r\n          content: '';\r\n          position: absolute;\r\n          bottom: -8px;\r\n          left: 50%;\r\n          transform: translateX(-50%);\r\n          width: 60px;\r\n          height: 4px;\r\n          background: #ffb702;\r\n          border-radius: var(--cbx-radius-full);\r\n        }\r\n        \r\n        .cbx-op-section-subtitle {\r\n          font-size: 18px;\r\n          color: var(--cbx-gray-600);\r\n          max-width: 600px;\r\n          margin: 0 auto;\r\n          line-height: 1.7;\r\n        }\r\n\r\n        \/* ========================================\r\n           HERO SECTION - CREATIVE DESIGN\r\n           ======================================== *\/\r\n        .cbx-op-hero {\r\n          padding: 100px 24px 120px;\r\n          position: relative;\r\n          overflow: hidden;\r\n          background: linear-gradient(135deg, var(--cbx-primary) 0%, var(--cbx-primary-dark) 100%);\r\n        }\r\n        \r\n        .cbx-op-hero::before {\r\n          content: '';\r\n          position: absolute;\r\n          top: -50%;\r\n          right: -20%;\r\n          width: 80%;\r\n          height: 200%;\r\n          background: radial-gradient(ellipse, var(--cbx-secondary) 0%, transparent 60%);\r\n          opacity: 0.15;\r\n          animation: heroGlow 8s ease-in-out infinite;\r\n        }\r\n        \r\n        .cbx-op-hero::after {\r\n          content: '';\r\n          position: absolute;\r\n          bottom: 0;\r\n          left: 0;\r\n          right: 0;\r\n          height: 150px;\r\n          background: linear-gradient(to top, var(--cbx-gray-100), transparent);\r\n        }\r\n        \r\n        @keyframes heroGlow {\r\n          0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.15; }\r\n          50% { transform: scale(1.1) rotate(5deg); opacity: 0.2; }\r\n        }\r\n        \r\n        .cbx-op-hero-content {\r\n          text-align: center;\r\n          margin-bottom: 60px;\r\n          position: relative;\r\n          z-index: 2;\r\n        }\r\n        \r\n        .cbx-op-hero-badge {\r\n          display: inline-flex;\r\n          align-items: center;\r\n          gap: 8px;\r\n          padding: 8px 20px;\r\n          background: rgba(255, 255, 255, 0.15);\r\n          backdrop-filter: blur(10px);\r\n          border-radius: var(--cbx-radius-full);\r\n          color: var(--cbx-secondary);\r\n          font-size: 14px;\r\n          font-weight: 600;\r\n          margin-bottom: 24px;\r\n          border: 1px solid rgba(255, 255, 255, 0.2);\r\n        }\r\n        \r\n        .cbx-op-hero-title {\r\n          font-size: 52px;\r\n          font-weight: 800;\r\n          color: var(--cbx-white);\r\n          margin-bottom: 20px;\r\n          line-height: 1.1;\r\n          text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);\r\n        }\r\n        \r\n        .cbx-op-hero-title span {\r\n          color: var(--cbx-secondary);\r\n        }\r\n        \r\n        .cbx-op-hero-subtitle {\r\n          font-size: 20px;\r\n          color: rgba(255, 255, 255, 0.85);\r\n          max-width: 600px;\r\n          margin: 0 auto;\r\n          line-height: 1.6;\r\n        }\r\n        \r\n        .cbx-op-hero-cta {\r\n          display: inline-flex;\r\n          align-items: center;\r\n          gap: 10px;\r\n          margin-top: 32px;\r\n          padding: 16px 32px;\r\n          background: var(--cbx-secondary);\r\n          color: var(--cbx-dark);\r\n          font-size: 16px;\r\n          font-weight: 600;\r\n          text-decoration: none;\r\n          border-radius: var(--cbx-radius-full);\r\n          transition: all var(--cbx-transition-base);\r\n          box-shadow: 0 4px 20px rgba(255, 183, 2, 0.3);\r\n        }\r\n        \r\n        .cbx-op-hero-cta:hover {\r\n          background: #e5a502;\r\n          transform: translateY(-3px);\r\n          box-shadow: 0 8px 30px rgba(255, 183, 2, 0.4);\r\n        }\r\n        \r\n        .cbx-op-hero-cta svg {\r\n          transition: transform var(--cbx-transition-fast);\r\n        }\r\n        \r\n        .cbx-op-hero-cta:hover svg {\r\n          transform: translateX(4px);\r\n        }\r\n        \r\n        \/* Creative Hero Grid - Bento Style *\/\r\n        .cbx-op-hero-grid {\r\n          display: grid;\r\n          grid-template-columns: repeat(12, 1fr);\r\n          grid-template-rows: auto auto;\r\n          gap: 20px;\r\n          max-width: 1100px;\r\n          margin: 0 auto;\r\n          position: relative;\r\n          z-index: 2;\r\n        }\r\n        \r\n        .cbx-op-hero-card {\r\n          background: var(--cbx-white);\r\n          border-radius: var(--cbx-radius-2xl);\r\n          overflow: hidden;\r\n          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);\r\n          transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n          cursor: pointer;\r\n          text-decoration: none;\r\n          display: flex;\r\n          flex-direction: column;\r\n          position: relative;\r\n        }\r\n        \r\n        .cbx-op-hero-card:hover {\r\n          transform: translateY(-12px) scale(1.02);\r\n          box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);\r\n        }\r\n        \r\n        \/* Card positioning - Bento layout *\/\r\n        .cbx-op-hero-card:nth-child(1) {\r\n          grid-column: 1 \/ 7;\r\n          grid-row: 1;\r\n        }\r\n        \r\n        .cbx-op-hero-card:nth-child(2) {\r\n          grid-column: 7 \/ 13;\r\n          grid-row: 1;\r\n        }\r\n        \r\n        .cbx-op-hero-card:nth-child(3) {\r\n          grid-column: 1 \/ 5;\r\n          grid-row: 2;\r\n        }\r\n        \r\n        .cbx-op-hero-card:nth-child(4) {\r\n          grid-column: 5 \/ 13;\r\n          grid-row: 2;\r\n        }\r\n        \r\n        .cbx-op-hero-card-image {\r\n          height: 200px;\r\n          overflow: hidden;\r\n          position: relative;\r\n        }\r\n        \r\n        .cbx-op-hero-card:nth-child(4) .cbx-op-hero-card-image {\r\n          height: 240px;\r\n        }\r\n        \r\n        .cbx-op-hero-card-image::after {\r\n          content: '';\r\n          position: absolute;\r\n          inset: 0;\r\n          background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 60%);\r\n          opacity: 0;\r\n          transition: opacity var(--cbx-transition-base);\r\n        }\r\n        \r\n        .cbx-op-hero-card:hover .cbx-op-hero-card-image::after {\r\n          opacity: 1;\r\n        }\r\n        \r\n        .cbx-op-hero-card-image img {\r\n          width: 100%;\r\n          height: 100%;\r\n          object-fit: cover;\r\n          transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n        }\r\n        \r\n        .cbx-op-hero-card:hover .cbx-op-hero-card-image img {\r\n          transform: scale(1.1);\r\n        }\r\n        \r\n        .cbx-op-hero-card-content {\r\n          padding: 24px;\r\n          position: relative;\r\n          flex-grow: 1;\r\n          display: flex;\r\n          flex-direction: column;\r\n        }\r\n        \r\n        .cbx-op-hero-card-icon {\r\n          position: absolute;\r\n          top: -30px;\r\n          right: 24px;\r\n          width: 60px;\r\n          height: 60px;\r\n          background: linear-gradient(135deg, var(--cbx-primary), var(--cbx-primary-dark));\r\n          border-radius: var(--cbx-radius-lg);\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          color: var(--cbx-white);\r\n          box-shadow: var(--cbx-shadow-primary);\r\n          transition: transform var(--cbx-transition-bounce);\r\n        }\r\n        \r\n        .cbx-op-hero-card:hover .cbx-op-hero-card-icon {\r\n          transform: scale(1.1) rotate(-5deg);\r\n        }\r\n        \r\n        .cbx-op-hero-card h3 {\r\n          font-size: 22px;\r\n          font-weight: 700;\r\n          color: var(--cbx-primary);\r\n          margin-bottom: 8px;\r\n        }\r\n        \r\n        .cbx-op-hero-card p {\r\n          font-size: 15px;\r\n          color: var(--cbx-gray-600);\r\n          line-height: 1.5;\r\n          flex-grow: 1;\r\n        }\r\n        \r\n        .cbx-op-hero-card-arrow {\r\n          display: inline-flex;\r\n          align-items: center;\r\n          gap: 6px;\r\n          margin-top: 16px;\r\n          color: var(--cbx-primary);\r\n          font-size: 14px;\r\n          font-weight: 600;\r\n          transition: gap var(--cbx-transition-fast);\r\n        }\r\n        \r\n        .cbx-op-hero-card:hover .cbx-op-hero-card-arrow {\r\n          gap: 12px;\r\n        }\r\n        \r\n        \/* Floating decorative elements *\/\r\n        .cbx-op-hero-float {\r\n          position: absolute;\r\n          border-radius: 50%;\r\n          background: var(--cbx-secondary);\r\n          opacity: 0.3;\r\n          animation: float 6s ease-in-out infinite;\r\n        }\r\n        \r\n        .cbx-op-hero-float:nth-child(1) {\r\n          width: 20px;\r\n          height: 20px;\r\n          top: 20%;\r\n          left: 10%;\r\n          animation-delay: 0s;\r\n        }\r\n        \r\n        .cbx-op-hero-float:nth-child(2) {\r\n          width: 30px;\r\n          height: 30px;\r\n          top: 60%;\r\n          right: 15%;\r\n          animation-delay: 2s;\r\n        }\r\n        \r\n        .cbx-op-hero-float:nth-child(3) {\r\n          width: 15px;\r\n          height: 15px;\r\n          bottom: 30%;\r\n          left: 20%;\r\n          animation-delay: 4s;\r\n        }\r\n        \r\n        @keyframes float {\r\n          0%, 100% { transform: translateY(0) rotate(0deg); }\r\n          50% { transform: translateY(-20px) rotate(180deg); }\r\n        }\r\n\r\n        \/* ========================================\r\n           GALLERY STYLES WITH LIGHTBOX\r\n           ======================================== *\/\r\n        .cbx-op-gallery {\r\n          margin-bottom: 40px;\r\n        }\r\n        \r\n        .cbx-op-gallery-grid {\r\n          display: grid;\r\n          grid-template-columns: repeat(3, 1fr);\r\n          gap: 16px;\r\n        }\r\n        \r\n        .cbx-op-gallery-item {\r\n          position: relative;\r\n          border-radius: var(--cbx-radius-lg);\r\n          overflow: hidden;\r\n          aspect-ratio: 4\/3;\r\n          cursor: zoom-in;\r\n          background: var(--cbx-gray-200);\r\n        }\r\n        \r\n        .cbx-op-gallery-item::before {\r\n          content: '';\r\n          position: absolute;\r\n          inset: 0;\r\n          background: linear-gradient(135deg, var(--cbx-primary) 0%, var(--cbx-primary-dark) 100%);\r\n          opacity: 0;\r\n          transition: opacity var(--cbx-transition-base);\r\n          z-index: 1;\r\n        }\r\n        \r\n        .cbx-op-gallery-item::after {\r\n          content: '';\r\n          position: absolute;\r\n          top: 50%;\r\n          left: 50%;\r\n          width: 50px;\r\n          height: 50px;\r\n          background: var(--cbx-white);\r\n          border-radius: 50%;\r\n          transform: translate(-50%, -50%) scale(0);\r\n          transition: transform var(--cbx-transition-bounce);\r\n          z-index: 2;\r\n          background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230c1e8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C\/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C\/line%3E%3C\/svg%3E\");\r\n          background-repeat: no-repeat;\r\n          background-position: center;\r\n        }\r\n        \r\n        .cbx-op-gallery-item:hover::before {\r\n          opacity: 0.3;\r\n        }\r\n        \r\n        .cbx-op-gallery-item:hover::after {\r\n          transform: translate(-50%, -50%) scale(1);\r\n        }\r\n        \r\n        .cbx-op-gallery-item img {\r\n          width: 100%;\r\n          height: 100%;\r\n          object-fit: cover;\r\n          transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n        }\r\n        \r\n        .cbx-op-gallery-item:hover img {\r\n          transform: scale(1.1);\r\n        }\r\n        \r\n        .cbx-op-gallery-item.hidden {\r\n          display: none;\r\n        }\r\n        \r\n        .cbx-op-load-more {\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          gap: 8px;\r\n          margin: 32px auto 0;\r\n          padding: 14px 32px;\r\n          background: var(--cbx-white);\r\n          color: var(--cbx-primary);\r\n          border: 2px solid var(--cbx-primary);\r\n          border-radius: var(--cbx-radius-full);\r\n          font-size: 15px;\r\n          font-weight: 600;\r\n          cursor: pointer;\r\n          transition: all var(--cbx-transition-fast);\r\n          box-shadow: var(--cbx-shadow-sm);\r\n        }\r\n        \r\n        .cbx-op-load-more:hover {\r\n          background: var(--cbx-primary);\r\n          color: var(--cbx-white);\r\n          transform: translateY(-2px);\r\n          box-shadow: var(--cbx-shadow-primary);\r\n        }\r\n        \r\n        .cbx-op-load-more svg {\r\n          transition: transform var(--cbx-transition-fast);\r\n        }\r\n        \r\n        .cbx-op-load-more:hover svg {\r\n          transform: rotate(90deg);\r\n        }\r\n\r\n        \/* ========================================\r\n           LIGHTBOX MODAL - IMPROVED\r\n           ======================================== *\/\r\n        .cbx-op-lightbox {\r\n          position: fixed;\r\n          inset: 0;\r\n          background: rgba(0, 0, 0, 0.95);\r\n          z-index: 2000;\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          opacity: 0;\r\n          visibility: hidden;\r\n          transition: all var(--cbx-transition-base);\r\n          touch-action: pan-x pan-y;\r\n        }\r\n        \r\n        .cbx-op-lightbox.open {\r\n          opacity: 1;\r\n          visibility: visible;\r\n        }\r\n        \r\n        .cbx-op-lightbox-content {\r\n          position: relative;\r\n          max-width: 90vw;\r\n          max-height: 90vh;\r\n          width: 100%;\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n        }\r\n        \r\n        .cbx-op-lightbox-img {\r\n          max-width: 100%;\r\n          max-height: 80vh;\r\n          object-fit: contain;\r\n          border-radius: var(--cbx-radius-lg);\r\n          box-shadow: var(--cbx-shadow-xl);\r\n          user-select: none;\r\n          -webkit-user-drag: none;\r\n        }\r\n        \r\n        .cbx-op-lightbox-close {\r\n          position: fixed;\r\n          top: 20px;\r\n          right: 20px;\r\n          width: 56px;\r\n          height: 56px;\r\n          background: var(--cbx-white);\r\n          border: none;\r\n          border-radius: 50%;\r\n          cursor: pointer;\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          color: var(--cbx-dark);\r\n          transition: all var(--cbx-transition-fast);\r\n          box-shadow: var(--cbx-shadow-lg);\r\n          z-index: 2010;\r\n        }\r\n        \r\n        .cbx-op-lightbox-close:hover {\r\n          background: var(--cbx-secondary);\r\n          transform: rotate(90deg) scale(1.1);\r\n        }\r\n        \r\n        .cbx-op-lightbox-close svg {\r\n          width: 24px;\r\n          height: 24px;\r\n        }\r\n        \r\n        .cbx-op-lightbox-nav {\r\n          position: fixed;\r\n          top: 50%;\r\n          transform: translateY(-50%);\r\n          width: 56px;\r\n          height: 56px;\r\n          background: var(--cbx-white);\r\n          border: none;\r\n          border-radius: 50%;\r\n          cursor: pointer;\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          color: var(--cbx-primary);\r\n          transition: all var(--cbx-transition-fast);\r\n          box-shadow: var(--cbx-shadow-lg);\r\n          z-index: 2010;\r\n        }\r\n        \r\n        .cbx-op-lightbox-nav:hover {\r\n          background: var(--cbx-primary);\r\n          color: var(--cbx-white);\r\n          transform: translateY(-50%) scale(1.1);\r\n        }\r\n        \r\n        .cbx-op-lightbox-nav:active {\r\n          transform: translateY(-50%) scale(0.95);\r\n        }\r\n        \r\n        .cbx-op-lightbox-prev {\r\n          left: 20px;\r\n        }\r\n        \r\n        .cbx-op-lightbox-next {\r\n          right: 20px;\r\n        }\r\n        \r\n        .cbx-op-lightbox-counter {\r\n          position: fixed;\r\n          bottom: 30px;\r\n          left: 50%;\r\n          transform: translateX(-50%);\r\n          color: var(--cbx-white);\r\n          font-size: 15px;\r\n          font-weight: 500;\r\n          opacity: 0.8;\r\n          background: rgba(0, 0, 0, 0.5);\r\n          padding: 8px 20px;\r\n          border-radius: var(--cbx-radius-full);\r\n          z-index: 2010;\r\n        }\r\n        \r\n        \/* Lightbox swipe indicator *\/\r\n        .cbx-op-lightbox-swipe-hint {\r\n          position: fixed;\r\n          bottom: 80px;\r\n          left: 50%;\r\n          transform: translateX(-50%);\r\n          color: var(--cbx-white);\r\n          font-size: 13px;\r\n          opacity: 0.6;\r\n          display: flex;\r\n          align-items: center;\r\n          gap: 8px;\r\n          z-index: 2010;\r\n        }\r\n\r\n        \/* ========================================\r\n           PROCESS STEPS\r\n           ======================================== *\/\r\n        .cbx-op-process-steps {\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          gap: 20px;\r\n          flex-wrap: wrap;\r\n          margin-top: 48px;\r\n        }\r\n        \r\n        .cbx-op-step {\r\n          display: flex;\r\n          align-items: center;\r\n          gap: 16px;\r\n          background: var(--cbx-white);\r\n          padding: 20px 24px;\r\n          border-radius: var(--cbx-radius-xl);\r\n          box-shadow: var(--cbx-shadow-sm);\r\n          transition: all var(--cbx-transition-base);\r\n          border: 2px solid transparent;\r\n          position: relative;\r\n          overflow: hidden;\r\n        }\r\n        \r\n        .cbx-op-step::before {\r\n          content: '';\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          width: 4px;\r\n          height: 100%;\r\n          background: #ffb702;\r\n          transform: scaleY(0);\r\n          transition: transform var(--cbx-transition-base);\r\n        }\r\n        \r\n        .cbx-op-step:hover {\r\n          transform: translateY(-4px);\r\n          box-shadow: var(--cbx-shadow-md);\r\n          border-color: var(--cbx-primary-light);\r\n        }\r\n        \r\n        .cbx-op-step:hover::before {\r\n          transform: scaleY(1);\r\n        }\r\n        \r\n        .cbx-op-step-number {\r\n          width: 44px;\r\n          height: 44px;\r\n          background: linear-gradient(135deg, var(--cbx-primary) 0%, var(--cbx-primary-dark) 100%);\r\n          color: var(--cbx-white);\r\n          border-radius: 50%;\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          font-weight: 700;\r\n          font-size: 18px;\r\n          flex-shrink: 0;\r\n          box-shadow: var(--cbx-shadow-primary);\r\n        }\r\n        \r\n        .cbx-op-step-content h4 {\r\n          font-size: 15px;\r\n          font-weight: 600;\r\n          color: var(--cbx-dark);\r\n          margin-bottom: 4px;\r\n        }\r\n        \r\n        .cbx-op-step-content p {\r\n          font-size: 13px;\r\n          color: var(--cbx-gray-600);\r\n        }\r\n        \r\n        .cbx-op-step-arrow {\r\n          color: var(--cbx-secondary);\r\n          font-size: 28px;\r\n          font-weight: 700;\r\n        }\r\n\r\n        \/* ========================================\r\n           FEATURES LIST\r\n           ======================================== *\/\r\n        .cbx-op-features-list {\r\n          display: grid;\r\n          grid-template-columns: repeat(3, 1fr);\r\n          gap: 24px;\r\n          margin-top: 48px;\r\n        }\r\n        \r\n        .cbx-op-feature-item {\r\n          display: flex;\r\n          align-items: flex-start;\r\n          gap: 20px;\r\n          background: var(--cbx-white);\r\n          padding: 28px;\r\n          border-radius: var(--cbx-radius-xl);\r\n          box-shadow: var(--cbx-shadow-sm);\r\n          transition: all var(--cbx-transition-base);\r\n          border: 2px solid transparent;\r\n          position: relative;\r\n          overflow: hidden;\r\n        }\r\n        \r\n        .cbx-op-feature-item::after {\r\n          content: '';\r\n          position: absolute;\r\n          bottom: 0;\r\n          left: 0;\r\n          right: 0;\r\n          height: 4px;\r\n          background: #ffb702;\r\n          transform: scaleX(0);\r\n          transition: transform var(--cbx-transition-base);\r\n        }\r\n        \r\n        .cbx-op-feature-item:hover {\r\n          transform: translateY(-6px);\r\n          box-shadow: var(--cbx-shadow-lg);\r\n          border-color: var(--cbx-primary-light);\r\n        }\r\n        \r\n        .cbx-op-feature-item:hover::after {\r\n          transform: scaleX(1);\r\n        }\r\n        \r\n        .cbx-op-feature-icon {\r\n          width: 56px;\r\n          height: 56px;\r\n          background: linear-gradient(135deg, var(--cbx-primary-light) 0%, var(--cbx-secondary-light) 100%);\r\n          border-radius: var(--cbx-radius-lg);\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          flex-shrink: 0;\r\n          color: var(--cbx-primary);\r\n        }\r\n        \r\n        .cbx-op-feature-content h4 {\r\n          font-size: 17px;\r\n          font-weight: 600;\r\n          color: var(--cbx-dark);\r\n          margin-bottom: 6px;\r\n        }\r\n        \r\n        .cbx-op-feature-content p {\r\n          font-size: 14px;\r\n          color: var(--cbx-gray-600);\r\n          line-height: 1.6;\r\n        }\r\n\r\n        \/* ========================================\r\n           BACKDROPS SECTION\r\n           ======================================== *\/\r\n        .cbx-op-backdrops-grid {\r\n          display: grid;\r\n          grid-template-columns: repeat(3, 1fr);\r\n          gap: 32px;\r\n        }\r\n        \r\n        .cbx-op-backdrop-card {\r\n          background: var(--cbx-white);\r\n          border-radius: var(--cbx-radius-2xl);\r\n          overflow: hidden;\r\n          box-shadow: var(--cbx-shadow-md);\r\n          transition: all var(--cbx-transition-base);\r\n        }\r\n        \r\n        .cbx-op-backdrop-card:hover {\r\n          transform: translateY(-10px);\r\n          box-shadow: var(--cbx-shadow-xl);\r\n        }\r\n        \r\n        .cbx-op-backdrop-card h3 {\r\n          font-size: 22px;\r\n          font-weight: 700;\r\n          color: var(--cbx-primary);\r\n          padding: 24px 24px 8px;\r\n        }\r\n        \r\n        .cbx-op-backdrop-card p {\r\n          font-size: 15px;\r\n          color: var(--cbx-gray-600);\r\n          padding: 5px 24px 8px;\r\n          line-height: 1.6;\r\n        }\r\n\r\n        \/* ========================================\r\n           COMPARISON SLIDER - FIXED\r\n           ======================================== *\/\r\n        .cbx-op-comparison-slider {\r\n          position: relative;\r\n          width: 100%;\r\n          height: 280px;\r\n          overflow: hidden;\r\n          cursor: ew-resize;\r\n          background: var(--cbx-gray-200);\r\n        }\r\n        \r\n        .cbx-op-comparison-img {\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          width: 100%;\r\n          height: 100%;\r\n          object-fit: cover;\r\n        }\r\n        \r\n        .cbx-op-comparison-img-before {\r\n          z-index: 1;\r\n          clip-path: inset(0 0 0 0);\r\n        }\r\n        \r\n        .cbx-op-comparison-img-after {\r\n          z-index: 2;\r\n          clip-path: inset(0 0 0 50%);\r\n        }\r\n        \r\n        .cbx-op-comparison-handle {\r\n          position: absolute;\r\n          width: 4px;\r\n          height: 100%;\r\n          background: var(--cbx-secondary);\r\n          left: 50%;\r\n          top: 0;\r\n          cursor: ew-resize;\r\n          z-index: 10;\r\n          transform: translateX(-50%);\r\n          box-shadow: 0 0 10px rgba(0,0,0,0.3);\r\n        }\r\n        \r\n        .cbx-op-comparison-handle::before {\r\n          content: '';\r\n          position: absolute;\r\n          width: 52px;\r\n          height: 52px;\r\n          background: var(--cbx-secondary);\r\n          border-radius: 50%;\r\n          top: 50%;\r\n          left: 50%;\r\n          transform: translate(-50%, -50%);\r\n          box-shadow: var(--cbx-shadow-lg);\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n        }\r\n        \r\n        .cbx-op-comparison-handle::after {\r\n          content: '\u2194';\r\n          position: absolute;\r\n          top: 50%;\r\n          left: 50%;\r\n          transform: translate(-50%, -50%);\r\n          font-size: 22px;\r\n          color: var(--cbx-dark);\r\n          font-weight: bold;\r\n          z-index: 1;\r\n        }\r\n        \r\n        .cbx-op-comparison-label {\r\n          position: absolute;\r\n          bottom: 16px;\r\n          padding: 8px 16px;\r\n          background: rgba(0, 0, 0, 0.7);\r\n          color: var(--cbx-white);\r\n          font-size: 13px;\r\n          font-weight: 600;\r\n          border-radius: var(--cbx-radius-md);\r\n          z-index: 5;\r\n        }\r\n        \r\n        .cbx-op-comparison-label-before {\r\n          left: 16px;\r\n        }\r\n        \r\n        .cbx-op-comparison-label-after {\r\n          right: 16px;\r\n        }\r\n\r\n        \/* ========================================\r\n           AI SECTION - IMPROVED GRID\r\n           ======================================== *\/\r\n        .cbx-op-ai-section {\r\n          background: linear-gradient(180deg, var(--cbx-primary-light) 0%, var(--cbx-white) 100%);\r\n          padding: var(--cbx-section-padding) 24px;\r\n          position: relative;\r\n        }\r\n        \r\n        .cbx-op-ai-section::before {\r\n          content: '';\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          right: 0;\r\n          height: 1px;\r\n          background: linear-gradient(90deg, transparent, var(--cbx-primary-medium), transparent);\r\n        }\r\n        \r\n        .cbx-op-ai-tabs {\r\n          display: flex;\r\n          justify-content: center;\r\n          gap: 10px;\r\n          margin-bottom: 48px;\r\n          flex-wrap: wrap;\r\n          position: relative;\r\n        }\r\n        \r\n        \/* Mobile tabs scroll container *\/\r\n        .cbx-op-ai-tabs-wrapper {\r\n          position: relative;\r\n        }\r\n        \r\n        .cbx-op-ai-tabs-scroll-indicator {\r\n          display: none;\r\n        }\r\n        \r\n        .cbx-op-ai-tab {\r\n          padding: 12px 24px;\r\n          background: var(--cbx-white);\r\n          border: 2px solid transparent;\r\n          border-radius: var(--cbx-radius-full);\r\n          font-size: 14px;\r\n          font-weight: 600;\r\n          color: var(--cbx-gray-700);\r\n          cursor: pointer;\r\n          transition: all var(--cbx-transition-fast);\r\n          white-space: nowrap;\r\n          box-shadow: var(--cbx-shadow-sm);\r\n          margin-top: 5px;\r\n        }\r\n        \r\n        .cbx-op-ai-tab:hover {\r\n          border-color: var(--cbx-primary);\r\n          color: var(--cbx-primary);\r\n          transform: translateY(-2px);\r\n        }\r\n        \r\n        .cbx-op-ai-tab.active {\r\n          background: var(--cbx-primary);\r\n          color: var(--cbx-white);\r\n          border-color: var(--cbx-primary);\r\n          box-shadow: var(--cbx-shadow-primary);\r\n        }\r\n        \r\n        \/* Improved AI Grid - Compact Masonry Style *\/\r\n        .cbx-op-ai-grid {\r\n          display: grid;\r\n          grid-template-columns: repeat(6, 1fr);\r\n          gap: 16px;\r\n          max-width: 1100px;\r\n          margin: 0 auto;\r\n        }\r\n        \r\n        .cbx-op-ai-addon {\r\n          background: var(--cbx-white);\r\n          border-radius: var(--cbx-radius-xl);\r\n          padding: 16px 12px;\r\n          text-align: center;\r\n          cursor: pointer;\r\n          transition: all var(--cbx-transition-base);\r\n          box-shadow: var(--cbx-shadow-sm);\r\n          border: 2px solid transparent;\r\n          position: relative;\r\n          overflow: hidden;\r\n        }\r\n        \r\n        .cbx-op-ai-addon::before {\r\n          content: '';\r\n          position: absolute;\r\n          inset: 0;\r\n          background: linear-gradient(135deg, var(--cbx-primary) 0%, var(--cbx-primary-dark) 100%);\r\n          opacity: 0;\r\n          transition: opacity var(--cbx-transition-fast);\r\n        }\r\n        \r\n        .cbx-op-ai-addon:hover {\r\n          transform: translateY(-6px) scale(1.02);\r\n          box-shadow: var(--cbx-shadow-lg);\r\n          border-color: var(--cbx-primary-light);\r\n        }\r\n        \r\n        .cbx-op-ai-addon:hover::before {\r\n          opacity: 0.03;\r\n        }\r\n        \r\n        .cbx-op-ai-addon-icon {\r\n          width: 64px;\r\n          height: 64px;\r\n          margin: 0 auto 10px;\r\n          border-radius: var(--cbx-radius-lg);\r\n          background-size: cover;\r\n          background-position: center;\r\n          border: 3px solid var(--cbx-gray-200);\r\n          transition: all var(--cbx-transition-base);\r\n          position: relative;\r\n          z-index: 1;\r\n        }\r\n        \r\n        .cbx-op-ai-addon:hover .cbx-op-ai-addon-icon {\r\n          border-color: var(--cbx-primary);\r\n          transform: scale(1.08);\r\n        }\r\n        \r\n        .cbx-op-ai-addon-name {\r\n          font-size: 12px;\r\n          font-weight: 600;\r\n          color: var(--cbx-dark);\r\n          line-height: 1.3;\r\n          position: relative;\r\n          z-index: 1;\r\n          display: -webkit-box;\r\n          -webkit-line-clamp: 2;\r\n          -webkit-box-orient: vertical;\r\n          overflow: hidden;\r\n        }\r\n        \r\n        .cbx-op-ai-addon .cbx-op-addon-arrow {\r\n          position: absolute;\r\n          bottom: 8px;\r\n          right: 8px;\r\n          width: 24px;\r\n          height: 24px;\r\n          background: var(--cbx-primary);\r\n          border-radius: 50%;\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          color: var(--cbx-white);\r\n          opacity: 0;\r\n          transform: scale(0.5);\r\n          transition: all var(--cbx-transition-base);\r\n        }\r\n        \r\n        .cbx-op-ai-addon:hover .cbx-op-addon-arrow {\r\n          opacity: 1;\r\n          transform: scale(1);\r\n        }\r\n\r\n        \/* Detail Panel *\/\r\n        .cbx-op-detail-panel {\r\n          position: fixed;\r\n          top: 0;\r\n          right: 0;\r\n          width: 550px;\r\n          max-width: 100%;\r\n          height: 100vh;\r\n          background: var(--cbx-white);\r\n          box-shadow: -20px 0 60px rgba(0, 0, 0, 0.2);\r\n          z-index: 1000;\r\n          transform: translateX(100%);\r\n          transition: transform var(--cbx-transition-slow);\r\n          overflow-y: auto;\r\n        }\r\n        \r\n        .cbx-op-detail-panel.open {\r\n          transform: translateX(0);\r\n        }\r\n        \r\n        .cbx-op-detail-header {\r\n          position: sticky;\r\n          top: 0;\r\n          background: var(--cbx-white);\r\n          padding: 24px;\r\n          border-bottom: 1px solid var(--cbx-gray-200);\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: space-between;\r\n          z-index: 10;\r\n        }\r\n        \r\n        .cbx-op-detail-title {\r\n          font-size: 22px;\r\n          font-weight: 700;\r\n          color: var(--cbx-primary);\r\n        }\r\n        \r\n        .cbx-op-close-btn {\r\n          width: 44px;\r\n          height: 44px;\r\n          background: var(--cbx-gray-100);\r\n          border: none;\r\n          border-radius: 50%;\r\n          font-size: 24px;\r\n          cursor: pointer;\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          color: var(--cbx-gray-700);\r\n          transition: all var(--cbx-transition-fast);\r\n        }\r\n        \r\n        .cbx-op-close-btn:hover {\r\n          background: var(--cbx-secondary);\r\n          transform: rotate(90deg);\r\n        }\r\n        \r\n        .cbx-op-detail-content {\r\n          padding: 24px;\r\n        }\r\n        \r\n        \/* Before\/After Pairs in Detail Panel *\/\r\n        .cbx-op-detail-pair {\r\n          margin-bottom: 24px;\r\n          border-radius: var(--cbx-radius-xl);\r\n          overflow: hidden;\r\n          box-shadow: var(--cbx-shadow-md);\r\n        }\r\n        \r\n        .cbx-op-detail-pair-label {\r\n          display: flex;\r\n          justify-content: space-between;\r\n          padding: 12px 16px;\r\n          background: var(--cbx-gray-100);\r\n          font-size: 13px;\r\n          font-weight: 600;\r\n          color: var(--cbx-gray-700);\r\n        }\r\n        \r\n        .cbx-op-detail-pair-label span {\r\n          display: flex;\r\n          align-items: center;\r\n          gap: 6px;\r\n        }\r\n        \r\n        .cbx-op-detail-pair-images {\r\n          display: grid;\r\n          grid-template-columns: 1fr 1fr;\r\n          gap: 2px;\r\n          background: var(--cbx-gray-300);\r\n        }\r\n        \r\n        .cbx-op-detail-pair-image-wrapper {\r\n          position: relative;\r\n          overflow: hidden;\r\n        }\r\n        \r\n        .cbx-op-detail-pair-image-label {\r\n          display: none;\r\n        }\r\n        \r\n        .cbx-op-detail-pair-images img {\r\n          width: 100%;\r\n          aspect-ratio: 1;\r\n          object-fit: cover;\r\n          cursor: zoom-in;\r\n          transition: transform var(--cbx-transition-fast);\r\n        }\r\n        \r\n        .cbx-op-detail-pair-images img:hover {\r\n          transform: scale(1.02);\r\n        }\r\n\r\n        \/* ========================================\r\n           GOODIES SECTION - UNIFIED GRID\r\n           ======================================== *\/\r\n        .cbx-op-goodies-unified {\r\n          display: grid;\r\n          grid-template-columns: repeat(3, 1fr);\r\n          gap: 24px;\r\n          margin-bottom: 32px;\r\n        }\r\n        \r\n        .cbx-op-goodie-item {\r\n          border-radius: var(--cbx-radius-2xl);\r\n          overflow: hidden;\r\n          transition: all var(--cbx-transition-base);\r\n          cursor: pointer;\r\n        }\r\n        \r\n        .cbx-op-goodie-item.hidden {\r\n          display: none;\r\n        }\r\n        \r\n        \/* Card style items (first 3) *\/\r\n        .cbx-op-goodie-card {\r\n          background: var(--cbx-white);\r\n          box-shadow: var(--cbx-shadow-md);\r\n          text-align: center;\r\n        }\r\n        \r\n        .cbx-op-goodie-card:hover {\r\n          transform: translateY(-10px);\r\n          box-shadow: var(--cbx-shadow-xl);\r\n        }\r\n        \r\n        .cbx-op-goodie-card-image {\r\n          height: 200px;\r\n          overflow: hidden;\r\n          position: relative;\r\n        }\r\n        \r\n        .cbx-op-goodie-card-image::after {\r\n          content: '';\r\n          position: absolute;\r\n          inset: 0;\r\n          background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 50%);\r\n        }\r\n        \r\n        .cbx-op-goodie-card-image img {\r\n          width: 100%;\r\n          height: 100%;\r\n          object-fit: cover;\r\n          transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n        }\r\n        \r\n        .cbx-op-goodie-card:hover .cbx-op-goodie-card-image img {\r\n          transform: scale(1.1);\r\n        }\r\n        \r\n        .cbx-op-goodie-card h3 {\r\n          font-size: 18px;\r\n          font-weight: 700;\r\n          color: var(--cbx-primary);\r\n          padding: 16px 20px 8px;\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          gap: 8px;\r\n        }\r\n        \r\n        .cbx-op-goodie-card h3 svg {\r\n          color: var(--cbx-secondary);\r\n        }\r\n        \r\n        .cbx-op-goodie-card p {\r\n          font-size: 14px;\r\n          color: var(--cbx-gray-600);\r\n          padding: 5px 20px 8px;\r\n          line-height: 1.5;\r\n        }\r\n        \r\n        \/* Gallery style items (4-9) *\/\r\n        .cbx-op-goodie-gallery-item {\r\n          position: relative;\r\n          aspect-ratio: 4\/3;\r\n          background: var(--cbx-gray-200);\r\n          box-shadow: var(--cbx-shadow-sm);\r\n        }\r\n        \r\n        .cbx-op-goodie-gallery-item::before {\r\n          content: '';\r\n          position: absolute;\r\n          inset: 0;\r\n          background: linear-gradient(135deg, var(--cbx-primary) 0%, var(--cbx-primary-dark) 100%);\r\n          opacity: 0;\r\n          transition: opacity var(--cbx-transition-base);\r\n          z-index: 1;\r\n        }\r\n        \r\n        .cbx-op-goodie-gallery-item::after {\r\n          content: '';\r\n          position: absolute;\r\n          top: 50%;\r\n          left: 50%;\r\n          width: 50px;\r\n          height: 50px;\r\n          background: var(--cbx-white);\r\n          border-radius: 50%;\r\n          transform: translate(-50%, -50%) scale(0);\r\n          transition: transform var(--cbx-transition-bounce);\r\n          z-index: 2;\r\n          background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230c1e8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C\/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C\/line%3E%3C\/svg%3E\");\r\n          background-repeat: no-repeat;\r\n          background-position: center;\r\n        }\r\n        \r\n        .cbx-op-goodie-gallery-item:hover::before {\r\n          opacity: 0.3;\r\n        }\r\n        \r\n        .cbx-op-goodie-gallery-item:hover::after {\r\n          transform: translate(-50%, -50%) scale(1);\r\n        }\r\n        \r\n        .cbx-op-goodie-gallery-item:hover {\r\n          transform: translateY(-6px);\r\n          box-shadow: var(--cbx-shadow-lg);\r\n        }\r\n        \r\n        .cbx-op-goodie-gallery-item img {\r\n          width: 100%;\r\n          height: 100%;\r\n          object-fit: cover;\r\n          transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n        }\r\n        \r\n        .cbx-op-goodie-gallery-item:hover img {\r\n          transform: scale(1.1);\r\n        }\r\n        \r\n        @media (max-width: 992px) {\r\n          .cbx-op-goodies-unified {\r\n            grid-template-columns: repeat(2, 1fr);\r\n          }\r\n        }\r\n        \r\n        @media (max-width: 768px) {\r\n          .cbx-op-goodies-unified {\r\n            grid-template-columns: repeat(2, 1fr);\r\n            gap: 16px;\r\n          }\r\n          \r\n          .cbx-op-goodie-card-image {\r\n            height: 160px;\r\n          }\r\n          \r\n          .cbx-op-goodie-card h3 {\r\n            font-size: 16px;\r\n            padding: 12px 16px 6px;\r\n          }\r\n          \r\n          .cbx-op-goodie-card p {\r\n            font-size: 13px;\r\n            padding: 0 16px 16px;\r\n          }\r\n        }\r\n        \r\n        @media (max-width: 576px) {\r\n          .cbx-op-goodies-unified {\r\n            grid-template-columns: repeat(2, 1fr);\r\n            gap: 12px;\r\n          }\r\n          \r\n          .cbx-op-goodie-card-image {\r\n            height: 140px;\r\n          }\r\n        }\r\n\r\n        \/* ========================================\r\n           SERVICES SECTION\r\n           ======================================== *\/\r\n        .cbx-op-services-grid {\r\n          display: grid;\r\n          grid-template-columns: repeat(2, 1fr);\r\n          gap: 36px;\r\n          max-width: 950px;\r\n          margin: 0 auto;\r\n        }\r\n        \r\n        .cbx-op-service-card {\r\n          background: var(--cbx-white);\r\n          border-radius: var(--cbx-radius-2xl);\r\n          overflow: hidden;\r\n          box-shadow: var(--cbx-shadow-md);\r\n          transition: all var(--cbx-transition-base);\r\n          position: relative;\r\n        }\r\n        \r\n        .cbx-op-service-card::before {\r\n          content: '';\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          right: 0;\r\n          height: 5px;\r\n          background: #ffb702;\r\n          transform: scaleX(0);\r\n          transition: transform var(--cbx-transition-base);\r\n        }\r\n        \r\n        .cbx-op-service-card:hover::before {\r\n          transform: scaleX(1);\r\n        }\r\n        \r\n        .cbx-op-service-card:hover {\r\n          transform: translateY(-10px);\r\n          box-shadow: var(--cbx-shadow-xl);\r\n        }\r\n        \r\n        .cbx-op-service-card-image {\r\n          height: 240px;\r\n          overflow: hidden;\r\n        }\r\n        \r\n        .cbx-op-service-card-image img {\r\n          width: 100%;\r\n          height: 100%;\r\n          object-fit: cover;\r\n          transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n        }\r\n        \r\n        .cbx-op-service-card:hover .cbx-op-service-card-image img {\r\n          transform: scale(1.05);\r\n        }\r\n        \r\n        .cbx-op-service-card h3 {\r\n          font-size: 24px;\r\n          font-weight: 700;\r\n          color: var(--cbx-primary);\r\n          padding: 24px 28px 10px;\r\n        }\r\n        \r\n        .cbx-op-service-card p {\r\n          font-size: 15px;\r\n          color: var(--cbx-gray-600);\r\n          padding: 5px 28px 8px;\r\n          line-height: 1.7;\r\n        }\r\n        \r\n        .cbx-op-service-btn {\r\n          display: inline-flex;\r\n          align-items: center;\r\n          gap: 10px;\r\n          margin: 0 28px 28px;\r\n          padding: 14px 28px;\r\n          background: var(--cbx-primary);\r\n          color: var(--cbx-white);\r\n          text-decoration: none;\r\n          border-radius: var(--cbx-radius-md);\r\n          font-size: 15px;\r\n          font-weight: 600;\r\n          transition: all var(--cbx-transition-fast);\r\n        }\r\n        \r\n        .cbx-op-service-btn:hover {\r\n          background: var(--cbx-primary-dark);\r\n          transform: translateX(4px);\r\n        }\r\n        \r\n        .cbx-op-service-btn svg {\r\n          transition: transform var(--cbx-transition-fast);\r\n        }\r\n        \r\n        .cbx-op-service-btn:hover svg {\r\n          transform: translateX(4px);\r\n        }\r\n\r\n        \/* ========================================\r\n           FAQ SECTION\r\n           ======================================== *\/\r\n        .cbx-op-faq-section {\r\n          background: linear-gradient(180deg, var(--cbx-gray-100) 0%, var(--cbx-white) 100%);\r\n        }\r\n        \r\n        .cbx-op-faq-list {\r\n          max-width: 800px;\r\n          margin: 0 auto;\r\n        }\r\n        \r\n        .cbx-op-faq-item {\r\n          background: var(--cbx-white);\r\n          border-radius: var(--cbx-radius-xl);\r\n          margin-bottom: 16px;\r\n          overflow: hidden;\r\n          box-shadow: var(--cbx-shadow-sm);\r\n          transition: all var(--cbx-transition-fast);\r\n        }\r\n        \r\n        .cbx-op-faq-item:hover {\r\n          box-shadow: var(--cbx-shadow-md);\r\n        }\r\n        \r\n        .cbx-op-faq-question {\r\n          width: 100%;\r\n          padding: 24px 28px;\r\n          background: none;\r\n          border: none;\r\n          text-align: left;\r\n          font-size: 17px;\r\n          font-weight: 600;\r\n          color: var(--cbx-dark);\r\n          cursor: pointer;\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: space-between;\r\n          gap: 16px;\r\n          transition: all var(--cbx-transition-fast);\r\n        }\r\n        \r\n        .cbx-op-faq-question:hover {\r\n          background: var(--cbx-gray-100);\r\n        }\r\n        \r\n        .cbx-op-faq-icon {\r\n          color: var(--cbx-primary);\r\n          transition: transform var(--cbx-transition-fast);\r\n          flex-shrink: 0;\r\n        }\r\n        \r\n        .cbx-op-faq-item.active .cbx-op-faq-icon {\r\n          transform: rotate(180deg);\r\n        }\r\n        \r\n        .cbx-op-faq-answer {\r\n          max-height: 0;\r\n          overflow: hidden;\r\n          transition: max-height var(--cbx-transition-base);\r\n        }\r\n        \r\n        .cbx-op-faq-item.active .cbx-op-faq-answer {\r\n          max-height: 300px;\r\n        }\r\n        \r\n        .cbx-op-faq-answer p {\r\n          padding: 0 28px 24px;\r\n          font-size: 15px;\r\n          color: var(--cbx-gray-600);\r\n          line-height: 1.8;\r\n        }\r\n\r\n        \/* ========================================\r\n           BUTTONS\r\n           ======================================== *\/\r\n        .cbx-op-btn {\r\n          display: inline-flex;\r\n          align-items: center;\r\n          gap: 10px;\r\n          padding: 14px 28px;\r\n          border-radius: var(--cbx-radius-md);\r\n          font-size: 15px;\r\n          font-weight: 600;\r\n          text-decoration: none;\r\n          cursor: pointer;\r\n          transition: all var(--cbx-transition-fast);\r\n          border: none;\r\n        }\r\n        \r\n        .cbx-op-btn-primary {\r\n          background: var(--cbx-primary);\r\n          color: var(--cbx-white);\r\n        }\r\n        \r\n        .cbx-op-btn-primary:hover {\r\n          background: var(--cbx-primary-dark);\r\n          transform: translateY(-2px);\r\n        }\r\n        \r\n        .cbx-op-btn-secondary {\r\n          background: var(--cbx-secondary);\r\n          color: var(--cbx-dark);\r\n        }\r\n        \r\n        .cbx-op-btn-secondary:hover {\r\n          background: #e5a502;\r\n          transform: translateY(-2px);\r\n        }\r\n\r\n        \/* ========================================\r\n           OVERLAY\r\n           ======================================== *\/\r\n        .cbx-op-overlay {\r\n          position: fixed;\r\n          top: 0;\r\n          left: 0;\r\n          width: 100%;\r\n          height: 100%;\r\n          background: rgba(0, 0, 0, 0.6);\r\n          backdrop-filter: blur(8px);\r\n          z-index: 999;\r\n          opacity: 0;\r\n          visibility: hidden;\r\n          transition: all var(--cbx-transition-base);\r\n        }\r\n        \r\n        .cbx-op-overlay.open {\r\n          opacity: 1;\r\n          visibility: visible;\r\n        }\r\n\r\n        \/* ========================================\r\n           RESPONSIVE STYLES\r\n           ======================================== *\/\r\n        @media (max-width: 1200px) {\r\n          .cbx-op-ai-grid {\r\n            grid-template-columns: repeat(5, 1fr);\r\n          }\r\n        }\r\n        \r\n        @media (max-width: 992px) {\r\n          .cbx-op-hero-title {\r\n            font-size: 40px;\r\n          }\r\n          \r\n          .cbx-op-hero-grid {\r\n            grid-template-columns: 1fr 1fr;\r\n            grid-template-rows: auto;\r\n          }\r\n          \r\n          .cbx-op-hero-card:nth-child(1),\r\n          .cbx-op-hero-card:nth-child(2),\r\n          .cbx-op-hero-card:nth-child(3),\r\n          .cbx-op-hero-card:nth-child(4) {\r\n            grid-column: auto;\r\n            grid-row: auto;\r\n          }\r\n          \r\n          .cbx-op-ai-grid {\r\n            grid-template-columns: repeat(4, 1fr);\r\n          }\r\n          \r\n          .cbx-op-backdrops-grid,\r\n          .cbx-op-features-list,\r\n          .cbx-op-goodies-grid {\r\n            grid-template-columns: repeat(2, 1fr);\r\n          }\r\n          \r\n          .cbx-op-services-grid {\r\n            grid-template-columns: 1fr;\r\n            max-width: 500px;\r\n          }\r\n        }\r\n        \r\n        @media (max-width: 768px) {\r\n          :root {\r\n            --cbx-section-padding: 60px;\r\n          }\r\n          \r\n          .cbx-op-hero {\r\n            padding: 60px 16px 80px;\r\n          }\r\n          \r\n          .cbx-op-hero-title {\r\n            font-size: 32px;\r\n          }\r\n          \r\n          .cbx-op-hero-subtitle {\r\n            font-size: 16px;\r\n          }\r\n          \r\n          .cbx-op-hero-grid {\r\n            grid-template-columns: 1fr;\r\n            gap: 16px;\r\n          }\r\n          \r\n          .cbx-op-hero-card-image {\r\n            height: 180px;\r\n          }\r\n          \r\n          .cbx-op-section-title {\r\n            font-size: 28px;\r\n          }\r\n          \r\n          .cbx-op-gallery-grid {\r\n            grid-template-columns: repeat(2, 1fr);\r\n            gap: 12px;\r\n          }\r\n          \r\n          .cbx-op-process-steps {\r\n            flex-direction: column;\r\n            gap: 12px;\r\n            align-items: stretch;\r\n          }\r\n          \r\n          .cbx-op-step {\r\n            width: 100%;\r\n            justify-content: flex-start;\r\n          }\r\n          \r\n          .cbx-op-step-arrow {\r\n            transform: rotate(90deg);\r\n          }\r\n          \r\n          .cbx-op-features-list,\r\n          .cbx-op-backdrops-grid,\r\n          .cbx-op-goodies-grid {\r\n            grid-template-columns: 1fr;\r\n          }\r\n          \r\n          .cbx-op-ai-grid {\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: 12px;\r\n          }\r\n          \r\n          .cbx-op-ai-addon {\r\n            padding: 12px 8px;\r\n          }\r\n          \r\n          .cbx-op-ai-addon-icon {\r\n            width: 48px;\r\n            height: 48px;\r\n          }\r\n          \r\n          .cbx-op-ai-addon-name {\r\n            font-size: 11px;\r\n          }\r\n          \r\n          .cbx-op-ai-tabs {\r\n            justify-content: flex-start;\r\n            flex-wrap: nowrap;\r\n            overflow-x: auto;\r\n            -webkit-overflow-scrolling: touch;\r\n            scrollbar-width: none;\r\n            padding: 0 16px 16px;\r\n            margin-bottom: 24px;\r\n            position: relative;\r\n          }\r\n          \r\n          .cbx-op-ai-tabs::-webkit-scrollbar {\r\n            display: none;\r\n          }\r\n          \r\n          .cbx-op-ai-tabs-wrapper {\r\n            position: relative;\r\n          }\r\n          \r\n          \/* Scroll indicators for mobile *\/\r\n          .cbx-op-ai-tabs-scroll-indicator {\r\n            display: flex;\r\n            position: absolute;\r\n            top: 0;\r\n            bottom: 16px;\r\n            width: 40px;\r\n            align-items: center;\r\n            justify-content: center;\r\n            pointer-events: none;\r\n            z-index: 10;\r\n          }\r\n          \r\n          .cbx-op-ai-tabs-scroll-indicator.cbx-op-tabs-scroll-left {\r\n            left: 0;\r\n            background: linear-gradient(90deg, var(--cbx-white) 0%, transparent 100%);\r\n          }\r\n          \r\n          .cbx-op-ai-tabs-scroll-indicator.cbx-op-tabs-scroll-right {\r\n            right: 0;\r\n            background: linear-gradient(-90deg, var(--cbx-white) 0%, transparent 100%);\r\n          }\r\n          \r\n          .cbx-op-ai-tabs-scroll-indicator svg {\r\n            color: var(--cbx-primary);\r\n            opacity: 0.7;\r\n          }\r\n          \r\n          .cbx-op-ai-tab {\r\n            padding: 10px 18px;\r\n            font-size: 13px;\r\n            flex-shrink: 0;\r\n          }\r\n          \r\n          .cbx-op-detail-panel {\r\n            width: 100%;\r\n          }\r\n          \r\n          \/* Lightbox mobile improvements *\/\r\n          .cbx-op-lightbox-close {\r\n            top: 15px;\r\n            right: 15px;\r\n            width: 48px;\r\n            height: 48px;\r\n          }\r\n          \r\n          .cbx-op-lightbox-nav {\r\n            width: 48px;\r\n            height: 48px;\r\n          }\r\n          \r\n          .cbx-op-lightbox-prev {\r\n            left: 15px;\r\n          }\r\n          \r\n          .cbx-op-lightbox-next {\r\n            right: 15px;\r\n          }\r\n          \r\n          .cbx-op-detail-pair-images {\r\n            grid-template-columns: 1fr;\r\n          }\r\n          \r\n          \/* Mobile: Show labels with each image *\/\r\n          .cbx-op-detail-pair-label {\r\n            display: none;\r\n          }\r\n          \r\n          .cbx-op-detail-pair-image-label {\r\n            display: block;\r\n            position: absolute;\r\n            top: 8px;\r\n            left: 8px;\r\n            padding: 4px 10px;\r\n            background: rgba(0, 0, 0, 0.7);\r\n            color: white;\r\n            font-size: 11px;\r\n            font-weight: 600;\r\n            border-radius: 4px;\r\n            z-index: 5;\r\n          }\r\n          \r\n          \/* Mobile: Show labels with each image *\/\r\n          .cbx-op-detail-pair-label {\r\n            display: none;\r\n          }\r\n          \r\n          .cbx-op-detail-pair-image-wrapper {\r\n            position: relative;\r\n          }\r\n          \r\n          .cbx-op-detail-pair-image-label {\r\n            position: absolute;\r\n            top: 8px;\r\n            left: 8px;\r\n            padding: 4px 10px;\r\n            background: rgba(0, 0, 0, 0.7);\r\n            color: white;\r\n            font-size: 11px;\r\n            font-weight: 600;\r\n            border-radius: 4px;\r\n            z-index: 5;\r\n          }\r\n        }\r\n        \r\n        @media (max-width: 576px) {\r\n          .cbx-op-hero-title {\r\n            font-size: 28px;\r\n          }\r\n          \r\n          .cbx-op-hero-card-content {\r\n            padding: 20px;\r\n          }\r\n          \r\n          .cbx-op-hero-card h3 {\r\n            font-size: 18px;\r\n          }\r\n          \r\n          .cbx-op-ai-grid {\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: 10px;\r\n          }\r\n          \r\n          .cbx-op-ai-addon {\r\n            padding: 10px 6px;\r\n          }\r\n          \r\n          .cbx-op-ai-addon-icon {\r\n            width: 44px;\r\n            height: 44px;\r\n          }\r\n          \r\n          .cbx-op-ai-addon-name {\r\n            font-size: 10px;\r\n          }\r\n          \r\n          .cbx-op-goodie-card-image {\r\n            height: 180px;\r\n          }\r\n          \r\n          .cbx-op-lightbox-nav {\r\n            width: 44px;\r\n            height: 44px;\r\n          }\r\n          \r\n          .cbx-op-lightbox-close {\r\n            width: 44px;\r\n            height: 44px;\r\n          }\r\n        }\r\n\r\n        \/* ========================================\r\n           WORDPRESS THEME OVERRIDES\r\n           ======================================== *\/\r\n        .container {\r\n          width: 100% !important;\r\n          max-width: unset !important;\r\n        }\r\n        \r\n        .et-fixed-header {\r\n          position: relative !important;\r\n        }\r\n        \r\n        .sticky-promo-bar {\r\n          display: none !important;\r\n        }\r\n        \r\n        .container {\r\n          padding-top: 0 !important;\r\n        }\r\n        \r\n        header#main-header {\r\n          z-index: 11;\r\n        }\r\n        \r\n        h1.entry-title.main_title {\r\n          display: none !important;\r\n        }\r\n\r\n        .container.clearfix.et_menu_container {\r\n    width: 80% !important;\r\n    margin: auto;\r\n    margin: auto;\r\n}\r\n      <\/style>\r\n\r\n      <!-- Background Canvas -->\r\n      <div id=\"cbx-op-three-bg\" class=\"cbx-op-background\"><\/div>\r\n\r\n      <!-- ========================================\r\n           SECTION 1: HERO - CREATIVE BENTO DESIGN\r\n           ======================================== -->\r\n      <section id=\"cbx-op-hero\" class=\"cbx-op-hero\">\r\n        <!-- Floating decorative elements -->\r\n        <div class=\"cbx-op-hero-float\"><\/div>\r\n        <div class=\"cbx-op-hero-float\"><\/div>\r\n        <div class=\"cbx-op-hero-float\"><\/div>\r\n        \r\n        <div class=\"cbx-op-container\">\r\n          <div class=\"cbx-op-hero-content\">\r\n            <div class=\"cbx-op-hero-badge\">\r\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon>\r\n              <\/svg>\r\n              Options Premium\r\n            <\/div>\r\n            <h1 class=\"cbx-op-hero-title\">Options <span>Photobooth<\/span> CheeeseBOX<\/h1>\r\n            <p class=\"cbx-op-hero-subtitle\">\r\n              D\u00e9couvrez notre gamme compl\u00e8te d'options pour personnaliser votre exp\u00e9rience photobooth et cr\u00e9er des souvenirs inoubliables\r\n            <\/p>\r\n            <a href=\"https:\/\/cheeesebox.ca\/contacts\/\" class=\"cbx-op-hero-cta\">\r\n              Demander un devis\r\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n              <\/svg>\r\n            <\/a>\r\n          <\/div>\r\n          \r\n          <div class=\"cbx-op-hero-grid\">\r\n            <a href=\"#cbx-op-personnalisation\" class=\"cbx-op-hero-card\" data-section=\"personnalisation\">\r\n              <div class=\"cbx-op-hero-card-image\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/IMG_20190825_170512-20250522-181347-scaled.jpg\" alt=\"Personnalisation\" loading=\"lazy\">\r\n              <\/div>\r\n              <div class=\"cbx-op-hero-card-content\">\r\n                <div class=\"cbx-op-hero-card-icon\">\r\n                  <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                    <path d=\"M12 20h9\"><\/path>\r\n                    <path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"><\/path>\r\n                  <\/svg>\r\n                <\/div>\r\n                <h3>Personnalisation<\/h3>\r\n                <p>Habillage magn\u00e9tique sur-mesure pour une identit\u00e9 unique<\/p>\r\n                <span class=\"cbx-op-hero-card-arrow\">\r\n                  D\u00e9couvrir\r\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                    <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n                  <\/svg>\r\n                <\/span>\r\n              <\/div>\r\n            <\/a>\r\n            \r\n            <a href=\"#cbx-op-double-ecran\" class=\"cbx-op-hero-card\" data-section=\"double-ecran\">\r\n              <div class=\"cbx-op-hero-card-image\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/try-scaled.jpg\" alt=\"Double \u00c9cran\" loading=\"lazy\">\r\n              <\/div>\r\n              <div class=\"cbx-op-hero-card-content\">\r\n                <div class=\"cbx-op-hero-card-icon\">\r\n                  <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                    <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"><\/rect>\r\n                    <line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"><\/line>\r\n                    <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"><\/line>\r\n                  <\/svg>\r\n                <\/div>\r\n                <h3>Double \u00c9cran<\/h3>\r\n                <p>LiveShow et diffusion TV 4K pour un impact maximal<\/p>\r\n                <span class=\"cbx-op-hero-card-arrow\">\r\n                  D\u00e9couvrir\r\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                    <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n                  <\/svg>\r\n                <\/span>\r\n              <\/div>\r\n            <\/a>\r\n            \r\n            <a href=\"#cbx-op-backdrops\" class=\"cbx-op-hero-card\" data-section=\"backdrops\">\r\n              <div class=\"cbx-op-hero-card-image\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/BDneon-event1.jpg\" alt=\"Backdrops\" loading=\"lazy\">\r\n              <\/div>\r\n              <div class=\"cbx-op-hero-card-content\">\r\n                <div class=\"cbx-op-hero-card-icon\">\r\n                  <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                    <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect>\r\n                    <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"><\/circle>\r\n                    <polyline points=\"21 15 16 10 5 21\"><\/polyline>\r\n                  <\/svg>\r\n                <\/div>\r\n                <h3>Backdrops<\/h3>\r\n                <p>Toiles et fonds personnalis\u00e9s<\/p>\r\n                <span class=\"cbx-op-hero-card-arrow\">\r\n                  D\u00e9couvrir\r\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                    <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n                  <\/svg>\r\n                <\/span>\r\n              <\/div>\r\n            <\/a>\r\n            \r\n            <a href=\"#cbx-op-ia-generative\" class=\"cbx-op-hero-card\" data-section=\"ia-generative\">\r\n              <div class=\"cbx-op-hero-card-image\">\r\n                <img decoding=\"async\" src=\"\/wp-content\/plugins\/custom-op\/addons\/Game%20Room\/after--game-room--2.webp\" alt=\"IA G\u00e9n\u00e9rative\" loading=\"lazy\">\r\n              <\/div>\r\n              <div class=\"cbx-op-hero-card-content\">\r\n                <div class=\"cbx-op-hero-card-icon\">\r\n                  <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                    <path d=\"M12 2a10 10 0 1 0 10 10H12V2z\"><\/path>\r\n                    <path d=\"M12 2a10 10 0 0 1 10 10\"><\/path>\r\n                    <circle cx=\"12\" cy=\"12\" r=\"6\"><\/circle>\r\n                  <\/svg>\r\n                <\/div>\r\n                <h3>IA G\u00e9n\u00e9rative<\/h3>\r\n                <p>25+ th\u00e8mes et transformations pour des souvenirs uniques<\/p>\r\n                <span class=\"cbx-op-hero-card-arrow\">\r\n                  D\u00e9couvrir\r\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                    <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n                  <\/svg>\r\n                <\/span>\r\n              <\/div>\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <!-- ========================================\r\n           SECTION 2: PERSONNALISATION\r\n           ======================================== -->\r\n      <section id=\"cbx-op-personnalisation\" class=\"cbx-op-section\">\r\n        <div class=\"cbx-op-container\">\r\n          <div class=\"cbx-op-section-header\">\r\n            <h2 class=\"cbx-op-section-title\">Personnalisation compl\u00e8te<\/h2>\r\n            <p class=\"cbx-op-section-subtitle\">\r\n              Viens \u00e9galement avec la personnalisation du logiciel\r\n            <\/p>\r\n          <\/div>\r\n          \r\n          <div class=\"cbx-op-gallery\" id=\"cbx-op-personnalisation-gallery\">\r\n            <div class=\"cbx-op-gallery-grid\">\r\n              <div class=\"cbx-op-gallery-item\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/IMG_20190825_170512-20250522-181347-scaled.jpg\" alt=\"Personnalisation 1\" loading=\"lazy\">\r\n              <\/div>\r\n              <div class=\"cbx-op-gallery-item\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/5.png\" alt=\"Personnalisation 2\" loading=\"lazy\">\r\n              <\/div>\r\n              <div class=\"cbx-op-gallery-item\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/4.png\" alt=\"Personnalisation 3\" loading=\"lazy\">\r\n              <\/div>\r\n              <div class=\"cbx-op-gallery-item hidden\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2024\/02\/AMO_8842-scaled.jpg\" alt=\"Personnalisation 4\" loading=\"lazy\">\r\n              <\/div>\r\n              <div class=\"cbx-op-gallery-item hidden\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/IMG-20170825-WA0007_Webp.webp\" alt=\"Personnalisation 5\" loading=\"lazy\">\r\n              <\/div>\r\n              <div class=\"cbx-op-gallery-item hidden\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/IMG_20211009_090440_Webp-1.webp\" alt=\"Personnalisation 6\" loading=\"lazy\">\r\n              <\/div>\r\n              <div class=\"cbx-op-gallery-item hidden\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/IMG_20190825_170512_Webp-1-scaled.webp\" alt=\"Personnalisation 7\" loading=\"lazy\">\r\n              <\/div>\r\n              <div class=\"cbx-op-gallery-item hidden\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/IMG_20190324_104436_Webp-scaled.webp\" alt=\"Personnalisation 8\" loading=\"lazy\">\r\n              <\/div>\r\n              <div class=\"cbx-op-gallery-item hidden\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/IMG_20181126_202555_Webp-scaled.webp\" alt=\"Personnalisation 9\" loading=\"lazy\">\r\n              <\/div>\r\n            <\/div>\r\n            <button class=\"cbx-op-load-more\" data-gallery=\"personnalisation\">\r\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"><\/line>\r\n                <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\r\n              <\/svg>\r\n              Charger plus\r\n            <\/button>\r\n          <\/div>\r\n          \r\n          <div class=\"cbx-op-process-steps\">\r\n            <div class=\"cbx-op-step\">\r\n              <div class=\"cbx-op-step-number\">1<\/div>\r\n              <div class=\"cbx-op-step-content\">\r\n                <h4>Consultation<\/h4>\r\n                <p>Discutez de vos besoins<\/p>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"cbx-op-step-arrow\">\u2192<\/div>\r\n            <div class=\"cbx-op-step\">\r\n              <div class=\"cbx-op-step-number\">2<\/div>\r\n              <div class=\"cbx-op-step-content\">\r\n                <h4>Design<\/h4>\r\n                <p>Cr\u00e9ez vos designs<\/p>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"cbx-op-step-arrow\">\u2192<\/div>\r\n            <div class=\"cbx-op-step\">\r\n              <div class=\"cbx-op-step-number\">3<\/div>\r\n              <div class=\"cbx-op-step-content\">\r\n                <h4>Production<\/h4>\r\n                <p>Fabrication qualit\u00e9<\/p>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"cbx-op-step-arrow\">\u2192<\/div>\r\n            <div class=\"cbx-op-step\">\r\n              <div class=\"cbx-op-step-number\">4<\/div>\r\n              <div class=\"cbx-op-step-content\">\r\n                <h4>Installation<\/h4>\r\n                <p>Mise en place pro<\/p>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <!-- ========================================\r\n           SECTION 3: DOUBLE \u00c9CRAN\r\n           ======================================== -->\r\n      <section id=\"cbx-op-double-ecran\" class=\"cbx-op-section cbx-op-section--gray-bg\">\r\n        <div class=\"cbx-op-container\">\r\n          <div class=\"cbx-op-section-header\">\r\n            <h2 class=\"cbx-op-section-title\">Double \u00e9cran<\/h2>\r\n            <p class=\"cbx-op-section-subtitle\">\r\n              Configuration d'un liveshow photo ou de publicit\u00e9 photo \/ vid\u00e9o\r\n            <\/p>\r\n          <\/div>\r\n          \r\n          <div class=\"cbx-op-gallery\" id=\"cbx-op-double-ecran-gallery\">\r\n            <div class=\"cbx-op-gallery-grid\">\r\n              <div class=\"cbx-op-gallery-item\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/try-scaled.jpg\" alt=\"Double \u00c9cran 1\" loading=\"lazy\">\r\n              <\/div>\r\n              <div class=\"cbx-op-gallery-item\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2024\/09\/photogrpheprint_0046.jpg\" alt=\"Double \u00c9cran 2\" loading=\"lazy\">\r\n              <\/div>\r\n              <div class=\"cbx-op-gallery-item\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2024\/02\/20230515-BXL-5-scaled-e1706889744346.jpg\" alt=\"Double \u00c9cran 3\" loading=\"lazy\">\r\n              <\/div>\r\n              <div class=\"cbx-op-gallery-item hidden\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/PXL_20240501_040905206-scaled.jpg\" alt=\"Double \u00c9cran 4\" loading=\"lazy\">\r\n              <\/div>\r\n              <div class=\"cbx-op-gallery-item hidden\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/tryu-scaled.jpg\" alt=\"Double \u00c9cran 5\" loading=\"lazy\">\r\n              <\/div>\r\n              <div class=\"cbx-op-gallery-item hidden\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/IMG_20181126_202555_Webp-scaled.webp\" alt=\"Double \u00c9cran 6\" loading=\"lazy\">\r\n              <\/div>\r\n            <\/div>\r\n            <button class=\"cbx-op-load-more\" data-gallery=\"double-ecran\">\r\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"><\/line>\r\n                <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\r\n              <\/svg>\r\n              Charger plus\r\n            <\/button>\r\n          <\/div>\r\n          \r\n          <div class=\"cbx-op-features-list\">\r\n            <div class=\"cbx-op-feature-item\">\r\n              <span class=\"cbx-op-feature-icon\">\r\n                <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                  <rect x=\"2\" y=\"7\" width=\"20\" height=\"15\" rx=\"2\" ry=\"2\"><\/rect>\r\n                  <polyline points=\"17 2 12 7 7 2\"><\/polyline>\r\n                <\/svg>\r\n              <\/span>\r\n              <div class=\"cbx-op-feature-content\">\r\n                <h4>\u00c9cran de diffusion<\/h4>\r\n                <p>Sur tr\u00e9pied, T\u00e9l\u00e9 55 pouce 4K<\/p>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"cbx-op-feature-item\">\r\n              <span class=\"cbx-op-feature-icon\">\r\n                <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                  <rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" ry=\"2\"><\/rect>\r\n                  <line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"><\/line>\r\n                <\/svg>\r\n              <\/span>\r\n              <div class=\"cbx-op-feature-content\">\r\n                <h4>Galerie Eventer<\/h4>\r\n                <p>Partagez les photos en direct avec vos invit\u00e9s<\/p>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"cbx-op-feature-item\">\r\n              <span class=\"cbx-op-feature-icon\">\r\n                <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                  <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"><\/rect>\r\n                  <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"><\/path>\r\n                <\/svg>\r\n              <\/span>\r\n              <div class=\"cbx-op-feature-content\">\r\n                <h4>Galerie Smugmug<\/h4>\r\n                <p>Galerie en ligne avec ou sans mot de passe<\/p>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <!-- ========================================\r\n           SECTION 4: BACKDROPS\r\n           ======================================== -->\r\n      <section id=\"cbx-op-backdrops\" class=\"cbx-op-section\">\r\n        <div class=\"cbx-op-container\">\r\n          <div class=\"cbx-op-section-header\">\r\n            <h2 class=\"cbx-op-section-title\">Backdrops<\/h2>\r\n            <p class=\"cbx-op-section-subtitle\">\r\n              Toiles et fonds personnalis\u00e9s pour sublimer vos photos\r\n            <\/p>\r\n          <\/div>\r\n          \r\n          <div class=\"cbx-op-backdrops-grid\">\r\n            <!-- Stock Backdrops -->\r\n            <div class=\"cbx-op-backdrop-card\">\r\n              <div class=\"cbx-op-comparison-slider\" data-slider=\"stock\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/1.1-RED-WINE-Straight-Tension-Media-Wall-9.8-W-x-7.5-H.png\" alt=\"Stock Before\" class=\"cbx-op-comparison-img cbx-op-comparison-img-before\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/Exemple-Toile-1.1-2-scaled.jpg\" alt=\"Stock After\" class=\"cbx-op-comparison-img cbx-op-comparison-img-after\">\r\n                <div class=\"cbx-op-comparison-handle\"><\/div>\r\n                <span class=\"cbx-op-comparison-label cbx-op-comparison-label-before\">Avant<\/span>\r\n                <span class=\"cbx-op-comparison-label cbx-op-comparison-label-after\">Apr\u00e8s<\/span>\r\n              <\/div>\r\n              <h3>Stock Backdrops<\/h3>\r\n              <p>Large s\u00e9lection de toiles disponibles imm\u00e9diatement pour votre \u00e9v\u00e9nement.<\/p>\r\n            <\/div>\r\n            \r\n            <!-- Custom Backdrops -->\r\n            <div class=\"cbx-op-backdrop-card\">\r\n              <div class=\"cbx-op-comparison-slider\" data-slider=\"custom\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/1-GEOMETRIC-GOLD-Straight-Tension-Media-Wall-9.8-W-x-7.5-H.png\" alt=\"Custom Before\" class=\"cbx-op-comparison-img cbx-op-comparison-img-before\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/1.3-RED-CARPET-Straight-Tension-Media-Wall-9.8-W-x-7.5-H.jpg\" alt=\"Custom After\" class=\"cbx-op-comparison-img cbx-op-comparison-img-after\">\r\n                <div class=\"cbx-op-comparison-handle\"><\/div>\r\n                <span class=\"cbx-op-comparison-label cbx-op-comparison-label-before\">Avant<\/span>\r\n                <span class=\"cbx-op-comparison-label cbx-op-comparison-label-after\">Apr\u00e8s<\/span>\r\n              <\/div>\r\n              <h3>Custom Backdrops<\/h3>\r\n              <p>Cr\u00e9ez un backdrop unique \u00e0 votre image avec notre service de design.<\/p>\r\n            <\/div>\r\n            \r\n            <!-- Neon Backdrops -->\r\n            <div class=\"cbx-op-backdrop-card\">\r\n              <div class=\"cbx-op-comparison-slider\" data-slider=\"neon\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/BDneon-event-1-scaled.jpeg\" alt=\"Neon Before\" class=\"cbx-op-comparison-img cbx-op-comparison-img-before\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/BDneon-event1.jpg\" alt=\"Neon After\" class=\"cbx-op-comparison-img cbx-op-comparison-img-after\">\r\n                <div class=\"cbx-op-comparison-handle\"><\/div>\r\n                <span class=\"cbx-op-comparison-label cbx-op-comparison-label-before\">Avant<\/span>\r\n                <span class=\"cbx-op-comparison-label cbx-op-comparison-label-after\">Apr\u00e8s<\/span>\r\n              <\/div>\r\n              <h3>Neon Backdrops<\/h3>\r\n              <p>Ajoutez une touche lumineuse avec nos fonds n\u00e9on personnalisables.<\/p>\r\n            <\/div>\r\n          <\/div>\r\n          \r\n          <!-- <div style=\"text-align: center; margin-top: 40px;\">\r\n            <a href=\"https:\/\/www.dropbox.com\/scl\/fo\/uvbsz1y79vi7qcxposdpo\/h?rlkey=h9woymptd42qaid1k3ujvjj8q&amp;st=u8nianzq&amp;dl=0\" target=\"_blank\" class=\"cbx-op-btn cbx-op-btn-primary\" rel=\"noopener\">\r\n              Voir toutes les toiles disponibles\r\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\/>\r\n                <polyline points=\"15 3 21 3 21 9\"\/>\r\n                <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"\/>\r\n              <\/svg>\r\n            <\/a>\r\n          <\/div> -->\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <!-- ========================================\r\n           SECTION 5: IA G\u00c9N\u00c9RATIVE\r\n           ======================================== -->\r\n      <section id=\"cbx-op-ia-generative\" class=\"cbx-op-section cbx-op-ai-section\">\r\n        <div class=\"cbx-op-container\">\r\n          <div class=\"cbx-op-section-header\">\r\n            <h2 class=\"cbx-op-section-title\">IA G\u00e9n\u00e9rative<\/h2>\r\n            <p class=\"cbx-op-section-subtitle\">\r\n              Offrez \u00e0 vos invit\u00e9s des souvenirs 100% personnalis\u00e9s avec plus de 25 th\u00e8mes et transformations\r\n            <\/p>\r\n          <\/div>\r\n          \r\n          <!-- Horizontal Tabs - Updated Categories -->\r\n          <div class=\"cbx-op-ai-tabs-wrapper\">\r\n            <div class=\"cbx-op-ai-tabs-scroll-indicator cbx-op-tabs-scroll-left\" id=\"cbx-op-tabs-scroll-left\">\r\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                <polyline points=\"15 18 9 12 15 6\"><\/polyline>\r\n              <\/svg>\r\n            <\/div>\r\n            <div class=\"cbx-op-ai-tabs\" id=\"cbx-op-ai-tabs\">\r\n              <button class=\"cbx-op-ai-tab active\" data-category=\"all\">Tous<\/button>\r\n              <button class=\"cbx-op-ai-tab\" data-category=\"Funny\">Funny and quirky<\/button>\r\n              <button class=\"cbx-op-ai-tab\" data-category=\"Fashion\">Style & Fashion<\/button>\r\n              <button class=\"cbx-op-ai-tab\" data-category=\"Fiction\">Fiction & Fantasy<\/button>\r\n              <button class=\"cbx-op-ai-tab\" data-category=\"Celebrities\">Celebrities & Personalities<\/button>\r\n              <button class=\"cbx-op-ai-tab\" data-category=\"Transformations\">Physical transformations<\/button>\r\n            <\/div>\r\n            <div class=\"cbx-op-ai-tabs-scroll-indicator cbx-op-tabs-scroll-right\" id=\"cbx-op-tabs-scroll-right\">\r\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                <polyline points=\"9 18 15 12 9 6\"><\/polyline>\r\n              <\/svg>\r\n            <\/div>\r\n          <\/div>\r\n          \r\n          <!-- Addon Grid -->\r\n          <div class=\"cbx-op-ai-grid\" id=\"cbx-op-ai-grid\">\r\n            <!-- Populated by JavaScript -->\r\n          <\/div>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <!-- ========================================\r\n           SECTION 6: GOODIES - UNIFIED GRID\r\n           ======================================== -->\r\n      <section id=\"cbx-op-goodies\" class=\"cbx-op-section cbx-op-section--gray-bg\">\r\n        <div class=\"cbx-op-container\">\r\n          <div class=\"cbx-op-section-header\">\r\n            <h2 class=\"cbx-op-section-title\">Goodies<\/h2>\r\n            <p class=\"cbx-op-section-subtitle\">\r\n              Transformez vos photos en souvenirs uniques avec nos options de goodies\r\n            <\/p>\r\n          <\/div>\r\n          \r\n          <!-- Unified Goodies Grid - Cards + Gallery items flow together -->\r\n          <div class=\"cbx-op-goodies-unified\" id=\"cbx-op-goodies-unified\">\r\n            <!-- Card 1 - Badge Aimant\u00e9 -->\r\n            <div class=\"cbx-op-goodie-item cbx-op-goodie-card\" data-goodie-index=\"0\">\r\n              <div class=\"cbx-op-goodie-card-image\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/1-scaled.jpg\" alt=\"Badge Aimant\u00e9\" loading=\"lazy\">\r\n              <\/div>\r\n              <h3>\r\n                <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                  <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\r\n                  <circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle>\r\n                <\/svg>\r\n                Badge Aimant\u00e9\r\n              <\/h3>\r\n              <p>Magn\u00e9tique et personnalisable, parfait pour les r\u00e9frig\u00e9rateurs.<\/p>\r\n            <\/div>\r\n            \r\n            <!-- Card 2 - Macaron -->\r\n            <div class=\"cbx-op-goodie-item cbx-op-goodie-card\" data-goodie-index=\"1\">\r\n              <div class=\"cbx-op-goodie-card-image\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/2-20250522-204213-scaled.jpg\" alt=\"Macaron\" loading=\"lazy\">\r\n              <\/div>\r\n              <h3>\r\n                <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                  <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\r\n                <\/svg>\r\n                Macaron\r\n              <\/h3>\r\n              <p>Badge classique avec finition professionnelle.<\/p>\r\n            <\/div>\r\n            \r\n            <!-- Card 3 - Porte-Cl\u00e9 -->\r\n            <div class=\"cbx-op-goodie-item cbx-op-goodie-card\" data-goodie-index=\"2\">\r\n              <div class=\"cbx-op-goodie-card-image\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/3-20250522-204218-scaled.jpg\" alt=\"Porte-Cl\u00e9\" loading=\"lazy\">\r\n              <\/div>\r\n              <h3>\r\n                <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                  <path d=\"M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4\"><\/path>\r\n                <\/svg>\r\n                Porte-Cl\u00e9\r\n              <\/h3>\r\n              <p>Un souvenir pratique \u00e0 garder toujours avec soi.<\/p>\r\n            <\/div>\r\n            \r\n            <!-- Gallery items 4-9 (hidden initially) -->\r\n            <div class=\"cbx-op-goodie-item cbx-op-goodie-gallery-item hidden\" data-goodie-index=\"3\">\r\n              <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/4-scaled.jpg\" alt=\"Goodies 4\" loading=\"lazy\">\r\n            <\/div>\r\n            <div class=\"cbx-op-goodie-item cbx-op-goodie-gallery-item hidden\" data-goodie-index=\"4\">\r\n              <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/5-2-scaled.jpg\" alt=\"Goodies 5\" loading=\"lazy\">\r\n            <\/div>\r\n            <div class=\"cbx-op-goodie-item cbx-op-goodie-gallery-item hidden\" data-goodie-index=\"5\">\r\n              <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/6-scaled.jpg\" alt=\"Goodies 6\" loading=\"lazy\">\r\n            <\/div>\r\n            <div class=\"cbx-op-goodie-item cbx-op-goodie-gallery-item hidden\" data-goodie-index=\"6\">\r\n              <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/7-scaled.jpg\" alt=\"Goodies 7\" loading=\"lazy\">\r\n            <\/div>\r\n            <div class=\"cbx-op-goodie-item cbx-op-goodie-gallery-item hidden\" data-goodie-index=\"7\">\r\n              <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/8-scaled.jpg\" alt=\"Goodies 8\" loading=\"lazy\">\r\n            <\/div>\r\n            <div class=\"cbx-op-goodie-item cbx-op-goodie-gallery-item hidden\" data-goodie-index=\"8\">\r\n              <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/9-scaled.jpg\" alt=\"Goodies 9\" loading=\"lazy\">\r\n            <\/div>\r\n          <\/div>\r\n          \r\n          <button class=\"cbx-op-load-more\" id=\"cbx-op-goodies-load-more\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"><\/line>\r\n              <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\r\n            <\/svg>\r\n            Charger plus\r\n          <\/button>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <!-- ========================================\r\n           SECTION 7: SERVICES (SketchBOT & Glambot)\r\n           ======================================== -->\r\n      <!-- <section id=\"cbx-op-services\" class=\"cbx-op-section\">\r\n        <div class=\"cbx-op-container\">\r\n          <div class=\"cbx-op-section-header\">\r\n            <h2 class=\"cbx-op-section-title\">Services Premium<\/h2>\r\n            <p class=\"cbx-op-section-subtitle\">\r\n              Des exp\u00e9riences uniques pour rendre votre \u00e9v\u00e9nement inoubliable\r\n            <\/p>\r\n          <\/div>\r\n          \r\n          <div class=\"cbx-op-services-grid\">\r\n            <div class=\"cbx-op-service-card\">\r\n              <div class=\"cbx-op-service-card-image\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/IMG_20190825_170512-20250522-181347-scaled.jpg\" alt=\"SketchBOT\" loading=\"lazy\">\r\n              <\/div>\r\n              <h3>SketchBOT<\/h3>\r\n              <p>Transformez vos photos en dessins artistiques avec notre IA r\u00e9volutionnaire. Les invit\u00e9s adorent recevoir une version stylis\u00e9e de leurs photos.<\/p>\r\n              <a href=\"https:\/\/cheeesebox.ca\/produit\/experience-sketchbot\/\" class=\"cbx-op-service-btn\">\r\n                En Savoir Plus\r\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                  <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n                <\/svg>\r\n              <\/a>\r\n            <\/div>\r\n            \r\n            <div class=\"cbx-op-service-card\">\r\n              <div class=\"cbx-op-service-card-image\">\r\n                <img decoding=\"async\" src=\"https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/try-scaled.jpg\" alt=\"Glambot\" loading=\"lazy\">\r\n              <\/div>\r\n              <h3>Glambot<\/h3>\r\n              <p>Capturez des vid\u00e9os en slow motion spectaculaires. Parfait pour les moments d'action et les sourires radieux.<\/p>\r\n              <a href=\"https:\/\/cheeesebox.ca\/glambot-montreal\/\" class=\"cbx-op-service-btn\">\r\n                En Savoir Plus\r\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                  <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n                <\/svg>\r\n              <\/a>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/section> -->\r\n\r\n      <!-- ========================================\r\n           SECTION 8: FAQ (Compact)\r\n           ======================================== -->\r\n      <section id=\"cbx-op-faq\" class=\"cbx-op-section cbx-op-faq-section\">\r\n        <div class=\"cbx-op-container\">\r\n          <div class=\"cbx-op-section-header\">\r\n            <h2 class=\"cbx-op-section-title\">Questions Fr\u00e9quentes<\/h2>\r\n          <\/div>\r\n          \r\n          <div class=\"cbx-op-faq-list\">\r\n            <div class=\"cbx-op-faq-item\">\r\n              <button class=\"cbx-op-faq-question\">\r\n                <span>Qu'est-ce que l'IA g\u00e9n\u00e9rative et comment l'utilise-t-on dans le photobooth ?<\/span>\r\n                <svg class=\"cbx-op-faq-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                  <polyline points=\"6 9 12 15 18 9\"><\/polyline>\r\n                <\/svg>\r\n              <\/button>\r\n              <div class=\"cbx-op-faq-answer\">\r\n                <p>L'IA g\u00e9n\u00e9rative utilise des algorithmes d'apprentissage automatique pour cr\u00e9er des variantes cr\u00e9atives de vos photos. Dans nos photobooths, elle permet de g\u00e9n\u00e9rer des looks artistiques, des modifications de style, ou m\u00eame des fonds enti\u00e8rement nouveaux en temps r\u00e9el.<\/p>\r\n              <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"cbx-op-faq-item\">\r\n              <button class=\"cbx-op-faq-question\">\r\n                <span>Comment puis-je personnaliser le photobooth pour mon \u00e9v\u00e9nement ?<\/span>\r\n                <svg class=\"cbx-op-faq-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                  <polyline points=\"6 9 12 15 18 9\"><\/polyline>\r\n                <\/svg>\r\n              <\/button>\r\n              <div class=\"cbx-op-faq-answer\">\r\n                <p>Nous offrons plusieurs options de personnalisation : habillage magn\u00e9tique r\u00e9utilisable, designs personnalis\u00e9s imprim\u00e9s, fonds personnalis\u00e9s, et int\u00e9gration de votre logo. Notre \u00e9quipe travaille avec vous d\u00e8s la consultation pour cr\u00e9er une exp\u00e9rience unique \u00e0 votre marque.<\/p>\r\n              <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"cbx-op-faq-item\">\r\n              <button class=\"cbx-op-faq-question\">\r\n                <span>Quels types de backdrops sont disponibles ?<\/span>\r\n                <svg class=\"cbx-op-faq-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                  <polyline points=\"6 9 12 15 18 9\"><\/polyline>\r\n                <\/svg>\r\n              <\/button>\r\n              <div class=\"cbx-op-faq-answer\">\r\n                <p>Nos backdrops incluent des toiles physiques (blanc, noir, tissu textur\u00e9), des \u00e9crans LED interactifs, des fonds virtuels avec r\u00e9alit\u00e9 augment\u00e9e, et m\u00eame des fonds g\u00e9n\u00e9r\u00e9s par IA. Vous pouvez choisir selon votre \u00e9v\u00e9nement et vos pr\u00e9f\u00e9rences esth\u00e9tiques.<\/p>\r\n              <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"cbx-op-faq-item\">\r\n              <button class=\"cbx-op-faq-question\">\r\n                <span>Comment fonctionne le processus de r\u00e9servation ?<\/span>\r\n                <svg class=\"cbx-op-faq-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                  <polyline points=\"6 9 12 15 18 9\"><\/polyline>\r\n                <\/svg>\r\n              <\/button>\r\n              <div class=\"cbx-op-faq-answer\">\r\n                <p>Le processus est simple : contactez-nous pour une consultation gratuite, discutez de votre vision, recevez un devis personnalis\u00e9, confirmez votre r\u00e9servation, et nous g\u00e9rons le reste ! Notre \u00e9quipe s'assurera que tout est parfait pour votre \u00e9v\u00e9nement.<\/p>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <!-- ========================================\r\n           DETAIL PANEL (for AI addons - Before\/After pairs)\r\n           ======================================== -->\r\n      <div class=\"cbx-op-overlay\" id=\"cbx-op-overlay\"><\/div>\r\n      <div class=\"cbx-op-detail-panel\" id=\"cbx-op-detail-panel\">\r\n        <div class=\"cbx-op-detail-header\">\r\n          <h2 class=\"cbx-op-detail-title\" id=\"cbx-op-detail-title\"><\/h2>\r\n          <button class=\"cbx-op-close-btn\" id=\"cbx-op-close-detail\">\u00d7<\/button>\r\n        <\/div>\r\n        <div class=\"cbx-op-detail-content\" id=\"cbx-op-detail-content\">\r\n          <!-- Before\/After pairs will be rendered here -->\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- ========================================\r\n           LIGHTBOX MODAL\r\n           ======================================== -->\r\n      <div class=\"cbx-op-lightbox\" id=\"cbx-op-lightbox\">\r\n        <button class=\"cbx-op-lightbox-close\" id=\"cbx-op-lightbox-close\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line>\r\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line>\r\n          <\/svg>\r\n        <\/button>\r\n        <button class=\"cbx-op-lightbox-nav cbx-op-lightbox-prev\" id=\"cbx-op-lightbox-prev\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n            <polyline points=\"15 18 9 12 15 6\"><\/polyline>\r\n          <\/svg>\r\n        <\/button>\r\n        <div class=\"cbx-op-lightbox-content\">\r\n          <img decoding=\"async\" class=\"cbx-op-lightbox-img\" id=\"cbx-op-lightbox-img\" src=\"\" alt=\"\" draggable=\"false\">\r\n        <\/div>\r\n        <button class=\"cbx-op-lightbox-nav cbx-op-lightbox-next\" id=\"cbx-op-lightbox-next\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n            <polyline points=\"9 18 15 12 9 6\"><\/polyline>\r\n          <\/svg>\r\n        <\/button>\r\n        <div class=\"cbx-op-lightbox-counter\" id=\"cbx-op-lightbox-counter\"><\/div>\r\n        <div class=\"cbx-op-lightbox-swipe-hint\" id=\"cbx-op-lightbox-hint\">\r\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n          <\/svg>\r\n          Glissez pour naviguer\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- External Libraries -->\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\r\n\r\n    <!-- Addon Data - Updated Categories -->\r\n    <script>\r\n    const CBX_ADDONS_DATA = {\r\n      addons: [\r\n        \/\/ Funny and quirky\r\n        { id: 1, name: \"Awkward Family Photo\", type: \"visual\", pairs: 1, category: \"Funny\", icon: \"awkward-family-photo\", slug: \"awkward-family-photo\" },\r\n        { id: 2, name: \"Face Swap\", type: \"visual\", pairs: 1, category: \"Funny\", icon: \"face-swap\", slug: \"face-swap\" },\r\n        { id: 3, name: \"Instant Family\", type: \"visual\", pairs: 1, category: \"Funny\", icon: \"instant-family\", slug: \"instant-family\" },\r\n        { id: 4, name: \"Hot or Not\", type: \"visual\", pairs: 1, category: \"Funny\", icon: \"hot-or-not\", slug: \"hot-or-not\" },\r\n        \r\n        \/\/ Style & Fashion\r\n        { id: 5, name: \"Fashion Time Machine\", type: \"visual\", pairs: 9, category: \"Fashion\", icon: \"fashion-time-machine\", slug: \"fashion-time-machine\" },\r\n        { id: 6, name: \"Prom Night\", type: \"visual\", pairs: 4, category: \"Fashion\", icon: \"prom-night\", slug: \"prom-night\" },\r\n        \r\n        \/\/ Fiction & Fantasy\r\n        { id: 7, name: \"Cartoonify\", type: \"visual\", pairs: 2, category: \"Fiction\", icon: \"cartoonify\", slug: \"cartoonify\" },\r\n        { id: 8, name: \"Toy Box\", type: \"visual\", pairs: 1, category: \"Fiction\", icon: \"toy-box\", slug: \"toy-box\" },\r\n        { id: 9, name: \"Action Figures\", type: \"visual\", pairs: 3, category: \"Fiction\", icon: \"action-figures\", slug: \"action-figures\" },\r\n        { id: 10, name: \"Art Studio\", type: \"visual\", pairs: 3, category: \"Fiction\", icon: \"art-studio\", slug: \"art-studio\" },\r\n        { id: 11, name: \"Game Room\", type: \"visual\", pairs: 7, category: \"Fiction\", icon: \"game-room\", slug: \"game-room\" },\r\n        { id: 12, name: \"Halloween\", type: \"visual\", pairs: 2, category: \"Fiction\", icon: \"halloween\", slug: \"halloween\" },\r\n        \r\n        \/\/ Celebrities & Personalities\r\n        { id: 13, name: \"Celebrities\", type: \"visual\", pairs: 2, category: \"Celebrities\", icon: \"celebrities\", slug: \"celebrities\" },\r\n        { id: 14, name: \"Princesses\", type: \"visual\", pairs: 1, category: \"Celebrities\", icon: \"princesses\", slug: \"princesses\" },\r\n        { id: 15, name: \"Superhero Maker\", type: \"visual\", pairs: 1, category: \"Celebrities\", icon: \"superhero-maker\", slug: \"superhero-maker\" },\r\n        { id: 16, name: \"Bobble Heads\", type: \"visual\", pairs: 1, category: \"Celebrities\", icon: \"bobble-heads\", slug: \"bobble-heads\" },\r\n        \r\n        \/\/ Physical transformations\r\n        { id: 17, name: \"Age Changer\", type: \"visual\", pairs: 1, category: \"Transformations\", icon: \"age-changer\", slug: \"age-changer\" },\r\n        { id: 18, name: \"Baby Maker\", type: \"visual\", pairs: 2, category: \"Transformations\", icon: \"baby-maker\", slug: \"baby-maker\" },\r\n        { id: 19, name: \"Beauty Filter\", type: \"visual\", pairs: 1, category: \"Transformations\", icon: \"beauty-filter\", slug: \"beauty-filter\" },\r\n        { id: 20, name: \"New Identity\", type: \"visual\", pairs: 1, category: \"Transformations\", icon: \"new-identity\", slug: \"new-identity\" },\r\n        { id: 21, name: \"Age Collage\", type: \"visual\", pairs: 1, category: \"Transformations\", icon: \"age-collage\", slug: \"age-collage\" },\r\n        \r\n        \/\/ Additional\r\n        { id: 22, name: \"Christmas\", type: \"visual\", pairs: 1, category: \"Fiction\", icon: \"christmas\", slug: \"christmas\" },\r\n        { id: 23, name: \"Elvis\", type: \"visual\", pairs: 1, category: \"Celebrities\", icon: \"elvis\", slug: \"elvis\" },\r\n        { id: 24, name: \"Yearbook\", type: \"visual\", pairs: 1, category: \"Fashion\", icon: \"yearbook\", slug: \"yearbook\" },\r\n        { id: 25, name: \"Custom\", type: \"visual\", pairs: 5, category: \"Fiction\", icon: \"custom\", slug: \"custom\" }\r\n      ]\r\n    };\r\n    \r\n    \/\/ Goodies images for lightbox (all 9 images)\r\n    const CBX_GOODIES_IMAGES = [\r\n      'https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/1-scaled.jpg',\r\n      'https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/2-20250522-204213-scaled.jpg',\r\n      'https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/3-20250522-204218-scaled.jpg',\r\n      'https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/4-scaled.jpg',\r\n      'https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/5-2-scaled.jpg',\r\n      'https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/6-scaled.jpg',\r\n      'https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/7-scaled.jpg',\r\n      'https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/8-scaled.jpg',\r\n      'https:\/\/cheeesebox.ca\/wp-content\/uploads\/2025\/05\/9-scaled.jpg'\r\n    ];\r\n    <\/script>\r\n\r\n    <link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\">\r\n\r\n    <script>\r\n    class CBXOptionsApp {\r\n      constructor() {\r\n        this.currentAddon = null;\r\n        this.currentCategory = 'all';\r\n        this.lightboxImages = [];\r\n        this.lightboxIndex = 0;\r\n        this.touchStartX = 0;\r\n        this.touchEndX = 0;\r\n        this.init();\r\n      }\r\n\r\n      init() {\r\n        this.setupThreeBackground();\r\n        this.renderAddonGrid();\r\n        this.attachEventListeners();\r\n        this.initSliders();\r\n        this.initFAQ();\r\n        this.initLoadMore();\r\n        this.initLightbox();\r\n        this.initGoodiesCards(); \/\/ Handles unified goodies grid + load more\r\n        this.initMobileGalleryVisibility(); \/\/ Handle mobile initial visibility\r\n      }\r\n      \r\n      initMobileGalleryVisibility() {\r\n        \/\/ On mobile, hide the 3rd visible item in galleries\r\n        const isMobile = window.innerWidth <= 768;\r\n        if (!isMobile) return;\r\n        \r\n        document.querySelectorAll('.cbx-op-gallery').forEach(gallery => {\r\n          const visibleItems = gallery.querySelectorAll('.cbx-op-gallery-item:not(.hidden)');\r\n          if (visibleItems.length > 2) {\r\n            \/\/ Hide items after the 2nd one\r\n            for (let i = 2; i < visibleItems.length; i++) {\r\n              visibleItems[i].classList.add('hidden');\r\n            }\r\n          }\r\n        });\r\n        \r\n        \/\/ Also handle goodies unified grid\r\n        const goodiesUnified = document.getElementById('cbx-op-goodies-unified');\r\n        if (goodiesUnified) {\r\n          const visibleItems = goodiesUnified.querySelectorAll('.cbx-op-goodie-item:not(.hidden)');\r\n          if (visibleItems.length > 2) {\r\n            for (let i = 2; i < visibleItems.length; i++) {\r\n              visibleItems[i].classList.add('hidden');\r\n            }\r\n          }\r\n        }\r\n      }\r\n\r\n      setupThreeBackground() {\r\n        const bgContainer = document.getElementById('cbx-op-three-bg');\r\n        \r\n        const canvas = document.createElement('canvas');\r\n        const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');\r\n        \r\n        if (!gl) {\r\n          bgContainer.style.background = 'linear-gradient(135deg, rgba(12, 30, 138, 0.03) 0%, rgba(255, 183, 2, 0.03) 100%)';\r\n          return;\r\n        }\r\n\r\n        try {\r\n          const scene = new THREE.Scene();\r\n          const camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 1000);\r\n          const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });\r\n          \r\n          renderer.setSize(window.innerWidth, window.innerHeight);\r\n          renderer.setClearColor(0xffffff, 0);\r\n          bgContainer.appendChild(renderer.domElement);\r\n\r\n          camera.position.z = 50;\r\n\r\n          const particles = [];\r\n          const particleCount = 25;\r\n\r\n          for (let i = 0; i < particleCount; i++) {\r\n            const geometry = new THREE.IcosahedronGeometry(Math.random() * 2 + 0.5, 2);\r\n            const material = new THREE.MeshPhongMaterial({\r\n              color: new THREE.Color().setHSL(Math.random() * 0.1 + 0.6, 0.6, 0.6),\r\n              transparent: true,\r\n              opacity: 0.3,\r\n              wireframe: false\r\n            });\r\n            const mesh = new THREE.Mesh(geometry, material);\r\n\r\n            mesh.position.x = (Math.random() - 0.5) * 200;\r\n            mesh.position.y = (Math.random() - 0.5) * 200;\r\n            mesh.position.z = (Math.random() - 0.5) * 100;\r\n\r\n            mesh.velocity = {\r\n              x: (Math.random() - 0.5) * 0.2,\r\n              y: (Math.random() - 0.5) * 0.2,\r\n              z: (Math.random() - 0.5) * 0.2\r\n            };\r\n\r\n            scene.add(mesh);\r\n            particles.push(mesh);\r\n          }\r\n\r\n          const light1 = new THREE.PointLight(0x0c1e8a, 0.8, 100);\r\n          light1.position.set(50, 50, 50);\r\n          scene.add(light1);\r\n\r\n          const light2 = new THREE.PointLight(0xffb702, 0.6, 100);\r\n          light2.position.set(-50, -50, 50);\r\n          scene.add(light2);\r\n\r\n          const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);\r\n          scene.add(ambientLight);\r\n\r\n          const animate = () => {\r\n            requestAnimationFrame(animate);\r\n\r\n            particles.forEach(particle => {\r\n              particle.position.x += particle.velocity.x;\r\n              particle.position.y += particle.velocity.y;\r\n              particle.position.z += particle.velocity.z;\r\n\r\n              particle.rotation.x += particle.velocity.x * 0.01;\r\n              particle.rotation.y += particle.velocity.y * 0.01;\r\n\r\n              if (Math.abs(particle.position.x) > 100) particle.velocity.x *= -1;\r\n              if (Math.abs(particle.position.y) > 100) particle.velocity.y *= -1;\r\n              if (Math.abs(particle.position.z) > 50) particle.velocity.z *= -1;\r\n            });\r\n\r\n            renderer.render(scene, camera);\r\n          };\r\n\r\n          animate();\r\n\r\n          window.addEventListener('resize', () => {\r\n            camera.aspect = window.innerWidth \/ window.innerHeight;\r\n            camera.updateProjectionMatrix();\r\n            renderer.setSize(window.innerWidth, window.innerHeight);\r\n          });\r\n        } catch (e) {\r\n          console.log('Three.js background error:', e);\r\n        }\r\n      }\r\n\r\n      renderAddonGrid(category = 'all') {\r\n        const grid = document.getElementById('cbx-op-ai-grid');\r\n        if (!grid) return;\r\n        \r\n        let addons = CBX_ADDONS_DATA.addons.filter(a => a.pairs > 0);\r\n        \r\n        if (category !== 'all') {\r\n          addons = addons.filter(a => a.category === category);\r\n        }\r\n        \r\n        grid.innerHTML = addons.map(addon => `\r\n          <div class=\"cbx-op-ai-addon\" data-addon-id=\"${addon.id}\" data-addon-slug=\"${addon.slug}\" role=\"button\" tabindex=\"0\" aria-label=\"Voir ${addon.name}\">\r\n            <div class=\"cbx-op-ai-addon-icon\" style=\"background-image: url('\/wp-content\/plugins\/custom-op\/addons\/${addon.name}\/icon.webp')\"><\/div>\r\n            <div class=\"cbx-op-ai-addon-name\">${addon.name}<\/div>\r\n            <span class=\"cbx-op-addon-arrow\">\r\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n              <\/svg>\r\n            <\/span>\r\n          <\/div>\r\n        `).join('');\r\n        \r\n        grid.querySelectorAll('.cbx-op-ai-addon').forEach(el => {\r\n          el.addEventListener('click', () => this.openAddonDetail(el.dataset.addonId));\r\n          el.addEventListener('keydown', (e) => {\r\n            if (e.key === 'Enter' || e.key === ' ') {\r\n              e.preventDefault();\r\n              this.openAddonDetail(el.dataset.addonId);\r\n            }\r\n          });\r\n        });\r\n      }\r\n\r\n      attachEventListeners() {\r\n        \/\/ Tab navigation\r\n        const tabsContainer = document.getElementById('cbx-op-ai-tabs');\r\n        const scrollLeftIndicator = document.getElementById('cbx-op-tabs-scroll-left');\r\n        const scrollRightIndicator = document.getElementById('cbx-op-tabs-scroll-right');\r\n        \r\n        document.querySelectorAll('.cbx-op-ai-tab').forEach(tab => {\r\n          tab.addEventListener('click', () => {\r\n            document.querySelectorAll('.cbx-op-ai-tab').forEach(t => t.classList.remove('active'));\r\n            tab.classList.add('active');\r\n            this.currentCategory = tab.dataset.category;\r\n            this.renderAddonGrid(this.currentCategory);\r\n            \r\n            \/\/ Auto-scroll active tab into view on mobile\r\n            if (window.innerWidth <= 768 && tabsContainer) {\r\n              tab.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });\r\n            }\r\n          });\r\n        });\r\n        \r\n        \/\/ Update scroll indicators on scroll\r\n        if (tabsContainer) {\r\n          const updateScrollIndicators = () => {\r\n            const isMobile = window.innerWidth <= 768;\r\n            if (!isMobile) {\r\n              if (scrollLeftIndicator) scrollLeftIndicator.style.display = 'none';\r\n              if (scrollRightIndicator) scrollRightIndicator.style.display = 'none';\r\n              return;\r\n            }\r\n            \r\n            const scrollLeft = tabsContainer.scrollLeft;\r\n            const maxScroll = tabsContainer.scrollWidth - tabsContainer.clientWidth;\r\n            \r\n            if (scrollLeftIndicator) {\r\n              scrollLeftIndicator.style.display = scrollLeft > 10 ? 'flex' : 'none';\r\n            }\r\n            if (scrollRightIndicator) {\r\n              scrollRightIndicator.style.display = scrollLeft < maxScroll - 10 ? 'flex' : 'none';\r\n            }\r\n          };\r\n          \r\n          tabsContainer.addEventListener('scroll', updateScrollIndicators);\r\n          window.addEventListener('resize', updateScrollIndicators);\r\n          \r\n          \/\/ Initial check\r\n          setTimeout(updateScrollIndicators, 100);\r\n        }\r\n\r\n        \/\/ Close detail panel\r\n        const closeBtn = document.getElementById('cbx-op-close-detail');\r\n        const overlay = document.getElementById('cbx-op-overlay');\r\n        \r\n        if (closeBtn) {\r\n          closeBtn.addEventListener('click', () => this.closeAddonDetail());\r\n        }\r\n        \r\n        if (overlay) {\r\n          overlay.addEventListener('click', () => this.closeAddonDetail());\r\n        }\r\n\r\n        \/\/ Hero card smooth scroll\r\n        document.querySelectorAll('.cbx-op-hero-card[data-section]').forEach(card => {\r\n          card.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            const target = document.getElementById('cbx-op-' + card.dataset.section);\r\n            if (target) {\r\n              target.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n            }\r\n          });\r\n        });\r\n\r\n        \/\/ Escape key to close panels\r\n        document.addEventListener('keydown', (e) => {\r\n          if (e.key === 'Escape') {\r\n            this.closeAddonDetail();\r\n            this.closeLightbox();\r\n          }\r\n        });\r\n      }\r\n\r\n      openAddonDetail(addonId) {\r\n        const addon = CBX_ADDONS_DATA.addons.find(a => a.id === parseInt(addonId));\r\n        if (!addon) return;\r\n\r\n        this.currentAddon = addon;\r\n        \r\n        document.getElementById('cbx-op-detail-title').textContent = addon.name;\r\n        \r\n        \/\/ Render before\/after pairs\r\n        this.renderAddonPairs(addon);\r\n\r\n        document.getElementById('cbx-op-detail-panel').classList.add('open');\r\n        document.getElementById('cbx-op-overlay').classList.add('open');\r\n        document.body.style.overflow = 'hidden';\r\n      }\r\n\r\n      closeAddonDetail() {\r\n        document.getElementById('cbx-op-detail-panel').classList.remove('open');\r\n        document.getElementById('cbx-op-overlay').classList.remove('open');\r\n        document.body.style.overflow = '';\r\n      }\r\n\r\n      renderAddonPairs(addon) {\r\n        const container = document.getElementById('cbx-op-detail-content');\r\n        const addonFolderPath = `\/wp-content\/plugins\/custom-op\/addons\/${addon.name}`;\r\n        const slug = addon.slug.toLowerCase().replace(\/ \/g, '-');\r\n        \r\n        let pairsHTML = '';\r\n        \r\n        for (let i = 1; i <= addon.pairs; i++) {\r\n          const beforeSrc = `${addonFolderPath}\/before--${slug}--${i}.webp`;\r\n          const afterSrc = `${addonFolderPath}\/after--${slug}--${i}.webp`;\r\n          \r\n          pairsHTML += `\r\n            <div class=\"cbx-op-detail-pair\">\r\n              <div class=\"cbx-op-detail-pair-label\">\r\n                <span>\r\n                  <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                    <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\r\n                    <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"><\/line>\r\n                    <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"><\/line>\r\n                  <\/svg>\r\n                  Avant\r\n                <\/span>\r\n                <span>\r\n                  Apr\u00e8s\r\n                  <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                    <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"><\/path>\r\n                    <polyline points=\"22 4 12 14.01 9 11.01\"><\/polyline>\r\n                  <\/svg>\r\n                <\/span>\r\n              <\/div>\r\n              <div class=\"cbx-op-detail-pair-images\">\r\n                <div class=\"cbx-op-detail-pair-image-wrapper\">\r\n                  <span class=\"cbx-op-detail-pair-image-label\">Avant<\/span>\r\n                  <img decoding=\"async\" src=\"${beforeSrc}\" alt=\"Avant ${i}\" loading=\"lazy\" onclick=\"app.openLightboxFromDetail(this)\">\r\n                <\/div>\r\n                <div class=\"cbx-op-detail-pair-image-wrapper\">\r\n                  <span class=\"cbx-op-detail-pair-image-label\">Apr\u00e8s<\/span>\r\n                  <img decoding=\"async\" src=\"${afterSrc}\" alt=\"Apr\u00e8s ${i}\" loading=\"lazy\" onclick=\"app.openLightboxFromDetail(this)\">\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n          `;\r\n        }\r\n        \r\n        container.innerHTML = pairsHTML;\r\n      }\r\n\r\n      openLightboxFromDetail(img) {\r\n        const allImages = document.querySelectorAll('.cbx-op-detail-pair-images img');\r\n        const sources = Array.from(allImages).map(i => i.src);\r\n        const index = sources.indexOf(img.src);\r\n        this.openLightbox(sources, index);\r\n      }\r\n\r\n      initSliders() {\r\n        document.querySelectorAll('.cbx-op-comparison-slider').forEach(slider => {\r\n          this.initComparisonSlider(slider);\r\n        });\r\n      }\r\n\r\n      initComparisonSlider(slider) {\r\n        const beforeImg = slider.querySelector('.cbx-op-comparison-img-before');\r\n        const afterImg = slider.querySelector('.cbx-op-comparison-img-after');\r\n        const handle = slider.querySelector('.cbx-op-comparison-handle');\r\n        if (!beforeImg || !afterImg || !handle) return;\r\n\r\n        let isDragging = false;\r\n\r\n        const updatePosition = (x) => {\r\n          const rect = slider.getBoundingClientRect();\r\n          let pos = (x - rect.left) \/ rect.width;\r\n          pos = Math.max(0, Math.min(1, pos));\r\n          const percent = pos * 100;\r\n          \r\n          beforeImg.style.clipPath = `inset(0 ${100 - percent}% 0 0)`;\r\n          afterImg.style.clipPath = `inset(0 0 0 ${percent}%)`;\r\n          handle.style.left = `${percent}%`;\r\n        };\r\n\r\n        \/\/ Initialize at 50%\r\n        updatePosition(slider.getBoundingClientRect().left + slider.getBoundingClientRect().width \/ 2);\r\n\r\n        slider.addEventListener('mousedown', (e) => {\r\n          isDragging = true;\r\n          updatePosition(e.clientX);\r\n        });\r\n\r\n        document.addEventListener('mousemove', (e) => {\r\n          if (isDragging) updatePosition(e.clientX);\r\n        });\r\n\r\n        document.addEventListener('mouseup', () => {\r\n          isDragging = false;\r\n        });\r\n\r\n        slider.addEventListener('touchstart', (e) => {\r\n          isDragging = true;\r\n          updatePosition(e.touches[0].clientX);\r\n        });\r\n\r\n        slider.addEventListener('touchmove', (e) => {\r\n          if (isDragging) {\r\n            e.preventDefault();\r\n            updatePosition(e.touches[0].clientX);\r\n          }\r\n        });\r\n\r\n        slider.addEventListener('touchend', () => {\r\n          isDragging = false;\r\n        });\r\n      }\r\n\r\n      initFAQ() {\r\n        document.querySelectorAll('.cbx-op-faq-question').forEach(btn => {\r\n          btn.addEventListener('click', () => {\r\n            const item = btn.closest('.cbx-op-faq-item');\r\n            const isActive = item.classList.contains('active');\r\n            \r\n            document.querySelectorAll('.cbx-op-faq-item').forEach(i => i.classList.remove('active'));\r\n            \r\n            if (!isActive) {\r\n              item.classList.add('active');\r\n            }\r\n          });\r\n        });\r\n      }\r\n\r\n      initLoadMore() {\r\n        document.querySelectorAll('.cbx-op-load-more').forEach(btn => {\r\n          \/\/ Skip goodies - handled in initGoodiesCards\r\n          if (btn.id === 'cbx-op-goodies-load-more') return;\r\n          \r\n          btn.addEventListener('click', () => {\r\n            const gallery = btn.closest('.cbx-op-gallery');\r\n            if (!gallery) return;\r\n            \r\n            const hiddenItems = gallery.querySelectorAll('.cbx-op-gallery-item.hidden');\r\n            \r\n            \/\/ Show 2 items on mobile, 3 on desktop\r\n            const isMobile = window.innerWidth <= 768;\r\n            const itemsToShow = Math.min(isMobile ? 2 : 3, hiddenItems.length);\r\n            \r\n            for (let i = 0; i < itemsToShow; i++) {\r\n              hiddenItems[i].classList.remove('hidden');\r\n            }\r\n            \r\n            this.updateLightboxImages(gallery);\r\n            \r\n            if (gallery.querySelectorAll('.cbx-op-gallery-item.hidden').length === 0) {\r\n              btn.style.display = 'none';\r\n            }\r\n          });\r\n        });\r\n      }\r\n\r\n      initLightbox() {\r\n        const lightbox = document.getElementById('cbx-op-lightbox');\r\n        const closeBtn = document.getElementById('cbx-op-lightbox-close');\r\n        const prevBtn = document.getElementById('cbx-op-lightbox-prev');\r\n        const nextBtn = document.getElementById('cbx-op-lightbox-next');\r\n        const img = document.getElementById('cbx-op-lightbox-img');\r\n\r\n        closeBtn.addEventListener('click', () => this.closeLightbox());\r\n        lightbox.addEventListener('click', (e) => {\r\n          if (e.target === lightbox || e.target.classList.contains('cbx-op-lightbox-content')) {\r\n            this.closeLightbox();\r\n          }\r\n        });\r\n\r\n        prevBtn.addEventListener('click', (e) => {\r\n          e.stopPropagation();\r\n          this.navigateLightbox(-1);\r\n        });\r\n        nextBtn.addEventListener('click', (e) => {\r\n          e.stopPropagation();\r\n          this.navigateLightbox(1);\r\n        });\r\n\r\n        document.addEventListener('keydown', (e) => {\r\n          if (!lightbox.classList.contains('open')) return;\r\n          if (e.key === 'ArrowLeft') this.navigateLightbox(-1);\r\n          if (e.key === 'ArrowRight') this.navigateLightbox(1);\r\n        });\r\n\r\n        \/\/ Touch swipe support\r\n        lightbox.addEventListener('touchstart', (e) => {\r\n          this.touchStartX = e.changedTouches[0].screenX;\r\n        }, { passive: true });\r\n\r\n        lightbox.addEventListener('touchend', (e) => {\r\n          this.touchEndX = e.changedTouches[0].screenX;\r\n          this.handleSwipe();\r\n        }, { passive: true });\r\n\r\n        \/\/ Use event delegation for all gallery items\r\n        document.addEventListener('click', (e) => {\r\n          const galleryItem = e.target.closest('.cbx-op-gallery-item');\r\n          if (galleryItem) {\r\n            const gallery = galleryItem.closest('.cbx-op-gallery');\r\n            if (gallery) {\r\n              const imgEl = galleryItem.querySelector('img');\r\n              if (imgEl) {\r\n                \/\/ Get ALL images from the gallery (including hidden ones)\r\n                const allItems = gallery.querySelectorAll('.cbx-op-gallery-item img');\r\n                const allSources = Array.from(allItems).map(i => i.src);\r\n                const index = allSources.indexOf(imgEl.src);\r\n                this.openLightbox(allSources, index);\r\n              }\r\n            }\r\n          }\r\n        });\r\n\r\n        \/\/ Initialize galleries\r\n        document.querySelectorAll('.cbx-op-gallery').forEach(gallery => {\r\n          this.updateLightboxImages(gallery);\r\n        });\r\n      }\r\n\r\n      handleSwipe() {\r\n        const swipeThreshold = 50;\r\n        const diff = this.touchStartX - this.touchEndX;\r\n        \r\n        if (Math.abs(diff) > swipeThreshold) {\r\n          if (diff > 0) {\r\n            \/\/ Swiped left - next\r\n            this.navigateLightbox(1);\r\n          } else {\r\n            \/\/ Swiped right - prev\r\n            this.navigateLightbox(-1);\r\n          }\r\n        }\r\n      }\r\n\r\n      initGoodiesCards() {\r\n        \/\/ Unified goodies grid - all items open lightbox\r\n        const goodiesUnified = document.getElementById('cbx-op-goodies-unified');\r\n        if (!goodiesUnified) return;\r\n        \r\n        \/\/ All goodies items (cards + gallery)\r\n        const allItems = goodiesUnified.querySelectorAll('.cbx-op-goodie-item');\r\n        \r\n        allItems.forEach(item => {\r\n          item.addEventListener('click', () => {\r\n            const index = parseInt(item.dataset.goodieIndex);\r\n            this.openLightbox(CBX_GOODIES_IMAGES, index);\r\n          });\r\n        });\r\n        \r\n        \/\/ Load more button for goodies\r\n        const loadMoreBtn = document.getElementById('cbx-op-goodies-load-more');\r\n        if (loadMoreBtn) {\r\n          loadMoreBtn.addEventListener('click', () => {\r\n            const hiddenItems = goodiesUnified.querySelectorAll('.cbx-op-goodie-item.hidden');\r\n            \/\/ Show 2 items on mobile, 3 on desktop\r\n            const isMobile = window.innerWidth <= 768;\r\n            const itemsToShow = Math.min(isMobile ? 2 : 3, hiddenItems.length);\r\n            \r\n            for (let i = 0; i < itemsToShow; i++) {\r\n              hiddenItems[i].classList.remove('hidden');\r\n            }\r\n            \r\n            if (goodiesUnified.querySelectorAll('.cbx-op-goodie-item.hidden').length === 0) {\r\n              loadMoreBtn.style.display = 'none';\r\n            }\r\n          });\r\n        }\r\n      }\r\n\r\n      updateGoodiesGalleryLightbox() {\r\n        \/\/ Deprecated - handled in initGoodiesCards now\r\n      }\r\n\r\n      updateLightboxImages(gallery) {\r\n        \/\/ Get ALL images (including hidden ones) for lightbox\r\n        const allItems = gallery.querySelectorAll('.cbx-op-gallery-item img');\r\n        const allSources = Array.from(allItems).map(i => i.src);\r\n        \r\n        \/\/ Get visible items for click handling\r\n        const visibleItems = gallery.querySelectorAll('.cbx-op-gallery-item:not(.hidden) img');\r\n        visibleItems.forEach((img) => {\r\n          img.parentElement.addEventListener('click', () => {\r\n            \/\/ Find index in ALL images, not just visible\r\n            const index = allSources.indexOf(img.src);\r\n            this.openLightbox(allSources, index);\r\n          });\r\n        });\r\n      }\r\n\r\n      openLightbox(images, index) {\r\n        this.lightboxImages = images;\r\n        this.lightboxIndex = index;\r\n        \r\n        const lightbox = document.getElementById('cbx-op-lightbox');\r\n        const img = document.getElementById('cbx-op-lightbox-img');\r\n        const counter = document.getElementById('cbx-op-lightbox-counter');\r\n        const hint = document.getElementById('cbx-op-lightbox-hint');\r\n        \r\n        img.src = images[index];\r\n        counter.textContent = `${index + 1} \/ ${images.length}`;\r\n        \r\n        \/\/ Hide hint after first few uses\r\n        if (localStorage.getItem('cbx-lightbox-hint-seen')) {\r\n          hint.style.display = 'none';\r\n        } else {\r\n          hint.style.display = 'flex';\r\n          setTimeout(() => {\r\n            hint.style.display = 'none';\r\n            localStorage.setItem('cbx-lightbox-hint-seen', 'true');\r\n          }, 3000);\r\n        }\r\n        \r\n        lightbox.classList.add('open');\r\n        document.body.style.overflow = 'hidden';\r\n      }\r\n\r\n      closeLightbox() {\r\n        document.getElementById('cbx-op-lightbox').classList.remove('open');\r\n        document.body.style.overflow = '';\r\n      }\r\n\r\n      navigateLightbox(direction) {\r\n        this.lightboxIndex += direction;\r\n        if (this.lightboxIndex < 0) this.lightboxIndex = this.lightboxImages.length - 1;\r\n        if (this.lightboxIndex >= this.lightboxImages.length) this.lightboxIndex = 0;\r\n        \r\n        const img = document.getElementById('cbx-op-lightbox-img');\r\n        const counter = document.getElementById('cbx-op-lightbox-counter');\r\n        \r\n        img.src = this.lightboxImages[this.lightboxIndex];\r\n        counter.textContent = `${this.lightboxIndex + 1} \/ ${this.lightboxImages.length}`;\r\n      }\r\n    }\r\n\r\n    \/\/ Initialize app when DOM is ready\r\n    let app;\r\n    document.addEventListener('DOMContentLoaded', () => {\r\n      app = new CBXOptionsApp();\r\n    });\r\n    <\/script>\r\n    \r\n    [\/et_pb_text][\/et_pb_column]<br \/>\n\t\t\t[\/et_pb_row]<br \/>\n\t\t[\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>D\u00e9couvrez les options photobooth CheeeseBOX : th\u00e8mes IA, personnalisation compl\u00e8te, impressions instantan\u00e9es et accessoires pour mariages, \u00e9v\u00e9nements corporatifs et f\u00eates priv\u00e9es au Canada.<\/p>","protected":false},"author":25,"featured_media":276049,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"[custom-page-op]","_et_gb_content_width":"","footnotes":""},"difl_page_category":[],"class_list":["post-276079","page","type-page","status-publish","has-post-thumbnail","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/cheeesebox.ca\/fr\/wp-json\/wp\/v2\/pages\/276079","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cheeesebox.ca\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cheeesebox.ca\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cheeesebox.ca\/fr\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/cheeesebox.ca\/fr\/wp-json\/wp\/v2\/comments?post=276079"}],"version-history":[{"count":7,"href":"https:\/\/cheeesebox.ca\/fr\/wp-json\/wp\/v2\/pages\/276079\/revisions"}],"predecessor-version":[{"id":276093,"href":"https:\/\/cheeesebox.ca\/fr\/wp-json\/wp\/v2\/pages\/276079\/revisions\/276093"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cheeesebox.ca\/fr\/wp-json\/wp\/v2\/media\/276049"}],"wp:attachment":[{"href":"https:\/\/cheeesebox.ca\/fr\/wp-json\/wp\/v2\/media?parent=276079"}],"wp:term":[{"taxonomy":"difl_page_category","embeddable":true,"href":"https:\/\/cheeesebox.ca\/fr\/wp-json\/wp\/v2\/difl_page_category?post=276079"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}