Concours des Plus Belles Vitrines de No\u00ebl | Centre Commerces Bourg (CCB01)<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,700;0,800;1,600&display=swap\" rel=\"stylesheet\">\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n\r\n <script>\r\n tailwind.config = {\r\n darkMode: 'class',\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Montserrat', 'sans-serif'],\r\n serif: ['Playfair Display', 'serif'],\r\n },\r\n colors: {\r\n ccb: {\r\n pink: '#E50051',\r\n pinkLight: '#FF2A74',\r\n pinkDark: '#B3003E',\r\n orange: '#F58220',\r\n orangeLight: '#FF9E44',\r\n dark: '#0B0D13',\r\n card: '#141824',\r\n gold: '#FFD700',\r\n goldWarm: '#D4AF37',\r\n }\r\n },\r\n animation: {\r\n 'pulse-slow': 'pulse 3.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',\r\n 'float': 'float 4s ease-in-out infinite',\r\n 'shimmer': 'shimmer 2.5s linear infinite',\r\n },\r\n keyframes: {\r\n float: {\r\n '0%, 100%': { transform: 'translateY(0px)' },\r\n '50%': { transform: 'translateY(-7px)' },\r\n },\r\n shimmer: {\r\n '0%': { backgroundPosition: '-200% 0' },\r\n '100%': { backgroundPosition: '200% 0' },\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n :root {\r\n --ccb-pink: #E50051;\r\n --ccb-orange: #F58220;\r\n --ccb-gold: #FFD700;\r\n }\r\n\r\n \/* ==========================================================================\r\n BLINDAGE ANTI-CONFLITS WORDPRESS \/ ELEMENTOR (FOND NOIR & PLEINE LARGEUR)\r\n ========================================================================== *\/\r\n html,\r\n body,\r\n #page,\r\n #content,\r\n .site,\r\n .site-content,\r\n .ast-container,\r\n .entry-content,\r\n .page-content,\r\n .elementor,\r\n .elementor-inner,\r\n .elementor-section-wrap,\r\n .elementor-section,\r\n .elementor-container,\r\n .elementor-column-wrap,\r\n .elementor-widget-wrap,\r\n .elementor-widget-html,\r\n .e-con,\r\n .e-con-inner {\r\n background-color: #090B10 !important;\r\n color: #F8FAFC !important;\r\n }\r\n\r\n body {\r\n background-color: #090B10 !important;\r\n color: #F8FAFC !important;\r\n overflow-x: hidden !important;\r\n font-family: 'Montserrat', sans-serif !important;\r\n margin: 0 !important;\r\n }\r\n\r\n \/* Permet au bloc de sortir des colonnes \u00e9troites de WordPress pour occuper tout l'\u00e9cran *\/\r\n #ccb-app-root {\r\n width: 100vw !important;\r\n max-width: 100vw !important;\r\n margin-left: calc(50% - 50vw) !important;\r\n margin-right: calc(50% - 50vw) !important;\r\n background-color: #090B10 !important;\r\n color: #F8FAFC !important;\r\n font-family: 'Montserrat', sans-serif !important;\r\n position: relative !important;\r\n min-height: 100vh !important;\r\n overflow-x: hidden !important;\r\n box-sizing: border-box !important;\r\n }\r\n\r\n #ccb-app-root *,\r\n #ccb-app-root *::before,\r\n #ccb-app-root *::after {\r\n box-sizing: border-box !important;\r\n }\r\n\r\n \/* Protection des titres contre le CSS noir de WordPress *\/\r\n #ccb-app-root h1,\r\n #ccb-app-root h2,\r\n #ccb-app-root h3,\r\n #ccb-app-root h4 {\r\n color: #FFFFFF !important;\r\n font-family: 'Montserrat', sans-serif !important;\r\n margin-top: 0 !important;\r\n }\r\n\r\n \/* Classe activable pour masquer l'ancien titre\/ent\u00eate WordPress au-dessus du bloc *\/\r\n body.ccb-clean-wp-page .entry-header,\r\n body.ccb-clean-wp-page .page-header,\r\n body.ccb-clean-wp-page h1.entry-title,\r\n body.ccb-clean-wp-page header.site-header,\r\n body.ccb-clean-wp-page #masthead,\r\n body.ccb-clean-wp-page footer.site-footer,\r\n body.ccb-clean-wp-page #colophon {\r\n display: none !important;\r\n }\r\n\r\n \/* ==========================================================================\r\n CORRECTION BLIND\u00c9E DES CHAMPS INPUT & SELECT CONTRE WORDPRESS\r\n ========================================================================== *\/\r\n #ccb-app-root input.ccb-input {\r\n background-color: #121624 !important;\r\n color: #FFFFFF !important;\r\n border: 1.5px solid rgba(255, 255, 255, 0.2) !important;\r\n border-radius: 14px !important;\r\n height: 54px !important;\r\n min-height: 54px !important;\r\n line-height: 54px !important;\r\n padding: 0 18px 0 54px !important; \/* 54px \u00e0 gauche pour que l'ic\u00f4ne ne touche jamais le texte *\/\r\n font-size: 15px !important;\r\n font-weight: 500 !important;\r\n font-family: 'Montserrat', sans-serif !important;\r\n width: 100% !important;\r\n box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5) !important;\r\n outline: none !important;\r\n margin: 0 !important;\r\n }\r\n\r\n #ccb-app-root input.ccb-input:focus {\r\n border-color: #E50051 !important;\r\n box-shadow: 0 0 0 3px rgba(229, 0, 81, 0.28), inset 0 2px 6px rgba(0, 0, 0, 0.5) !important;\r\n }\r\n\r\n #ccb-app-root input.ccb-input::placeholder {\r\n color: #94A3B8 !important;\r\n opacity: 1 !important;\r\n }\r\n\r\n \/* Barre de recherche des boutiques *\/\r\n #ccb-app-root input.ccb-search-input {\r\n background-color: #121624 !important;\r\n color: #FFFFFF !important;\r\n border: 1.5px solid rgba(255, 255, 255, 0.2) !important;\r\n border-radius: 12px !important;\r\n height: 42px !important;\r\n min-height: 42px !important;\r\n line-height: 42px !important;\r\n padding: 0 14px 0 42px !important; \/* 42px \u00e0 gauche pour d\u00e9gager la loupe *\/\r\n font-size: 13px !important;\r\n font-weight: 500 !important;\r\n font-family: 'Montserrat', sans-serif !important;\r\n width: 100% !important;\r\n box-shadow: none !important;\r\n outline: none !important;\r\n margin: 0 !important;\r\n }\r\n\r\n #ccb-app-root input.ccb-search-input:focus {\r\n border-color: #F58220 !important;\r\n }\r\n\r\n #ccb-app-root input.ccb-search-input::placeholder {\r\n color: #94A3B8 !important;\r\n opacity: 1 !important;\r\n }\r\n\r\n \/* Liste d\u00e9roulante (<select>) des commerces 100% lisible et centr\u00e9e *\/\r\n #ccb-app-root select.ccb-select {\r\n background-color: #121624 !important;\r\n color: #FFFFFF !important;\r\n border: 2px solid rgba(245, 130, 32, 0.65) !important;\r\n border-radius: 16px !important;\r\n height: 58px !important;\r\n min-height: 58px !important;\r\n line-height: 54px !important;\r\n padding: 0 48px 0 52px !important;\r\n font-size: 15px !important;\r\n font-weight: 700 !important;\r\n font-family: 'Montserrat', sans-serif !important;\r\n width: 100% !important;\r\n appearance: none !important;\r\n -webkit-appearance: none !important;\r\n -moz-appearance: none !important;\r\n background-image: none !important;\r\n cursor: pointer !important;\r\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;\r\n margin: 0 !important;\r\n }\r\n\r\n #ccb-app-root select.ccb-select:focus {\r\n border-color: #E50051 !important;\r\n box-shadow: 0 0 0 3px rgba(229, 0, 81, 0.3) !important;\r\n outline: none !important;\r\n }\r\n\r\n #ccb-app-root select.ccb-select option {\r\n background-color: #121624 !important;\r\n color: #FFFFFF !important;\r\n padding: 10px !important;\r\n font-size: 15px !important;\r\n }\r\n\r\n \/* Background Canvas for Snow & Golden Sparks *\/\r\n #festive-canvas {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\r\n z-index: 1;\r\n }\r\n\r\n \/* Confetti Canvas *\/\r\n #confetti-canvas {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\r\n z-index: 100;\r\n }\r\n\r\n \/* Shimmering Gold Text *\/\r\n .gold-gradient-text {\r\n background: linear-gradient(90deg, #FFF3B0 0%, #FFD700 25%, #F58220 50%, #FFD700 75%, #FFF3B0 100%);\r\n background-size: 200% auto;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n animation: shimmer 4s linear infinite;\r\n }\r\n\r\n \/* Glassmorphism Cards *\/\r\n .glass-panel {\r\n background: rgba(20, 24, 36, 0.82);\r\n backdrop-filter: blur(16px);\r\n -webkit-backdrop-filter: blur(16px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n .glass-panel-gold {\r\n background: linear-gradient(145deg, rgba(28, 24, 18, 0.92), rgba(18, 20, 30, 0.92));\r\n backdrop-filter: blur(16px);\r\n border: 1px solid rgba(255, 215, 0, 0.35);\r\n box-shadow: 0 15px 40px rgba(245, 130, 32, 0.15);\r\n }\r\n\r\n .shop-card-selected {\r\n border-color: #E50051 !important;\r\n background: linear-gradient(135deg, rgba(229, 0, 81, 0.22) 0%, rgba(245, 130, 32, 0.12) 100%) !important;\r\n box-shadow: 0 0 25px rgba(229, 0, 81, 0.45), inset 0 0 12px rgba(229, 0, 81, 0.25) !important;\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* 3D Golden Ticket Styling *\/\r\n .golden-ticket {\r\n background: linear-gradient(135deg, #FFF6D6 0%, #FFD700 35%, #F58220 75%, #D4AF37 100%);\r\n color: #11131A;\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 25px 60px rgba(245, 130, 32, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.4) inset;\r\n }\r\n\r\n .golden-ticket::before,\r\n .golden-ticket::after {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n width: 32px;\r\n height: 32px;\r\n background-color: #090B10;\r\n border-radius: 50%;\r\n transform: translateY(-50%);\r\n z-index: 10;\r\n }\r\n .golden-ticket::before { left: -18px; }\r\n .golden-ticket::after { right: -18px; }\r\n\r\n \/* Custom Scrollbar *\/\r\n ::-webkit-scrollbar {\r\n width: 8px;\r\n height: 8px;\r\n }\r\n ::-webkit-scrollbar-track {\r\n background: #0B0D13;\r\n }\r\n ::-webkit-scrollbar-thumb {\r\n background: linear-gradient(180deg, #E50051, #F58220);\r\n border-radius: 9999px;\r\n }\r\n\r\n \/* Slot Machine Drum Effect *\/\r\n .slot-window {\r\n background: radial-gradient(circle at center, #1F2437 0%, #0B0D13 100%);\r\n border: 2px solid #FFD700;\r\n box-shadow: inset 0 0 25px rgba(0,0,0,0.9), 0 0 25px rgba(255, 215, 0, 0.25);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"min-h-screen flex flex-col justify-between relative selection:bg-ccb-pink selection:text-white\">\r\n<div id=\"ccb-app-root\" class=\"min-h-screen flex flex-col justify-between relative\">\r\n\r\n \r\n <canvas id=\"festive-canvas\"><\/canvas>\r\n \r\n <canvas id=\"confetti-canvas\"><\/canvas>\r\n\r\n \r\n \r\n \r\n <div class=\"sticky top-0 z-50 bg-ccb-dark\/95 backdrop-blur-md border-b border-white\/15 px-3 py-2.5 shadow-2xl\">\r\n <div class=\"max-w-7xl mx-auto flex flex-wrap items-center justify-between gap-2\">\r\n \r\n <div class=\"flex items-center gap-2.5\">\r\n <span class=\"inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold uppercase tracking-wider bg-gradient-to-r from-ccb-pink to-ccb-orange text-white shadow-md\">\r\n <i class=\"fa-solid fa-wand-magic-sparkles\"><\/i> D\u00e9mo Bureau CCB01\r\n <\/span>\r\n <span class=\"text-xs text-slate-300 hidden md:inline\">\r\n <code class=\"text-ccb-gold font-mono\">assistance.ccb01.fr<\/code> \u2022 Animation Vitrines de No\u00ebl\r\n <\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex items-center gap-1.5 bg-slate-900\/90 p-1 rounded-xl border border-white\/10\">\r\n <button type=\"button\" id=\"btn-mode-client\" onclick=\"switchViewMode('client')\"\r\n class=\"px-3.5 py-1.5 rounded-lg text-xs sm:text-sm font-bold transition-all flex items-center gap-2 bg-gradient-to-r from-ccb-pink to-ccb-orange text-white shadow-lg\">\r\n <i class=\"fa-solid fa-mobile-screen-button\"><\/i>\r\n <span>Vue Client (QR Code)<\/span>\r\n <\/button>\r\n <button type=\"button\" id=\"btn-mode-admin\" onclick=\"switchViewMode('admin')\"\r\n class=\"px-3.5 py-1.5 rounded-lg text-xs sm:text-sm font-bold transition-all flex items-center gap-2 text-slate-300 hover:text-white hover:bg-white\/5\">\r\n <i class=\"fa-solid fa-trophy text-ccb-gold\"><\/i>\r\n <span>Cockpit Bureau & Tirage Live<\/span>\r\n <span id=\"nav-badge-votes\" class=\"ml-1 px-1.5 py-0.5 text-[10px] rounded-full bg-ccb-gold text-black font-extrabold\">0<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex items-center gap-2\">\r\n <button type=\"button\" id=\"btn-toggle-wp-header\" onclick=\"toggleCleanWpPage()\" title=\"Masquer ou afficher l'ent\u00eate WordPress d'origine\"\r\n class=\"px-2.5 py-1.5 rounded-lg text-xs font-semibold bg-emerald-500\/20 hover:bg-emerald-500\/30 text-emerald-300 border border-emerald-400\/30 transition flex items-center gap-1.5\">\r\n <i class=\"fa-solid fa-expand\"><\/i>\r\n <span class=\"hidden sm:inline\" id=\"label-wp-fullscreen\">Mode Plein \u00c9cran : Actif<\/span>\r\n <\/button>\r\n <button type=\"button\" onclick=\"simulateQrPreselection()\" title=\"Simuler un client qui scanne le QR Code devant une vitrine pr\u00e9cise\"\r\n class=\"px-2.5 py-1.5 rounded-lg text-xs font-semibold bg-white\/10 hover:bg-white\/20 text-amber-300 border border-amber-400\/30 transition flex items-center gap-1.5\">\r\n <i class=\"fa-solid fa-qrcode\"><\/i>\r\n <span class=\"hidden sm:inline\">Test QR Vitrine<\/span>\r\n <\/button>\r\n <button type=\"button\" id=\"btn-sound-toggle\" onclick=\"toggleSound()\" title=\"Activer\/Couper les bruitages du tirage au sort\"\r\n class=\"w-8 h-8 rounded-lg bg-white\/10 hover:bg-white\/20 text-slate-200 flex items-center justify-center transition\">\r\n <i id=\"icon-sound\" class=\"fa-solid fa-volume-high text-ccb-gold text-xs\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n \r\n \r\n <main class=\"relative z-10 flex-grow py-6 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto w-full\">\r\n\r\n \r\n \r\n \r\n <section id=\"view-client\" class=\"max-w-2xl mx-auto space-y-6 transition-all duration-300\">\r\n\r\n \r\n <div class=\"glass-panel rounded-3xl p-6 sm:p-8 text-center relative overflow-hidden border-t-2 border-ccb-pink\/60\">\r\n \r\n <div class=\"absolute -top-24 left-1\/2 -translate-x-1\/2 w-72 h-72 bg-gradient-to-br from-ccb-pink\/30 via-ccb-orange\/25 to-transparent rounded-full blur-3xl pointer-events-none\"><\/div>\r\n\r\n \r\n <div class=\"flex justify-center items-center gap-2 text-ccb-gold text-xs tracking-widest uppercase font-bold mb-4\">\r\n <i class=\"fa-solid fa-star animate-pulse\"><\/i>\r\n <span>F\u00eates de Fin d'Ann\u00e9e \u2022 Bourg-en-Bresse<\/span>\r\n <i class=\"fa-solid fa-star animate-pulse\"><\/i>\r\n <\/div>\r\n\r\n \r\n <div class=\"relative mx-auto w-44 h-44 sm:w-48 sm:h-48 mb-5 animate-float flex items-center justify-center\">\r\n \r\n <img decoding=\"async\" id=\"ccb-detected-wp-logo\" src=\"\" alt=\"Centre Commerces Bourg\"\r\n class=\"hidden w-full h-full object-contain drop-shadow-[0_12px_28px_rgba(229,0,81,0.45)]\" \/>\r\n\r\n \r\n <svg id=\"ccb-fallback-svg-logo\" viewBox=\"0 0 340 340\" class=\"w-full h-full drop-shadow-[0_12px_28px_rgba(229,0,81,0.45)] overflow-visible\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <defs>\r\n \r\n <path id=\"ccbArcTop\" d=\"M 56,170 A 114,114 0 0,1 284,170\" \/>\r\n \r\n <path id=\"ccbArcBottom\" d=\"M 42,176 A 128,128 0 0,0 298,176\" \/>\r\n \r\n <filter id=\"ccbPillShadow\" x=\"-15%\" y=\"-15%\" width=\"130%\" height=\"135%\">\r\n <feDropShadow dx=\"0\" dy=\"4\" stdDeviation=\"4\" flood-color=\"#000000\" flood-opacity=\"0.4\"\/>\r\n <\/filter>\r\n <\/defs>\r\n\r\n \r\n <circle cx=\"170\" cy=\"170\" r=\"144\" fill=\"#050505\" stroke=\"#FFFFFF\" stroke-width=\"3\"\/>\r\n\r\n \r\n <circle cx=\"170\" cy=\"170\" r=\"96\" fill=\"#F58220\"\/>\r\n <circle cx=\"170\" cy=\"170\" r=\"88\" fill=\"#FFFFFF\" stroke=\"#F58220\" stroke-width=\"3\"\/>\r\n <circle cx=\"170\" cy=\"170\" r=\"83\" fill=\"#FFFFFF\" stroke=\"#F58220\" stroke-width=\"2\"\/>\r\n\r\n \r\n <text fill=\"#FFFFFF\" style=\"font-family: 'Montserrat', sans-serif !important; font-weight: 800 !important; font-size: 30px !important; letter-spacing: 7px !important; text-transform: uppercase !important;\">\r\n <textPath href=\"#ccbArcTop\" startOffset=\"50%\" text-anchor=\"middle\">UNION<\/textPath>\r\n <\/text>\r\n\r\n \r\n <text fill=\"#FFFFFF\" style=\"font-family: 'Montserrat', sans-serif !important; font-weight: 800 !important; font-size: 24px !important; letter-spacing: 2.5px !important; text-transform: uppercase !important;\">\r\n <textPath href=\"#ccbArcBottom\" startOffset=\"50%\" text-anchor=\"middle\">COMMERCIALE<\/textPath>\r\n <\/text>\r\n\r\n \r\n <g transform=\"rotate(14 170 170)\">\r\n \r\n <text x=\"170\" y=\"125\" text-anchor=\"middle\" style=\"font-family: 'Montserrat', sans-serif !important; font-weight: 900 !important; font-size: 32px !important;\">\r\n <tspan fill=\"#000000\">C<\/tspan><tspan fill=\"#E50051\">entre<\/tspan>\r\n <\/text>\r\n\r\n \r\n <rect x=\"8\" y=\"137\" width=\"324\" height=\"54\" rx=\"27\" ry=\"27\" fill=\"#FFFFFF\" stroke=\"#000000\" stroke-width=\"2\" filter=\"url(#ccbPillShadow)\"\/>\r\n\r\n \r\n <text x=\"170\" y=\"174\" text-anchor=\"middle\" style=\"font-family: 'Montserrat', sans-serif !important; font-weight: 900 !important; font-size: 29px !important; letter-spacing: -0.5px !important;\">\r\n <tspan fill=\"#000000\">C<\/tspan><tspan fill=\"#E50051\">ommerces <\/tspan><tspan fill=\"#000000\">B<\/tspan><tspan fill=\"#E50051\">ourg<\/tspan>\r\n <\/text>\r\n\r\n \r\n <g transform=\"translate(144, 197) rotate(-8)\">\r\n <path d=\"M16,8 C16,-2 27,-2 27,8\" fill=\"none\" stroke=\"#E50051\" stroke-width=\"2.5\"\/>\r\n <path d=\"M22,7 C22,-3 33,-3 33,7\" fill=\"none\" stroke=\"#E50051\" stroke-width=\"2.5\"\/>\r\n <polygon points=\"11,8 2,30 8,34 14,10\" fill=\"#E50051\"\/>\r\n <polygon points=\"14,10 5,35 11,39 17,12\" fill=\"#B3003E\"\/>\r\n <path d=\"M15,9 L45,11 L41,41 L10,39 Z\" fill=\"#FFFFFF\" stroke=\"#E50051\" stroke-width=\"2.8\" stroke-linejoin=\"round\"\/>\r\n <\/g>\r\n <\/g>\r\n <\/svg>\r\n <\/div>\r\n\r\n \r\n <h1 class=\"text-2xl sm:text-3xl font-black tracking-tight leading-tight mb-2\" style=\"color: #FFFFFF !important;\">\r\n \u00c9lisez la\r\n <span class=\"gold-gradient-text font-serif italic text-3xl sm:text-4xl block mt-1\">Plus Belle Vitrine de No\u00ebl<\/span>\r\n <\/h1>\r\n <p class=\"text-xs sm:text-sm text-slate-300 max-w-md mx-auto leading-relaxed\">\r\n Soutenez votre commer\u00e7ant coup de c\u0153ur du centre-ville de <strong class=\"text-white\">Bourg-en-Bresse<\/strong> et participez au grand tirage au sort de No\u00ebl !\r\n <\/p>\r\n\r\n \r\n <div class=\"mt-5 p-3.5 rounded-2xl bg-gradient-to-r from-ccb-pink\/25 via-ccb-orange\/25 to-ccb-pink\/25 border border-ccb-gold\/40 flex items-center justify-center gap-3 shadow-lg\">\r\n <div class=\"w-11 h-11 rounded-xl bg-gradient-to-br from-ccb-gold to-ccb-orange text-black flex items-center justify-center text-xl font-black shrink-0 shadow\">\r\n <i class=\"fa-solid fa-gift\"><\/i>\r\n <\/div>\r\n <div class=\"text-left\">\r\n <div class=\"text-[11px] uppercase tracking-wider font-bold text-ccb-gold\">Tirage au sort parmi les votants<\/div>\r\n <div class=\"text-sm sm:text-base font-extrabold text-white\">\r\n <span class=\"text-ccb-gold\">3 Ch\u00e8ques Cadeaux de 75 \u20ac<\/span> \u00e0 gagner !\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"mt-4 pt-3 border-t border-white\/10 flex items-center justify-between text-xs text-slate-300\">\r\n <span class=\"flex items-center gap-1.5 font-medium\">\r\n <i class=\"fa-regular fa-clock text-ccb-orange\"><\/i> Fin des votes dans :\r\n <\/span>\r\n <div id=\"countdown-display\" class=\"font-mono font-bold text-ccb-gold bg-black\/50 px-3 py-1.5 rounded-lg border border-white\/15\">\r\n 18j 08h 45m 12s\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"qr-preselect-banner\" class=\"hidden glass-panel-gold rounded-2xl p-4 border-l-4 border-l-ccb-gold flex items-center justify-between gap-3\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"w-10 h-10 rounded-full bg-ccb-gold\/20 text-ccb-gold flex items-center justify-center text-lg shrink-0\">\r\n <i class=\"fa-solid fa-qrcode\"><\/i>\r\n <\/div>\r\n <div>\r\n <div class=\"text-xs font-bold uppercase tracking-wider text-ccb-gold\">QR Code Vitrine d\u00e9tect\u00e9 !<\/div>\r\n <div id=\"qr-preselect-text\" class=\"text-xs sm:text-sm text-white font-semibold\">Vitrine pr\u00e9-s\u00e9lectionn\u00e9e automatiquement.<\/div>\r\n <\/div>\r\n <\/div>\r\n <button type=\"button\" onclick=\"clearShopSelection()\" class=\"text-xs text-slate-300 hover:text-white underline shrink-0\">Changer<\/button>\r\n <\/div>\r\n\r\n \r\n \r\n \r\n <form id=\"vote-form\" onsubmit=\"handleVoteSubmit(event)\" class=\"space-y-6\" novalidate>\r\n\r\n \r\n <div class=\"glass-panel rounded-3xl p-5 sm:p-7 space-y-5\">\r\n <div class=\"flex items-center justify-between gap-2\">\r\n <div class=\"flex items-center gap-3\">\r\n <span class=\"w-8 h-8 rounded-full bg-ccb-pink text-white text-xs font-black flex items-center justify-center shadow shrink-0\">1<\/span>\r\n <h2 class=\"text-base sm:text-xl font-extrabold text-white\" style=\"color: #FFFFFF !important;\">Choisissez votre vitrine favorite<\/h2>\r\n <\/div>\r\n <span id=\"shops-count-badge\" class=\"text-xs font-bold text-ccb-orange bg-ccb-orange\/15 px-3 py-1 rounded-full border border-ccb-orange\/30 shrink-0\">\r\n 12 vitrines en lice\r\n <\/span>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <label for=\"shop-select-dropdown\" class=\"block text-xs font-bold uppercase tracking-wider text-slate-200 mb-2\">\r\n <i class=\"fa-solid fa-store text-ccb-pink mr-1.5\"><\/i> S\u00e9lection rapide dans la liste d\u00e9roulante :\r\n <\/label>\r\n <div class=\"relative flex items-center\">\r\n \r\n <div class=\"pointer-events-none absolute left-4 top-1\/2 -translate-y-1\/2 text-ccb-orange text-lg z-10\">\r\n <i class=\"fa-solid fa-shop\"><\/i>\r\n <\/div>\r\n\r\n <select id=\"shop-select-dropdown\" onchange=\"selectShopFromDropdown(this.value)\" required class=\"ccb-select\">\r\n <option value=\"\">-- Choisissez un commerce dans la liste --<\/option>\r\n <\/select>\r\n\r\n \r\n <div class=\"pointer-events-none absolute right-4 top-1\/2 -translate-y-1\/2 text-ccb-gold text-base z-10\">\r\n <i class=\"fa-solid fa-chevron-down\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"pt-1 space-y-3\">\r\n <div class=\"flex flex-col sm:flex-row gap-3 justify-between items-stretch sm:items-center\">\r\n <span class=\"text-xs sm:text-sm text-slate-300 font-semibold\">\r\n \u2728 Ou cliquez directement sur la vitrine ci-dessous :\r\n <\/span>\r\n \r\n <div class=\"relative w-full sm:w-64 shrink-0\">\r\n <i class=\"fa-solid fa-magnifying-glass absolute left-3.5 top-1\/2 -translate-y-1\/2 text-ccb-orange text-xs pointer-events-none z-10\"><\/i>\r\n <input type=\"text\" id=\"shop-search-input\" oninput=\"filterShopsClient()\" placeholder=\"Rechercher un nom, une rue...\"\r\n class=\"ccb-search-input\">\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"street-filters\" class=\"flex items-center gap-1.5 overflow-x-auto pb-2 no-scrollbar text-xs\">\r\n <button type=\"button\" onclick=\"setStreetFilter('ALL')\" data-street=\"ALL\"\r\n class=\"street-pill shrink-0 px-3.5 py-1.5 rounded-full font-bold bg-ccb-pink text-white transition\">\r\n Tous les quartiers\r\n <\/button>\r\n <button type=\"button\" onclick=\"setStreetFilter('Rue Notre-Dame')\" data-street=\"Rue Notre-Dame\"\r\n class=\"street-pill shrink-0 px-3.5 py-1.5 rounded-full font-medium bg-white\/5 hover:bg-white\/15 text-slate-300 transition\">\r\n Rue Notre-Dame\r\n <\/button>\r\n <button type=\"button\" onclick=\"setStreetFilter('Rue Victor Basch')\" data-street=\"Rue Victor Basch\"\r\n class=\"street-pill shrink-0 px-3.5 py-1.5 rounded-full font-medium bg-white\/5 hover:bg-white\/15 text-slate-300 transition\">\r\n Rue Victor Basch\r\n <\/button>\r\n <button type=\"button\" onclick=\"setStreetFilter('Rue Gambetta')\" data-street=\"Rue Gambetta\"\r\n class=\"street-pill shrink-0 px-3.5 py-1.5 rounded-full font-medium bg-white\/5 hover:bg-white\/15 text-slate-300 transition\">\r\n Rue Gambetta\r\n <\/button>\r\n <button type=\"button\" onclick=\"setStreetFilter('Carr\u00e9 Amiot')\" data-street=\"Carr\u00e9 Amiot\"\r\n class=\"street-pill shrink-0 px-3.5 py-1.5 rounded-full font-medium bg-white\/5 hover:bg-white\/15 text-slate-300 transition\">\r\n Carr\u00e9 Amiot\r\n <\/button>\r\n <button type=\"button\" onclick=\"setStreetFilter('Place Carriat')\" data-street=\"Place Carriat\"\r\n class=\"street-pill shrink-0 px-3.5 py-1.5 rounded-full font-medium bg-white\/5 hover:bg-white\/15 text-slate-300 transition\">\r\n Place Carriat & Bichat\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div id=\"client-shops-grid\" class=\"grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-80 overflow-y-auto pr-1 pt-1\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"selected-shop-pill\" class=\"hidden p-3.5 rounded-2xl bg-gradient-to-r from-ccb-pink\/25 to-ccb-orange\/25 border border-ccb-pink\/60 flex items-center justify-between\">\r\n <div class=\"flex items-center gap-3\">\r\n <span class=\"w-9 h-9 rounded-xl bg-ccb-pink text-white flex items-center justify-center text-sm shrink-0\">\r\n <i class=\"fa-solid fa-heart\"><\/i>\r\n <\/span>\r\n <div>\r\n <div class=\"text-[10px] uppercase tracking-wider text-pink-200 font-bold\">Votre vote porte sur :<\/div>\r\n <div id=\"selected-shop-name-display\" class=\"text-sm font-extrabold text-white\">-<\/div>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-xs font-bold text-ccb-gold shrink-0\"><i class=\"fa-solid fa-circle-check mr-1\"><\/i>Choisi<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-panel rounded-3xl p-5 sm:p-7 space-y-5\">\r\n <div class=\"flex items-center gap-3\">\r\n <span class=\"w-8 h-8 rounded-full bg-ccb-orange text-black text-xs font-black flex items-center justify-center shadow shrink-0\">2<\/span>\r\n <div>\r\n <h2 class=\"text-base sm:text-xl font-extrabold text-white\" style=\"color: #FFFFFF !important;\">Vos coordonn\u00e9es pour le tirage au sort<\/h2>\r\n <p class=\"text-xs text-slate-300 mt-0.5\">Pour vous contacter si vous gagnez l'un des <strong class=\"text-ccb-gold\">3 ch\u00e8ques cadeaux de 75 \u20ac<\/strong><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"space-y-4\">\r\n \r\n <div>\r\n <label for=\"voter-name\" class=\"block text-xs font-bold uppercase tracking-wider text-slate-200 mb-1.5\">\r\n Nom et Pr\u00e9nom <span class=\"text-ccb-pink\">*<\/span>\r\n <\/label>\r\n <div class=\"relative flex items-center\">\r\n <div class=\"pointer-events-none absolute left-4 top-1\/2 -translate-y-1\/2 w-6 text-center text-ccb-orange text-base z-10\">\r\n <i class=\"fa-regular fa-user\"><\/i>\r\n <\/div>\r\n <input type=\"text\" id=\"voter-name\" required placeholder=\"Ex : Marie Revermont\" class=\"ccb-input\">\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <label for=\"voter-phone\" class=\"block text-xs font-bold uppercase tracking-wider text-slate-200 mb-1.5\">\r\n T\u00e9l\u00e9phone portable <span class=\"text-ccb-pink\">*<\/span>\r\n <\/label>\r\n <div class=\"relative flex items-center\">\r\n <div class=\"pointer-events-none absolute left-4 top-1\/2 -translate-y-1\/2 w-6 text-center text-ccb-orange text-base z-10\">\r\n <i class=\"fa-solid fa-mobile-screen\"><\/i>\r\n <\/div>\r\n <input type=\"tel\" id=\"voter-phone\" required placeholder=\"Ex : 06 12 34 56 78\" class=\"ccb-input\">\r\n <\/div>\r\n <p class=\"text-[11px] text-slate-400 mt-1.5\">1 seule participation par num\u00e9ro de t\u00e9l\u00e9phone pour garantir l'\u00e9quit\u00e9 du vote.<\/p>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <label for=\"voter-email\" class=\"block text-xs font-bold uppercase tracking-wider text-slate-200 mb-1.5\">\r\n Adresse e-mail <span class=\"text-ccb-pink\">*<\/span>\r\n <\/label>\r\n <div class=\"relative flex items-center\">\r\n <div class=\"pointer-events-none absolute left-4 top-1\/2 -translate-y-1\/2 w-6 text-center text-ccb-orange text-base z-10\">\r\n <i class=\"fa-regular fa-envelope\"><\/i>\r\n <\/div>\r\n <input type=\"email\" id=\"voter-email\" required placeholder=\"Ex : marie.revermont@email.fr\" class=\"ccb-input\">\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <label class=\"flex items-start gap-3 p-3.5 rounded-2xl bg-slate-900\/90 border border-white\/15 cursor-pointer hover:border-white\/30 transition\">\r\n <input type=\"checkbox\" id=\"voter-rgpd\" required class=\"mt-1 w-4 h-4 accent-ccb-pink rounded cursor-pointer shrink-0\">\r\n <span class=\"text-xs text-slate-300 leading-relaxed\">\r\n J'accepte le r\u00e8glement du jeu concours organis\u00e9 par <strong class=\"text-white\">Centre Commerces Bourg<\/strong> et j'autorise l'union commerciale \u00e0 me contacter en cas de gain d'un ch\u00e8que cadeau de 75 \u20ac.\r\n <\/span>\r\n <\/label>\r\n <\/div>\r\n\r\n \r\n <div id=\"vote-error-box\" class=\"hidden p-3.5 rounded-2xl bg-red-500\/20 border border-red-500\/50 text-red-200 text-xs font-semibold flex items-center gap-2.5\">\r\n <i class=\"fa-solid fa-triangle-exclamation text-red-400 text-base\"><\/i>\r\n <span id=\"vote-error-text\">Veuillez v\u00e9rifier vos informations.<\/span>\r\n <\/div>\r\n\r\n \r\n <button type=\"submit\"\r\n class=\"w-full py-4 px-6 rounded-2xl font-black text-base sm:text-lg text-white bg-gradient-to-r from-ccb-pink via-ccb-orange to-ccb-pink bg-[length:200%_auto] hover:bg-right transition-all duration-500 shadow-[0_10px_30px_rgba(229,0,81,0.45)] hover:shadow-[0_15px_35px_rgba(245,130,32,0.6)] transform hover:-translate-y-0.5 flex items-center justify-center gap-3\">\r\n <i class=\"fa-solid fa-wand-magic-sparkles\"><\/i>\r\n <span>Je valide mon vote & je tente ma chance !<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/form>\r\n\r\n \r\n \r\n \r\n <div id=\"vote-confirmation-card\" class=\"hidden space-y-6 animate-fade-in\">\r\n <div class=\"glass-panel rounded-3xl p-6 sm:p-8 text-center space-y-5 border-2 border-ccb-gold\/50\">\r\n <div class=\"w-16 h-16 rounded-full bg-gradient-to-br from-ccb-gold to-ccb-orange text-black mx-auto flex items-center justify-center text-3xl shadow-xl\">\r\n <i class=\"fa-solid fa-check-double\"><\/i>\r\n <\/div>\r\n\r\n <div>\r\n <span class=\"px-3 py-1 rounded-full text-xs font-extrabold uppercase tracking-widest bg-ccb-gold\/20 text-ccb-gold border border-ccb-gold\/40\">\r\n Vote Officiellement Enregistr\u00e9\r\n <\/span>\r\n <h2 class=\"text-2xl sm:text-3xl font-black text-white mt-2\">\r\n Merci <span id=\"confirm-voter-firstname\" class=\"text-ccb-gold\">Marie<\/span> ! \ud83c\udf89\r\n <\/h2>\r\n <p class=\"text-xs sm:text-sm text-slate-300 mt-1\">\r\n Votre voix a bien \u00e9t\u00e9 ajout\u00e9e au compteur de votre commer\u00e7ant et votre ticket est dans l'urne pour le tirage des <strong class=\"text-white\">3 x 75 \u20ac<\/strong> !\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"golden-ticket rounded-2xl p-5 sm:p-6 text-left mx-auto max-w-md\">\r\n <div class=\"flex items-center justify-between border-b border-black\/15 pb-3 mb-3\">\r\n <div>\r\n <div class=\"text-[10px] font-black uppercase tracking-widest text-black\/70\">UNION COMMERCIALE \u2022 BOURG-EN-BRESSE<\/div>\r\n <div class=\"text-base font-black text-black\">TICKET D'OR DE NO\u00cbL<\/div>\r\n <\/div>\r\n <div class=\"text-right\">\r\n <span class=\"px-2.5 py-1 rounded-lg bg-black text-ccb-gold font-mono text-xs font-bold\" id=\"confirm-ticket-number\">\r\n #CCB-8492\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"space-y-2 text-xs sm:text-sm\">\r\n <div class=\"flex justify-between\">\r\n <span class=\"font-semibold text-black\/70\">Participant(e) :<\/span>\r\n <span class=\"font-extrabold text-black\" id=\"confirm-full-name\">-<\/span>\r\n <\/div>\r\n <div class=\"flex justify-between\">\r\n <span class=\"font-semibold text-black\/70\">Vitrine soutenue :<\/span>\r\n <span class=\"font-extrabold text-ccb-pinkDark\" id=\"confirm-shop-name\">-<\/span>\r\n <\/div>\r\n <div class=\"flex justify-between\">\r\n <span class=\"font-semibold text-black\/70\">Tirage au sort :<\/span>\r\n <span class=\"font-bold text-black\">3 Ch\u00e8ques Cadeaux de 75 \u20ac<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mt-4 pt-3 border-t border-dashed border-black\/25 flex items-center justify-between text-[11px] font-bold text-black\/75\">\r\n <span><i class=\"fa-solid fa-shield-halved mr-1\"><\/i>Participation certifi\u00e9e CCB01<\/span>\r\n <span id=\"confirm-date-time\">-<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-col sm:flex-row gap-3 pt-2\">\r\n <button type=\"button\" onclick=\"shareContest()\"\r\n class=\"flex-1 py-3 px-4 rounded-xl font-bold text-xs sm:text-sm bg-white\/10 hover:bg-white\/20 text-white border border-white\/15 transition flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-share-nodes text-ccb-orange\"><\/i>\r\n <span>Partager le concours \u00e0 mes proches<\/span>\r\n <\/button>\r\n <button type=\"button\" onclick=\"resetClientFormForTest()\"\r\n class=\"py-3 px-4 rounded-xl font-bold text-xs sm:text-sm bg-ccb-pink\/20 hover:bg-ccb-pink\/30 text-pink-200 border border-ccb-pink\/40 transition flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-rotate-right\"><\/i>\r\n <span>Tester un autre vote (D\u00e9mo)<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n \r\n \r\n \r\n <section id=\"view-admin\" class=\"hidden space-y-8 transition-all duration-300\">\r\n\r\n \r\n <div class=\"glass-panel rounded-3xl p-6 sm:p-8 border-l-4 border-l-ccb-pink flex flex-col lg:flex-row lg:items-center justify-between gap-6\">\r\n <div class=\"space-y-1.5\">\r\n <div class=\"inline-flex items-center gap-2 text-xs font-extrabold uppercase tracking-widest text-ccb-orange\">\r\n <i class=\"fa-solid fa-crown text-ccb-gold\"><\/i> Espace Membres du Bureau \u2022 Centre Commerces Bourg\r\n <\/div>\r\n <h2 class=\"text-2xl sm:text-3xl font-black text-white\">\r\n Supervision des Votes & Tirage au Sort Officiel\r\n <\/h2>\r\n <p class=\"text-xs sm:text-sm text-slate-300 max-w-2xl\">\r\n Suivez en temps r\u00e9el le classement des <strong class=\"text-ccb-gold\">3 commer\u00e7ants gagnants<\/strong>, g\u00e9n\u00e9rez les QR codes boutiques et lancez la machine \u00e0 tirage au sort des <strong class=\"text-ccb-gold\">3 ch\u00e8ques cadeaux de 75 \u20ac<\/strong>.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-wrap items-center gap-2.5\">\r\n <button onclick=\"addSimulatedBatchVotes(15)\"\r\n class=\"px-4 py-2.5 rounded-xl text-xs font-bold bg-white\/10 hover:bg-white\/15 text-amber-300 border border-amber-400\/30 transition flex items-center gap-2\">\r\n <i class=\"fa-solid fa-bolt\"><\/i>\r\n <span>+15 Votes D\u00e9mo<\/span>\r\n <\/button>\r\n <button onclick=\"openQrModal()\"\r\n class=\"px-4 py-2.5 rounded-xl text-xs font-bold bg-ccb-pink\/20 hover:bg-ccb-pink\/30 text-pink-200 border border-ccb-pink\/40 transition flex items-center gap-2\">\r\n <i class=\"fa-solid fa-qrcode\"><\/i>\r\n <span>QR Codes Boutiques<\/span>\r\n <\/button>\r\n <button onclick=\"exportDataCSV()\"\r\n class=\"px-4 py-2.5 rounded-xl text-xs font-bold bg-emerald-500\/20 hover:bg-emerald-500\/30 text-emerald-200 border border-emerald-500\/40 transition flex items-center gap-2\">\r\n <i class=\"fa-solid fa-file-csv\"><\/i>\r\n <span>Exporter Excel (CSV)<\/span>\r\n <\/button>\r\n <button onclick=\"openWordpressModal()\"\r\n class=\"px-4 py-2.5 rounded-xl text-xs font-bold bg-gradient-to-r from-ccb-pink to-ccb-orange text-white shadow-lg transition flex items-center gap-2\">\r\n <i class=\"fa-brands fa-wordpress\"><\/i>\r\n <span>Code Elementor \/ WP<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-2 lg:grid-cols-4 gap-4\">\r\n <div class=\"glass-panel rounded-2xl p-5 border-t-2 border-t-ccb-pink\">\r\n <div class=\"flex items-center justify-between text-slate-400 text-xs font-bold uppercase\">\r\n <span>Votes Valid\u00e9s<\/span>\r\n <i class=\"fa-solid fa-check-to-slot text-ccb-pink text-base\"><\/i>\r\n <\/div>\r\n <div id=\"kpi-total-votes\" class=\"text-3xl sm:text-4xl font-black text-white mt-2\">0<\/div>\r\n <div class=\"text-[11px] text-emerald-400 font-semibold mt-1\">\r\n <i class=\"fa-solid fa-arrow-trend-up mr-1\"><\/i>Comptage certifi\u00e9 en direct\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"glass-panel rounded-2xl p-5 border-t-2 border-t-ccb-orange\">\r\n <div class=\"flex items-center justify-between text-slate-400 text-xs font-bold uppercase\">\r\n <span>Participants \u00c9ligibles<\/span>\r\n <i class=\"fa-solid fa-users text-ccb-orange text-base\"><\/i>\r\n <\/div>\r\n <div id=\"kpi-unique-voters\" class=\"text-3xl sm:text-4xl font-black text-white mt-2\">0<\/div>\r\n <div class=\"text-[11px] text-slate-300 font-medium mt-1\">\r\n Dans l'urne pour les 3 x 75 \u20ac\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"glass-panel rounded-2xl p-5 border-t-2 border-t-ccb-gold\">\r\n <div class=\"flex items-center justify-between text-slate-400 text-xs font-bold uppercase\">\r\n <span>Vitrines en Lice<\/span>\r\n <i class=\"fa-solid fa-store text-ccb-gold text-base\"><\/i>\r\n <\/div>\r\n <div id=\"kpi-total-shops\" class=\"text-3xl sm:text-4xl font-black text-white mt-2\">18<\/div>\r\n <div class=\"text-[11px] text-amber-300 font-medium mt-1\">\r\n Adh\u00e9rents Centre Commerces Bourg\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"glass-panel rounded-2xl p-5 border-t-2 border-t-emerald-500\">\r\n <div class=\"flex items-center justify-between text-slate-400 text-xs font-bold uppercase\">\r\n <span>Doublons Bloqu\u00e9s<\/span>\r\n <i class=\"fa-solid fa-shield-cat text-emerald-400 text-base\"><\/i>\r\n <\/div>\r\n <div id=\"kpi-blocked-duplicates\" class=\"text-3xl sm:text-4xl font-black text-white mt-2\">14<\/div>\r\n <div class=\"text-[11px] text-emerald-400 font-medium mt-1\">\r\n Filtre anti-triche T\u00e9l & Email actif\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n \r\n \r\n <div class=\"glass-panel rounded-3xl p-6 sm:p-8 space-y-6\">\r\n <div class=\"flex flex-col sm:flex-row sm:items-center justify-between gap-2 border-b border-white\/10 pb-4\">\r\n <div>\r\n <span class=\"text-xs font-extrabold uppercase tracking-wider text-ccb-gold\">\r\n <i class=\"fa-solid fa-medal mr-1\"><\/i> R\u00e9compense des 3 Plus Belles Vitrines\r\n <\/span>\r\n <h3 class=\"text-xl sm:text-2xl font-black text-white\">\r\n Podium Officiel des Commer\u00e7ants (Top 3)\r\n <\/h3>\r\n <\/div>\r\n <span class=\"text-xs text-slate-400\">Mise \u00e0 jour automatique \u00e0 chaque scan QR Code<\/span>\r\n <\/div>\r\n\r\n \r\n <div id=\"podium-container\" class=\"grid grid-cols-1 md:grid-cols-3 gap-5 items-end pt-4\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n \r\n \r\n <div class=\"glass-panel-gold rounded-3xl p-6 sm:p-8 space-y-6 relative overflow-hidden\">\r\n <div class=\"flex flex-col md:flex-row md:items-center justify-between gap-4 border-b border-ccb-gold\/25 pb-5\">\r\n <div>\r\n <div class=\"inline-flex items-center gap-2 px-3 py-1 rounded-full bg-ccb-gold\/20 text-ccb-gold text-xs font-extrabold uppercase tracking-widest mb-2\">\r\n <i class=\"fa-solid fa-wand-sparkles\"><\/i> Show Tirage au Sort en R\u00e9union de Bureau\r\n <\/div>\r\n <h3 class=\"text-2xl sm:text-3xl font-black text-white\">\r\n Tirage au Sort des <span class=\"text-ccb-gold\">3 Ch\u00e8ques Cadeaux de 75 \u20ac<\/span>\r\n <\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-300 mt-1\">\r\n Algorithme al\u00e9atoire int\u00e9gral parmi tous les votants uniques enregistr\u00e9s (un m\u00eame client ne peut pas \u00eatre tir\u00e9 deux fois).\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"flex items-center gap-3\">\r\n <button onclick=\"resetWinnersDraw()\"\r\n class=\"px-4 py-2.5 rounded-xl text-xs font-bold bg-white\/10 hover:bg-white\/20 text-slate-200 border border-white\/15 transition flex items-center gap-2\">\r\n <i class=\"fa-solid fa-rotate-left\"><\/i>\r\n <span>R\u00e9initialiser le tirage<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slot-window rounded-3xl p-6 text-center max-w-3xl mx-auto space-y-4\">\r\n <div class=\"text-xs font-bold uppercase tracking-widest text-ccb-gold\" id=\"slot-status-label\">\r\n <i class=\"fa-solid fa-ticket mr-1\"><\/i> Pr\u00eat \u00e0 tirer au sort parmi les participants valid\u00e9s\r\n <\/div>\r\n\r\n <div id=\"slot-rolling-display\" class=\"py-5 px-4 rounded-2xl bg-black\/60 border border-white\/10 min-h-[96px] flex flex-col items-center justify-center\">\r\n <div class=\"text-2xl sm:text-4xl font-black tracking-tight text-white\" id=\"slot-main-name\">\r\n Cliquez sur \u00ab Tirer un Gagnant \u00bb\r\n <\/div>\r\n <div class=\"text-xs sm:text-sm text-ccb-orange font-mono mt-1\" id=\"slot-sub-info\">\r\n 3 Ch\u00e8ques Cadeaux Centre Commerces Bourg de 75 \u20ac en jeu\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex flex-wrap justify-center gap-3 pt-2\">\r\n <button id=\"btn-draw-next\" onclick=\"triggerLiveDraw()\"\r\n class=\"px-8 py-4 rounded-2xl font-black text-base sm:text-lg text-black bg-gradient-to-r from-ccb-gold via-amber-400 to-ccb-orange hover:brightness-110 shadow-[0_0_30px_rgba(255,215,0,0.4)] transition transform hover:scale-105 flex items-center gap-3\">\r\n <i class=\"fa-solid fa-dice text-xl\"><\/i>\r\n <span id=\"btn-draw-next-text\">Lancer le tirage du 1er Ch\u00e8que de 75 \u20ac !<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"winners-cards-grid\" class=\"grid grid-cols-1 md:grid-cols-3 gap-5 pt-2\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n \r\n \r\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\r\n\r\n \r\n <div class=\"lg:col-span-2 glass-panel rounded-3xl p-6 space-y-4\">\r\n <div class=\"flex flex-col sm:flex-row sm:items-center justify-between gap-3\">\r\n <div>\r\n <h3 class=\"text-lg font-black text-white flex items-center gap-2\">\r\n <i class=\"fa-solid fa-list-ol text-ccb-pink\"><\/i>\r\n Classement Complet des Boutiques Participantes\r\n <\/h3>\r\n <p class=\"text-xs text-slate-400\">Suivi d\u00e9taill\u00e9 des voix et parts de votes par commerce<\/p>\r\n <\/div>\r\n\r\n \r\n <button onclick=\"toggleAddShopForm()\"\r\n class=\"px-3.5 py-2 rounded-xl text-xs font-bold bg-ccb-pink hover:bg-ccb-pinkLight text-white transition flex items-center gap-1.5 self-start\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n <span>Ajouter un commerce<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div id=\"add-shop-form-box\" class=\"hidden p-4 rounded-2xl bg-slate-900\/90 border border-ccb-pink\/40 space-y-3\">\r\n <div class=\"text-xs font-bold text-ccb-gold uppercase\">Ajouter un commerce adh\u00e9rent CCB01 dans la liste<\/div>\r\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-2.5\">\r\n <input type=\"text\" id=\"new-shop-name\" placeholder=\"Nom de la boutique\" class=\"px-3 py-2 rounded-xl bg-black\/50 border border-white\/15 text-xs text-white\">\r\n <input type=\"text\" id=\"new-shop-street\" placeholder=\"Rue (ex: Rue Gambetta)\" class=\"px-3 py-2 rounded-xl bg-black\/50 border border-white\/15 text-xs text-white\">\r\n <input type=\"text\" id=\"new-shop-category\" placeholder=\"Cat\u00e9gorie (ex: Mode, Bijoux)\" class=\"px-3 py-2 rounded-xl bg-black\/50 border border-white\/15 text-xs text-white\">\r\n <\/div>\r\n <div class=\"flex justify-end gap-2\">\r\n <button type=\"button\" onclick=\"toggleAddShopForm()\" class=\"px-3 py-1.5 rounded-lg text-xs text-slate-400 hover:text-white\">Annuler<\/button>\r\n <button type=\"button\" onclick=\"addCustomShop()\" class=\"px-4 py-1.5 rounded-lg text-xs font-bold bg-ccb-orange text-black\">Enregistrer la boutique<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"admin-leaderboard-list\" class=\"space-y-2.5 max-h-[460px] overflow-y-auto pr-1\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-panel rounded-3xl p-6 space-y-4 flex flex-col justify-between\">\r\n <div class=\"space-y-4\">\r\n <div class=\"flex items-center justify-between\">\r\n <div>\r\n <h3 class=\"text-lg font-black text-white flex items-center gap-2\">\r\n <i class=\"fa-solid fa-bolt text-ccb-gold\"><\/i>\r\n Derniers Votes Clients\r\n <\/h3>\r\n <p class=\"text-xs text-slate-400\">Journal d'audit horodat\u00e9<\/p>\r\n <\/div>\r\n <button onclick=\"toggleMaskPhones()\" id=\"btn-mask-phones\"\r\n class=\"px-2.5 py-1 rounded-lg bg-white\/10 hover:bg-white\/15 text-[11px] font-semibold text-slate-200 transition\">\r\n <i class=\"fa-regular fa-eye\"><\/i> Afficher N\u00b0\r\n <\/button>\r\n <\/div>\r\n\r\n <div id=\"admin-recent-voters\" class=\"space-y-2.5 max-h-[380px] overflow-y-auto pr-1\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pt-3 border-t border-white\/10 text-[11px] text-slate-400 flex items-center justify-between\">\r\n <span><i class=\"fa-solid fa-lock text-emerald-400 mr-1\"><\/i>Donn\u00e9es conformes RGPD<\/span>\r\n <button onclick=\"exportDataCSV()\" class=\"text-ccb-gold hover:underline font-bold\">Tout t\u00e9l\u00e9charger (.CSV)<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n <\/main>\r\n\r\n \r\n \r\n \r\n <div id=\"modal-qr\" class=\"fixed inset-0 z-50 hidden bg-black\/80 backdrop-blur-md flex items-center justify-center p-4\">\r\n <div class=\"glass-panel rounded-3xl max-w-lg w-full p-6 sm:p-8 space-y-5 border border-ccb-gold\/40 relative\">\r\n <button onclick=\"closeQrModal()\" class=\"absolute top-5 right-5 w-9 h-9 rounded-full bg-white\/10 hover:bg-white\/20 text-white flex items-center justify-center\">\r\n <i class=\"fa-solid fa-xmark\"><\/i>\r\n <\/button>\r\n\r\n <div>\r\n <span class=\"text-xs font-extrabold uppercase tracking-wider text-ccb-orange\">Kit Affiches Vitrines CCB01<\/span>\r\n <h3 class=\"text-xl font-black text-white mt-1\">G\u00e9n\u00e9rateur de QR Code pour les Vitrines<\/h3>\r\n <p class=\"text-xs text-slate-300 mt-1\">\r\n Vous pouvez utiliser un QR Code unique pour toute la ville, ou g\u00e9n\u00e9rer un QR Code personnalis\u00e9 qui pr\u00e9-s\u00e9lectionne directement le commerce scann\u00e9 !\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"space-y-3\">\r\n <label class=\"block text-xs font-bold uppercase text-slate-300\">Choisir le type de QR Code :<\/label>\r\n <select id=\"qr-shop-selector\" onchange=\"updateQrCodePreview()\"\r\n class=\"w-full rounded-xl bg-slate-900 border border-white\/20 text-white text-xs sm:text-sm font-semibold px-3.5 py-2.5\">\r\n <option value=\"ALL\">\ud83c\udf10 QR Code G\u00e9n\u00e9ral (Tous les commerces - assistance.ccb01.fr)<\/option>\r\n <\/select>\r\n\r\n <div class=\"p-5 rounded-2xl bg-white text-center space-y-3\">\r\n <img decoding=\"async\" id=\"qr-image-preview\" src=\"https:\/\/api.qrserver.com\/v1\/create-qr-code\/?size=220x220&data=https:\/\/assistance.ccb01.fr\/concours-vitrines\/&color=11131A\"\r\n alt=\"QR Code Officiel CCB01\" class=\"w-44 h-44 mx-auto rounded-lg shadow\"\r\n onerror=\"this.src='https:\/\/placehold.co\/220x220\/FFFFFF\/11131A?text=QR+Code+CCB01'\">\r\n <div class=\"text-xs font-bold text-slate-900\" id=\"qr-caption-title\">Scan Officiel \u2022 Concours des Vitrines CCB01<\/div>\r\n <div class=\"text-[11px] font-mono text-ccb-pink bg-slate-100 px-2.5 py-1 rounded inline-block break-all\" id=\"qr-url-preview\">\r\n https:\/\/assistance.ccb01.fr\/concours-vitrines\/\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex justify-end gap-2.5\">\r\n <button onclick=\"copyQrLink()\" class=\"px-4 py-2.5 rounded-xl text-xs font-bold bg-white\/10 hover:bg-white\/20 text-white flex items-center gap-2\">\r\n <i class=\"fa-regular fa-copy\"><\/i> Copier le lien\r\n <\/button>\r\n <button onclick=\"closeQrModal()\" class=\"px-5 py-2.5 rounded-xl text-xs font-bold bg-gradient-to-r from-ccb-pink to-ccb-orange text-white\">\r\n Fermer\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n \r\n \r\n <div id=\"modal-wp\" class=\"fixed inset-0 z-50 hidden bg-black\/80 backdrop-blur-md flex items-center justify-center p-4\">\r\n <div class=\"glass-panel rounded-3xl max-w-2xl w-full p-6 sm:p-8 space-y-5 border border-ccb-pink\/50 relative max-h-[90vh] overflow-y-auto\">\r\n <button onclick=\"closeWordpressModal()\" class=\"absolute top-5 right-5 w-9 h-9 rounded-full bg-white\/10 hover:bg-white\/20 text-white flex items-center justify-center\">\r\n <i class=\"fa-solid fa-xmark\"><\/i>\r\n <\/button>\r\n\r\n <div>\r\n <span class=\"text-xs font-extrabold uppercase tracking-wider text-ccb-gold\">D\u00e9ploiement sur assistance.ccb01.fr<\/span>\r\n <h3 class=\"text-xl sm:text-2xl font-black text-white mt-1\">\r\n <i class=\"fa-brands fa-wordpress text-ccb-orange mr-1\"><\/i> Int\u00e9gration WordPress & Elementor\r\n <\/h3>\r\n <\/div>\r\n\r\n <div class=\"space-y-4 text-xs sm:text-sm text-slate-300 leading-relaxed\">\r\n <div class=\"p-4 rounded-2xl bg-white\/5 border border-white\/10 space-y-2\">\r\n <div class=\"font-bold text-white text-sm\">1. Mise en page Pleine Largeur dans Elementor<\/div>\r\n <p>\r\n Sur <code class=\"text-ccb-gold\">assistance.ccb01.fr<\/code>, cr\u00e9ez une nouvelle page (ex: <code class=\"text-ccb-gold\">\/vote-vitrines<\/code>), choisissez le mod\u00e8le de page <strong>\u00ab Elementor Canevas \u00bb (Elementor Canvas)<\/strong> pour masquer le menu habituel et offrir une vraie exp\u00e9rience d'application mobile au scan du QR Code, puis glissez un widget <strong>HTML<\/strong> contenant ce fichier.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"p-4 rounded-2xl bg-white\/5 border border-white\/10 space-y-2\">\r\n <div class=\"font-bold text-white text-sm\">2. Centralisation des votes (Webhook Google Sheets \/ Make \/ Base WP)<\/div>\r\n <p>\r\n Pour que tous les smartphones des clients alimentent la m\u00eame base de donn\u00e9es centrale en temps r\u00e9el, vous pouvez coller ci-dessous l'URL d'un Webhook (Make.com, Zapier, Google Apps Script ou endpoint REST WordPress). Chaque vote y sera envoy\u00e9 automatiquement en <code class=\"text-ccb-gold\">POST JSON<\/code> :\r\n <\/p>\r\n <div class=\"flex gap-2 pt-1\">\r\n <input type=\"url\" id=\"webhook-url-input\" placeholder=\"https:\/\/hook.eu1.make.com\/votre-webhook-ccb01 (Optionnel)\"\r\n class=\"flex-1 px-3 py-2 rounded-xl bg-slate-900 border border-white\/20 text-xs text-white\">\r\n <button onclick=\"saveWebhookUrl()\" class=\"px-4 py-2 rounded-xl bg-ccb-orange text-black font-bold text-xs\">\r\n Connecter\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"p-4 rounded-2xl bg-ccb-pink\/15 border border-ccb-pink\/40 space-y-1.5\">\r\n <div class=\"font-bold text-white text-sm\"><i class=\"fa-solid fa-lock mr-1 text-ccb-gold\"><\/i> 3. Acc\u00e8s secret au Cockpit Bureau le jour J<\/div>\r\n <p>\r\n Pour la version publique des clients, la barre de d\u00e9monstration du haut peut \u00eatre masqu\u00e9e en changeant <code class=\"text-white font-mono\">SHOW_DEMO_BAR = false<\/code> dans le script, et vous acc\u00e9derez au Cockpit Bureau + Tirage au sort simplement en ajoutant <code class=\"text-ccb-gold font-mono\">?admin=ccb01<\/code> \u00e0 la fin de l'adresse !\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex justify-end\">\r\n <button onclick=\"closeWordpressModal()\" class=\"px-6 py-2.5 rounded-xl text-xs font-bold bg-gradient-to-r from-ccb-pink to-ccb-orange text-white\">\r\n Parfait, j'ai compris !\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"toast-notification\" class=\"fixed bottom-5 right-5 z-50 hidden px-4 py-3 rounded-2xl bg-slate-900\/95 border border-ccb-gold text-white text-xs sm:text-sm font-bold shadow-2xl flex items-center gap-2.5\">\r\n <i class=\"fa-solid fa-circle-check text-ccb-gold text-base\"><\/i>\r\n <span id=\"toast-text\">Action effectu\u00e9e<\/span>\r\n <\/div>\r\n\r\n \r\n \r\n \r\n <footer class=\"relative z-10 border-t border-white\/10 bg-black\/50 backdrop-blur-md py-6 px-4 mt-12\">\r\n <div class=\"max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-400\">\r\n <div class=\"flex items-center gap-3\">\r\n <span class=\"w-3 h-3 rounded-full bg-gradient-to-r from-ccb-pink to-ccb-orange\"><\/span>\r\n <span class=\"font-bold text-white\">Union Commerciale Centre Commerces Bourg (CCB01)<\/span>\r\n <span>\u2022 Bourg-en-Bresse<\/span>\r\n <\/div>\r\n <div class=\"flex flex-wrap items-center gap-4\">\r\n <span>\ud83c\udf81 3 Ch\u00e8ques Cadeaux de 75 \u20ac (Votants)<\/span>\r\n <span>\u2022<\/span>\r\n <span>\ud83c\udfc6 Troph\u00e9e des 3 Vitrines (Commer\u00e7ants)<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n<\/div> \r\n\r\n \r\n \r\n \r\n <script>\r\n \/***********************************************************************\r\n * 1. DONN\u00c9ES INITIALES : COMMERCES DE BOURG-EN-BRESSE & VOTES D\u00c9MO\r\n ***********************************************************************\/\r\n const STORAGE_KEY_SHOPS = 'ccb01_vitrines_shops_v1';\r\n const STORAGE_KEY_VOTERS = 'ccb01_vitrines_voters_v1';\r\n const STORAGE_KEY_WINNERS = 'ccb01_vitrines_winners_v1';\r\n const STORAGE_KEY_DUPLICATES = 'ccb01_vitrines_dups_v1';\r\n\r\n \/\/ Liste r\u00e9aliste de commerces par rue du centre-ville de Bourg-en-Bresse (personnalisable)\r\n const DEFAULT_SHOPS = [\r\n { id: 'ccb-1', name: 'Maison L\u00e9a - Pr\u00eat-\u00e0-Porter', street: 'Rue Notre-Dame', category: 'Mode & Accessoires', icon: 'fa-shirt', votes: 48 },\r\n { id: 'ccb-2', name: 'Chocolaterie & Douceurs de Bresse', street: 'Rue Victor Basch', category: 'Gastronomie & Chocolats', icon: 'fa-cookie-bite', votes: 62 },\r\n { id: 'ccb-3', name: 'Bijouterie L\\'\u00c9clat d\\'Or', street: 'Rue Notre-Dame', category: 'Horlogerie & Bijoux', icon: 'fa-gem', votes: 55 },\r\n { id: 'ccb-4', name: 'Fleuriste L\\'Atelier V\u00e9g\u00e9tal', street: 'Rue Gambetta', category: 'Fleurs & D\u00e9coration', icon: 'fa-seedling', votes: 41 },\r\n { id: 'ccb-5', name: 'Librairie Papeterie du Centre', street: 'Place Carriat', category: 'Culture & Livres', icon: 'fa-book-open', votes: 37 },\r\n { id: 'ccb-6', name: 'Optique Cr\u00e9ateurs Bourg', street: 'Carr\u00e9 Amiot', category: 'Opticien', icon: 'fa-glasses', votes: 29 },\r\n { id: 'ccb-7', name: 'Concept Store L\\'Esprit D\u00e9co', street: 'Rue Gambetta', category: 'Maison & Cadeaux', icon: 'fa-couch', votes: 34 },\r\n { id: 'ccb-8', name: 'P\u00e2tisserie Salon de Th\u00e9 Imp\u00e9rial', street: 'Rue Notre-Dame', category: 'Boulangerie P\u00e2tisserie', icon: 'fa-cake-candles', votes: 44 },\r\n { id: 'ccb-9', name: 'Chaussures & Maroquinerie Bresse', street: 'Rue Victor Basch', category: 'Chaussures & Sacs', icon: 'fa-bag-shopping', votes: 26 },\r\n { id: 'ccb-10', name: 'Cave & \u00c9picerie Fine du Terroir', street: 'Rue Gambetta', category: 'Vins & Terroir', icon: 'fa-wine-bottle', votes: 31 },\r\n { id: 'ccb-11', name: 'Boutique Enfants Les Petits Lutins', street: 'Carr\u00e9 Amiot', category: 'Jouets & Mode Enfant', icon: 'fa-puzzle-piece', votes: 39 },\r\n { id: 'ccb-12', name: 'Institut Beaut\u00e9 & Parfumerie', street: 'Place Carriat', category: 'Beaut\u00e9 & Bien-\u00eatre', icon: 'fa-spa', votes: 24 }\r\n ];\r\n\r\n \/\/ Votants initiaux de d\u00e9monstration pour que le tirage au sort fonctionne imm\u00e9diatement en r\u00e9union de bureau\r\n const DEFAULT_VOTERS = [\r\n { id: 'CCB-2026-1042', name: 'Sophie Mercier', phone: '0614283910', email: 'sophie.mercier01@email.fr', shopId: 'ccb-2', timestamp: '22\/10\/2026 14:15' },\r\n { id: 'CCB-2026-1829', name: 'Laurent Gauthier', phone: '0678451290', email: 'l.gauthier.bourg@email.fr', shopId: 'ccb-3', timestamp: '22\/10\/2026 14:22' },\r\n { id: 'CCB-2026-2310', name: 'Camille Deschamps', phone: '0781234509', email: 'camille.deschamps@email.fr', shopId: 'ccb-1', timestamp: '22\/10\/2026 14:30' },\r\n { id: 'CCB-2026-2944', name: 'Nicolas Perrin', phone: '0645892311', email: 'nicolas.perrin01@email.fr', shopId: 'ccb-8', timestamp: '22\/10\/2026 14:38' },\r\n { id: 'CCB-2026-3412', name: '\u00c9lodie Chanal', phone: '0698127634', email: 'elodie.chanal@email.fr', shopId: 'ccb-2', timestamp: '22\/10\/2026 14:44' },\r\n { id: 'CCB-2026-4091', name: 'Thomas Guillot', phone: '0762349812', email: 'thomas.guillot@email.fr', shopId: 'ccb-4', timestamp: '22\/10\/2026 14:50' },\r\n { id: 'CCB-2026-4820', name: 'Val\u00e9rie Morel', phone: '0633491827', email: 'valerie.morel01@email.fr', shopId: 'ccb-3', timestamp: '22\/10\/2026 14:55' },\r\n { id: 'CCB-2026-5190', name: 'Julien Blanc', phone: '0651209843', email: 'julien.blanc.ain@email.fr', shopId: 'ccb-11', timestamp: '22\/10\/2026 15:01' },\r\n { id: 'CCB-2026-5903', name: 'Aur\u00e9lie Tissot', phone: '0687654321', email: 'aurelie.tissot@email.fr', shopId: 'ccb-1', timestamp: '22\/10\/2026 15:05' },\r\n { id: 'CCB-2026-6411', name: 'Marc-Antoine Favre', phone: '0755432198', email: 'ma.favre01@email.fr', shopId: 'ccb-5', timestamp: '22\/10\/2026 15:09' }\r\n ];\r\n\r\n \/\/ \u00c9tat de l'application\r\n let shops = [];\r\n let voters = [];\r\n let drawnWinners = [null, null, null]; \/\/ 3 gagnants de 75 \u20ac\r\n let blockedDuplicates = 14;\r\n let selectedShopId = '';\r\n let currentStreetFilter = 'ALL';\r\n let showUnmaskedPhones = false;\r\n let soundEnabled = true;\r\n let isDrawing = false;\r\n\r\n \/***********************************************************************\r\n * 2. INITIALISATION AU CHARGEMENT\r\n ***********************************************************************\/\r\n window.onload = function () {\r\n \/\/ Active par d\u00e9faut le mode Plein \u00c9cran propre sur WordPress (masque l'ancien titre blanc)\r\n document.body.classList.add('ccb-clean-wp-page');\r\n detectWordPressSiteLogo();\r\n\r\n loadStateFromStorage();\r\n initFestiveBackgroundCanvas();\r\n startCountdownTimer();\r\n renderClientShops();\r\n renderAdminDashboard();\r\n populateQrModalDropdown();\r\n checkUrlParameters();\r\n };\r\n\r\n \/\/ D\u00e9tecte automatiquement le vrai logo PNG de votre site WordPress s'il est pr\u00e9sent dans la page\r\n function detectWordPressSiteLogo() {\r\n try {\r\n const wpLogoSelectors = [\r\n 'img.custom-logo',\r\n '.site-logo img',\r\n '.elementor-widget-theme-site-logo img',\r\n 'header img[src*=\"logo\"]',\r\n 'img[src*=\"centre_commerces_bourg\"]',\r\n 'img[src*=\"ccb\"]'\r\n ];\r\n for (const sel of wpLogoSelectors) {\r\n const foundImg = document.querySelector(sel);\r\n if (foundImg && foundImg.src && foundImg.id !== 'ccb-detected-wp-logo') {\r\n const targetImg = document.getElementById('ccb-detected-wp-logo');\r\n const fallbackSvg = document.getElementById('ccb-fallback-svg-logo');\r\n if (targetImg && fallbackSvg) {\r\n targetImg.src = foundImg.src;\r\n targetImg.classList.remove('hidden');\r\n fallbackSvg.classList.add('hidden');\r\n break;\r\n }\r\n }\r\n }\r\n } catch (e) {}\r\n }\r\n\r\n \/\/ Permet d'afficher ou masquer l'ancien ent\u00eate WordPress (ex: \"Les votes sont termin\u00e9s...\")\r\n function toggleCleanWpPage() {\r\n const isClean = document.body.classList.toggle('ccb-clean-wp-page');\r\n const label = document.getElementById('label-wp-fullscreen');\r\n if (label) {\r\n label.textContent = isClean ? 'Mode Plein \u00c9cran : Actif' : 'Ent\u00eate WP : Visible';\r\n }\r\n showToast(isClean ? \"Ancien titre WordPress masqu\u00e9 (Plein \u00e9cran noir actif)\" : \"Ent\u00eate WordPress d'origine r\u00e9affich\u00e9\");\r\n }\r\n\r\n function loadStateFromStorage() {\r\n try {\r\n const savedShops = localStorage.getItem(STORAGE_KEY_SHOPS);\r\n const savedVoters = localStorage.getItem(STORAGE_KEY_VOTERS);\r\n const savedWinners = localStorage.getItem(STORAGE_KEY_WINNERS);\r\n const savedDups = localStorage.getItem(STORAGE_KEY_DUPLICATES);\r\n\r\n shops = savedShops ? JSON.parse(savedShops) : JSON.parse(JSON.stringify(DEFAULT_SHOPS));\r\n voters = savedVoters ? JSON.parse(savedVoters) : JSON.parse(JSON.stringify(DEFAULT_VOTERS));\r\n drawnWinners = savedWinners ? JSON.parse(savedWinners) : [null, null, null];\r\n blockedDuplicates = savedDups ? parseInt(savedDups, 10) : 14;\r\n } catch (e) {\r\n shops = JSON.parse(JSON.stringify(DEFAULT_SHOPS));\r\n voters = JSON.parse(JSON.stringify(DEFAULT_VOTERS));\r\n drawnWinners = [null, null, null];\r\n }\r\n updateNavVoteBadge();\r\n }\r\n\r\n function saveStateToStorage() {\r\n try {\r\n localStorage.setItem(STORAGE_KEY_SHOPS, JSON.stringify(shops));\r\n localStorage.setItem(STORAGE_KEY_VOTERS, JSON.stringify(voters));\r\n localStorage.setItem(STORAGE_KEY_WINNERS, JSON.stringify(drawnWinners));\r\n localStorage.setItem(STORAGE_KEY_DUPLICATES, String(blockedDuplicates));\r\n } catch (e) {\r\n \/\/ Ignore storage quota errors in restricted iframe\r\n }\r\n updateNavVoteBadge();\r\n }\r\n\r\n function getTotalVotes() {\r\n return shops.reduce((acc, s) => acc + s.votes, 0);\r\n }\r\n\r\n function updateNavVoteBadge() {\r\n const badge = document.getElementById('nav-badge-votes');\r\n if (badge) badge.textContent = getTotalVotes();\r\n }\r\n\r\n \/***********************************************************************\r\n * 3. D\u00c9TECTION DES PARAM\u00c8TRES URL (?commerce=id ou ?admin=ccb01)\r\n ***********************************************************************\/\r\n function checkUrlParameters() {\r\n const params = new URLSearchParams(window.location.search);\r\n if (params.get('admin') === 'ccb01') {\r\n switchViewMode('admin');\r\n }\r\n const preShop = params.get('commerce') || params.get('vitrine') || params.get('shop');\r\n if (preShop) {\r\n const found = shops.find(s => s.id === preShop);\r\n if (found) {\r\n selectShop(found.id, true);\r\n }\r\n }\r\n }\r\n\r\n function simulateQrPreselection() {\r\n switchViewMode('client');\r\n resetClientFormForTest();\r\n const randomShop = shops[Math.floor(Math.random() * shops.length)];\r\n selectShop(randomShop.id, true);\r\n showToast(`Scan QR simul\u00e9 pour : ${randomShop.name}`);\r\n window.scrollTo({ top: 180, behavior: 'smooth' });\r\n }\r\n\r\n \/***********************************************************************\r\n * 4. NAVIGATION ENTRE VUE CLIENT ET COCKPIT BUREAU ADMIN\r\n ***********************************************************************\/\r\n function switchViewMode(mode) {\r\n const viewClient = document.getElementById('view-client');\r\n const viewAdmin = document.getElementById('view-admin');\r\n const btnClient = document.getElementById('btn-mode-client');\r\n const btnAdmin = document.getElementById('btn-mode-admin');\r\n\r\n if (mode === 'admin') {\r\n viewClient.classList.add('hidden');\r\n viewAdmin.classList.remove('hidden');\r\n btnAdmin.className = 'px-3.5 py-1.5 rounded-lg text-xs sm:text-sm font-bold transition-all flex items-center gap-2 bg-gradient-to-r from-ccb-pink to-ccb-orange text-white shadow-lg';\r\n btnClient.className = 'px-3.5 py-1.5 rounded-lg text-xs sm:text-sm font-bold transition-all flex items-center gap-2 text-slate-300 hover:text-white hover:bg-white\/5';\r\n renderAdminDashboard();\r\n } else {\r\n viewAdmin.classList.add('hidden');\r\n viewClient.classList.remove('hidden');\r\n btnClient.className = 'px-3.5 py-1.5 rounded-lg text-xs sm:text-sm font-bold transition-all flex items-center gap-2 bg-gradient-to-r from-ccb-pink to-ccb-orange text-white shadow-lg';\r\n btnAdmin.className = 'px-3.5 py-1.5 rounded-lg text-xs sm:text-sm font-bold transition-all flex items-center gap-2 text-slate-300 hover:text-white hover:bg-white\/5';\r\n renderClientShops();\r\n }\r\n }\r\n\r\n \/***********************************************************************\r\n * 5. VUE CLIENT : AFFICHAGE, FILTRES ET S\u00c9LECTION DES VITRINES\r\n ***********************************************************************\/\r\n function renderClientShops() {\r\n const dropdown = document.getElementById('shop-select-dropdown');\r\n const grid = document.getElementById('client-shops-grid');\r\n const countBadge = document.getElementById('shops-count-badge');\r\n const searchVal = (document.getElementById('shop-search-input')?.value || '').toLowerCase().trim();\r\n\r\n if (countBadge) countBadge.textContent = `${shops.length} vitrines en lice`;\r\n\r\n \/\/ 1. Remplir la liste d\u00e9roulante <select> tri\u00e9e par ordre alphab\u00e9tique\r\n const sortedAlpha = [...shops].sort((a, b) => a.name.localeCompare(b.name));\r\n dropdown.innerHTML = '<option value=\"\">-- Choisissez un commerce dans la liste --<\/option>';\r\n sortedAlpha.forEach(shop => {\r\n const opt = document.createElement('option');\r\n opt.value = shop.id;\r\n opt.textContent = `${shop.name} (${shop.street})`;\r\n if (shop.id === selectedShopId) opt.selected = true;\r\n dropdown.appendChild(opt);\r\n });\r\n\r\n \/\/ 2. Filtrer et afficher les cartes visuelles\r\n const filtered = sortedAlpha.filter(shop => {\r\n const matchStreet = currentStreetFilter === 'ALL'\r\n || (currentStreetFilter === 'Place Carriat' && (shop.street.includes('Carriat') || shop.street.includes('Bichat')))\r\n || shop.street.toLowerCase().includes(currentStreetFilter.toLowerCase());\r\n const matchSearch = !searchVal\r\n || shop.name.toLowerCase().includes(searchVal)\r\n || shop.street.toLowerCase().includes(searchVal)\r\n || shop.category.toLowerCase().includes(searchVal);\r\n return matchStreet && matchSearch;\r\n });\r\n\r\n if (filtered.length === 0) {\r\n grid.innerHTML = `\r\n <div class=\"col-span-full py-6 text-center text-xs text-slate-400\">\r\n Aucun commerce trouv\u00e9 pour cette recherche.\r\n <\/div>\r\n `;\r\n return;\r\n }\r\n\r\n grid.innerHTML = filtered.map(shop => {\r\n const isSelected = shop.id === selectedShopId;\r\n return `\r\n <div onclick=\"selectShop('${shop.id}', false)\"\r\n class=\"cursor-pointer rounded-2xl p-3.5 border transition-all duration-200 flex items-center justify-between gap-3 ${\r\n isSelected\r\n ? 'shop-card-selected'\r\n : 'bg-slate-900\/85 border-white\/15 hover:border-ccb-orange\/50 hover:bg-slate-900'\r\n }\">\r\n <div class=\"flex items-center gap-3 min-w-0\">\r\n <div class=\"w-10 h-10 rounded-xl ${\r\n isSelected ? 'bg-ccb-pink text-white' : 'bg-white\/10 text-ccb-orange'\r\n } flex items-center justify-center text-base shrink-0 transition\">\r\n <i class=\"fa-solid ${shop.icon || 'fa-store'}\"><\/i>\r\n <\/div>\r\n <div class=\"min-w-0\">\r\n <div class=\"text-xs sm:text-sm font-extrabold text-white leading-snug break-words\">${escapeHtml(shop.name)}<\/div>\r\n <div class=\"text-[11px] text-slate-300 mt-0.5\">\r\n <i class=\"fa-solid fa-location-dot text-ccb-pink mr-1\"><\/i>${escapeHtml(shop.street)}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"shrink-0\">\r\n <span class=\"w-7 h-7 rounded-full flex items-center justify-center text-xs ${\r\n isSelected\r\n ? 'bg-ccb-gold text-black font-black shadow'\r\n : 'bg-white\/10 text-slate-300'\r\n }\">\r\n <i class=\"fa-solid ${isSelected ? 'fa-check' : 'fa-heart'}\"><\/i>\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('');\r\n }\r\n\r\n function setStreetFilter(street) {\r\n currentStreetFilter = street;\r\n document.querySelectorAll('.street-pill').forEach(btn => {\r\n if (btn.getAttribute('data-street') === street) {\r\n btn.className = 'street-pill shrink-0 px-3 py-1 rounded-full font-bold bg-ccb-pink text-white transition';\r\n } else {\r\n btn.className = 'street-pill shrink-0 px-3 py-1 rounded-full font-medium bg-white\/5 hover:bg-white\/15 text-slate-300 transition';\r\n }\r\n });\r\n renderClientShops();\r\n }\r\n\r\n function filterShopsClient() {\r\n renderClientShops();\r\n }\r\n\r\n function selectShopFromDropdown(shopId) {\r\n selectShop(shopId, false);\r\n }\r\n\r\n function selectShop(shopId, fromQrScan) {\r\n selectedShopId = shopId;\r\n const shop = shops.find(s => s.id === shopId);\r\n const pill = document.getElementById('selected-shop-pill');\r\n const nameDisplay = document.getElementById('selected-shop-name-display');\r\n const qrBanner = document.getElementById('qr-preselect-banner');\r\n const qrText = document.getElementById('qr-preselect-text');\r\n\r\n if (shop) {\r\n pill.classList.remove('hidden');\r\n nameDisplay.textContent = `${shop.name} (${shop.street})`;\r\n if (fromQrScan) {\r\n qrBanner.classList.remove('hidden');\r\n qrText.textContent = `Vitrine pr\u00e9-s\u00e9lectionn\u00e9e : ${shop.name}`;\r\n }\r\n playBeep(580, 0.06, 'sine');\r\n } else {\r\n pill.classList.add('hidden');\r\n qrBanner.classList.add('hidden');\r\n }\r\n\r\n renderClientShops();\r\n }\r\n\r\n function clearShopSelection() {\r\n selectShop('', false);\r\n document.getElementById('qr-preselect-banner').classList.add('hidden');\r\n }\r\n\r\n \/***********************************************************************\r\n * 6. SOUMISSION DU VOTE & VALIDATION ANTI-DOUBLONS\r\n ***********************************************************************\/\r\n function normalizePhone(phone) {\r\n return phone.replace(\/[\\s.\\-+]\/g, '').replace(\/^33\/, '0');\r\n }\r\n\r\n function handleVoteSubmit(e) {\r\n e.preventDefault();\r\n const errorBox = document.getElementById('vote-error-box');\r\n const errorText = document.getElementById('vote-error-text');\r\n errorBox.classList.add('hidden');\r\n\r\n const name = document.getElementById('voter-name').value.trim();\r\n const rawPhone = document.getElementById('voter-phone').value.trim();\r\n const email = document.getElementById('voter-email').value.trim().toLowerCase();\r\n const rgpd = document.getElementById('voter-rgpd').checked;\r\n const cleanPhone = normalizePhone(rawPhone);\r\n\r\n \/\/ 1. V\u00e9rifier qu'une vitrine est choisie\r\n if (!selectedShopId) {\r\n showVoteError(\"Merci de choisir la vitrine pour laquelle vous votez (\u00e9tape 1).\");\r\n return;\r\n }\r\n\r\n \/\/ 2. V\u00e9rifier le nom\r\n if (name.length < 3) {\r\n showVoteError(\"Merci d'indiquer votre nom et pr\u00e9nom complets.\");\r\n return;\r\n }\r\n\r\n \/\/ 3. V\u00e9rifier le format du num\u00e9ro de t\u00e9l\u00e9phone fran\u00e7ais (10 chiffres commen\u00e7ant par 06 ou 07 ou 04)\r\n if (!\/^0[1-9]\\d{8}$\/.test(cleanPhone)) {\r\n showVoteError(\"Merci de saisir un num\u00e9ro de t\u00e9l\u00e9phone valide \u00e0 10 chiffres (ex: 06 12 34 56 78).\");\r\n return;\r\n }\r\n\r\n \/\/ 4. V\u00e9rifier l'email\r\n if (!\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email)) {\r\n showVoteError(\"Merci de saisir une adresse e-mail valide.\");\r\n return;\r\n }\r\n\r\n \/\/ 5. V\u00e9rifier le consentement RGPD\r\n if (!rgpd) {\r\n showVoteError(\"Merci d'accepter le r\u00e8glement du jeu concours pour participer au tirage au sort.\");\r\n return;\r\n }\r\n\r\n \/\/ 6. Contr\u00f4le Anti-Doublon (1 vote par num\u00e9ro ou email)\r\n const duplicateExists = voters.some(\r\n v => normalizePhone(v.phone) === cleanPhone || v.email.toLowerCase() === email\r\n );\r\n if (duplicateExists) {\r\n blockedDuplicates++;\r\n saveStateToStorage();\r\n showVoteError(\"Une participation a d\u00e9j\u00e0 \u00e9t\u00e9 enregistr\u00e9e avec ce num\u00e9ro de t\u00e9l\u00e9phone ou cette adresse e-mail.\");\r\n return;\r\n }\r\n\r\n \/\/ 7. Enregistrer le vote\r\n const shop = shops.find(s => s.id === selectedShopId);\r\n if (!shop) return;\r\n\r\n shop.votes += 1;\r\n const ticketNumber = `CCB-2026-${Math.floor(1000 + Math.random() * 9000)}`;\r\n const nowStr = new Date().toLocaleDateString('fr-FR') + ' \u00e0 ' + new Date().toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });\r\n\r\n const newVoter = {\r\n id: ticketNumber,\r\n name: name,\r\n phone: cleanPhone,\r\n email: email,\r\n shopId: shop.id,\r\n timestamp: nowStr\r\n };\r\n\r\n voters.unshift(newVoter);\r\n saveStateToStorage();\r\n\r\n \/\/ Envoi Webhook optionnel si configur\u00e9 pour WordPress \/ Make \/ Google Sheets\r\n sendVoteToWebhook(newVoter, shop);\r\n\r\n \/\/ 8. Afficher le Ticket d'Or & Lancer les confettis !\r\n document.getElementById('vote-form').classList.add('hidden');\r\n document.getElementById('qr-preselect-banner').classList.add('hidden');\r\n const confirmCard = document.getElementById('vote-confirmation-card');\r\n confirmCard.classList.remove('hidden');\r\n\r\n document.getElementById('confirm-voter-firstname').textContent = name.split(' ')[0];\r\n document.getElementById('confirm-ticket-number').textContent = `#${ticketNumber}`;\r\n document.getElementById('confirm-full-name').textContent = name;\r\n document.getElementById('confirm-shop-name').textContent = `${shop.name} (${shop.street})`;\r\n document.getElementById('confirm-date-time').textContent = nowStr;\r\n\r\n launchConfettiBurst();\r\n playVictoryChime();\r\n window.scrollTo({ top: 100, behavior: 'smooth' });\r\n }\r\n\r\n function showVoteError(msg) {\r\n const errorBox = document.getElementById('vote-error-box');\r\n const errorText = document.getElementById('vote-error-text');\r\n errorText.textContent = msg;\r\n errorBox.classList.remove('hidden');\r\n playBeep(220, 0.15, 'sawtooth');\r\n }\r\n\r\n function resetClientFormForTest() {\r\n document.getElementById('vote-form').reset();\r\n document.getElementById('vote-form').classList.remove('hidden');\r\n document.getElementById('vote-confirmation-card').classList.add('hidden');\r\n document.getElementById('vote-error-box').classList.add('hidden');\r\n clearShopSelection();\r\n }\r\n\r\n function shareContest() {\r\n const shareUrl = 'https:\/\/assistance.ccb01.fr\/concours-vitrines\/';\r\n const tempInput = document.createElement('input');\r\n tempInput.value = `Je viens de voter pour la plus belle vitrine de No\u00ebl de Bourg-en-Bresse avec Centre Commerces Bourg ! Votez aussi et tentez de gagner 3 ch\u00e8ques cadeaux de 75 \u20ac : ${shareUrl}`;\r\n document.body.appendChild(tempInput);\r\n tempInput.select();\r\n document.execCommand('copy');\r\n document.body.removeChild(tempInput);\r\n showToast(\"Message et lien copi\u00e9s ! Vous pouvez les coller dans vos messages.\");\r\n }\r\n\r\n \/***********************************************************************\r\n * 7. COCKPIT BUREAU ADMIN : PODIUM TOP 3, CLASSEMENT & TIRAGE LIVE\r\n ***********************************************************************\/\r\n function renderAdminDashboard() {\r\n const totalVotes = getTotalVotes();\r\n\r\n \/\/ KPIs\r\n document.getElementById('kpi-total-votes').textContent = totalVotes;\r\n document.getElementById('kpi-unique-voters').textContent = voters.length;\r\n document.getElementById('kpi-total-shops').textContent = shops.length;\r\n document.getElementById('kpi-blocked-duplicates').textContent = blockedDuplicates;\r\n\r\n \/\/ Trier les commerces par nombre de votes d\u00e9croissant\r\n const rankedShops = [...shops].sort((a, b) => b.votes - a.votes);\r\n\r\n \/\/ 1. Rendu du Podium Top 3 (2\u00e8me \u00e0 gauche, 1er au centre, 3\u00e8me \u00e0 droite sur desktop)\r\n const first = rankedShops[0];\r\n const second = rankedShops[1];\r\n const third = rankedShops[2];\r\n\r\n const podiumContainer = document.getElementById('podium-container');\r\n const getPct = (v) => totalVotes > 0 ? ((v \/ totalVotes) * 100).toFixed(1) : '0.0';\r\n\r\n podiumContainer.innerHTML = `\r\n \r\n ${second ? `\r\n <div class=\"order-2 md:order-1 rounded-3xl p-5 bg-gradient-to-b from-slate-800\/90 to-slate-900\/95 border border-slate-400\/40 text-center relative shadow-xl\">\r\n <div class=\"w-12 h-12 rounded-2xl bg-slate-300 text-slate-900 font-black text-xl flex items-center justify-center mx-auto -mt-9 shadow-lg border-2 border-white\">\r\n 2<span class=\"text-xs align-top\">e<\/span>\r\n <\/div>\r\n <div class=\"mt-3 text-xs font-bold uppercase tracking-wider text-slate-300\">\ud83e\udd48 M\u00e9daille d'Argent<\/div>\r\n <h4 class=\"text-base sm:text-lg font-black text-white mt-1 truncate\">${escapeHtml(second.name)}<\/h4>\r\n <p class=\"text-xs text-slate-400\">${escapeHtml(second.street)}<\/p>\r\n <div class=\"mt-4 py-2.5 px-4 rounded-2xl bg-black\/40 border border-white\/10 flex items-center justify-between\">\r\n <span class=\"text-xl font-black text-slate-200\">${second.votes} <small class=\"text-xs font-normal\">votes<\/small><\/span>\r\n <span class=\"text-xs font-bold px-2 py-0.5 rounded-full bg-slate-400\/20 text-slate-200\">${getPct(second.votes)}%<\/span>\r\n <\/div>\r\n <\/div>` : ''}\r\n\r\n \r\n ${first ? `\r\n <div class=\"order-1 md:order-2 rounded-3xl p-6 bg-gradient-to-b from-amber-500\/25 via-ccb-pink\/20 to-slate-900\/95 border-2 border-ccb-gold text-center relative shadow-[0_0_40px_rgba(255,215,0,0.25)] md:-translate-y-3\">\r\n <div class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-ccb-gold to-ccb-orange text-black font-black text-2xl flex items-center justify-center mx-auto -mt-11 shadow-xl border-2 border-white\">\r\n <i class=\"fa-solid fa-trophy\"><\/i>\r\n <\/div>\r\n <div class=\"mt-3 text-xs font-extrabold uppercase tracking-widest text-ccb-gold\">\ud83c\udfc6 1er \u2022 Plus Belle Vitrine<\/div>\r\n <h4 class=\"text-lg sm:text-xl font-black text-white mt-1 truncate\">${escapeHtml(first.name)}<\/h4>\r\n <p class=\"text-xs text-amber-200\/80\">${escapeHtml(first.street)}<\/p>\r\n <div class=\"mt-4 py-3 px-4 rounded-2xl bg-black\/50 border border-ccb-gold\/40 flex items-center justify-between\">\r\n <span class=\"text-2xl font-black text-ccb-gold\">${first.votes} <small class=\"text-xs font-normal text-white\">votes<\/small><\/span>\r\n <span class=\"text-xs font-extrabold px-2.5 py-1 rounded-full bg-ccb-gold text-black\">${getPct(first.votes)}%<\/span>\r\n <\/div>\r\n <\/div>` : ''}\r\n\r\n \r\n ${third ? `\r\n <div class=\"order-3 rounded-3xl p-5 bg-gradient-to-b from-amber-900\/40 to-slate-900\/95 border border-amber-600\/40 text-center relative shadow-xl\">\r\n <div class=\"w-12 h-12 rounded-2xl bg-amber-600 text-white font-black text-xl flex items-center justify-center mx-auto -mt-9 shadow-lg border-2 border-amber-300\">\r\n 3<span class=\"text-xs align-top\">e<\/span>\r\n <\/div>\r\n <div class=\"mt-3 text-xs font-bold uppercase tracking-wider text-amber-400\">\ud83e\udd49 M\u00e9daille de Bronze<\/div>\r\n <h4 class=\"text-base sm:text-lg font-black text-white mt-1 truncate\">${escapeHtml(third.name)}<\/h4>\r\n <p class=\"text-xs text-slate-400\">${escapeHtml(third.street)}<\/p>\r\n <div class=\"mt-4 py-2.5 px-4 rounded-2xl bg-black\/40 border border-white\/10 flex items-center justify-between\">\r\n <span class=\"text-xl font-black text-amber-400\">${third.votes} <small class=\"text-xs font-normal text-white\">votes<\/small><\/span>\r\n <span class=\"text-xs font-bold px-2 py-0.5 rounded-full bg-amber-500\/20 text-amber-300\">${getPct(third.votes)}%<\/span>\r\n <\/div>\r\n <\/div>` : ''}\r\n `;\r\n\r\n \/\/ 2. Rendu du Classement Complet avec barres de progression\r\n const maxVotes = rankedShops.length > 0 ? Math.max(rankedShops[0].votes, 1) : 1;\r\n const leaderboardEl = document.getElementById('admin-leaderboard-list');\r\n leaderboardEl.innerHTML = rankedShops.map((shop, idx) => {\r\n const rank = idx + 1;\r\n const widthPct = Math.round((shop.votes \/ maxVotes) * 100);\r\n const sharePct = getPct(shop.votes);\r\n let badgeClass = 'bg-white\/10 text-slate-300';\r\n if (rank === 1) badgeClass = 'bg-ccb-gold text-black font-black';\r\n if (rank === 2) badgeClass = 'bg-slate-300 text-black font-black';\r\n if (rank === 3) badgeClass = 'bg-amber-600 text-white font-black';\r\n\r\n return `\r\n <div class=\"p-3 rounded-2xl bg-slate-900\/75 border border-white\/10 space-y-2\">\r\n <div class=\"flex items-center justify-between gap-2\">\r\n <div class=\"flex items-center gap-2.5 min-w-0\">\r\n <span class=\"w-6 h-6 rounded-lg text-xs flex items-center justify-center shrink-0 ${badgeClass}\">\r\n ${rank}\r\n <\/span>\r\n <div class=\"min-w-0\">\r\n <div class=\"text-xs sm:text-sm font-bold text-white truncate\">${escapeHtml(shop.name)}<\/div>\r\n <div class=\"text-[11px] text-slate-400\">${escapeHtml(shop.street)} \u2022 ${escapeHtml(shop.category)}<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"text-right shrink-0\">\r\n <span class=\"text-sm font-black text-white\">${shop.votes}<\/span>\r\n <span class=\"text-xs text-slate-400\"> (${sharePct}%)<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"w-full h-2 rounded-full bg-black\/60 overflow-hidden\">\r\n <div class=\"h-full rounded-full ${\r\n rank <= 3 ? 'bg-gradient-to-r from-ccb-pink via-ccb-orange to-ccb-gold' : 'bg-ccb-pink\/70'\r\n } transition-all duration-500\" style=\"width: ${widthPct}%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('');\r\n\r\n \/\/ 3. Rendu des derniers votants\r\n const votersListEl = document.getElementById('admin-recent-voters');\r\n votersListEl.innerHTML = voters.slice(0, 25).map(v => {\r\n const shop = shops.find(s => s.id === v.shopId);\r\n const shopName = shop ? shop.name : 'Commerce CCB';\r\n const displayPhone = showUnmaskedPhones\r\n ? formatPhoneReadable(v.phone)\r\n : maskPhone(v.phone);\r\n\r\n return `\r\n <div class=\"p-3 rounded-2xl bg-slate-900\/75 border border-white\/10 flex items-center justify-between gap-2 text-xs\">\r\n <div class=\"min-w-0\">\r\n <div class=\"font-bold text-white truncate\">\r\n ${escapeHtml(v.name)}\r\n <span class=\"ml-1 font-mono text-[10px] text-ccb-gold\">${v.id}<\/span>\r\n <\/div>\r\n <div class=\"text-[11px] text-slate-400 truncate\">\r\n <i class=\"fa-solid fa-heart text-ccb-pink mr-1\"><\/i>${escapeHtml(shopName)}\r\n <\/div>\r\n <\/div>\r\n <div class=\"text-right shrink-0\">\r\n <div class=\"font-mono text-slate-200 font-semibold\">${displayPhone}<\/div>\r\n <div class=\"text-[10px] text-slate-500\">${v.timestamp}<\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('');\r\n\r\n \/\/ 4. Rendu des 3 Gagnants du Tirage au Sort (3 x 75 \u20ac)\r\n renderWinnersCards();\r\n }\r\n\r\n function formatPhoneReadable(p) {\r\n const clean = normalizePhone(p);\r\n return clean.replace(\/(\\d{2})(?=\\d)\/g, '$1 ').trim();\r\n }\r\n\r\n function maskPhone(p) {\r\n const clean = normalizePhone(p);\r\n if (clean.length < 10) return clean;\r\n return `${clean.slice(0, 2)} \u2022\u2022 \u2022\u2022 ${clean.slice(6, 8)} ${clean.slice(8, 10)}`;\r\n }\r\n\r\n function toggleMaskPhones() {\r\n showUnmaskedPhones = !showUnmaskedPhones;\r\n const btn = document.getElementById('btn-mask-phones');\r\n btn.innerHTML = showUnmaskedPhones\r\n ? '<i class=\"fa-regular fa-eye-slash text-ccb-gold\"><\/i> Masquer N\u00b0'\r\n : '<i class=\"fa-regular fa-eye\"><\/i> Afficher N\u00b0';\r\n renderAdminDashboard();\r\n }\r\n\r\n \/***********************************************************************\r\n * 8. MACHINE \u00c0 TIRAGE AU SORT LIVE DES 3 CH\u00c8QUES CADEAUX DE 75 \u20ac\r\n ***********************************************************************\/\r\n function renderWinnersCards() {\r\n const grid = document.getElementById('winners-cards-grid');\r\n const nextIndex = drawnWinners.findIndex(w => w === null);\r\n const btnDraw = document.getElementById('btn-draw-next');\r\n const btnDrawText = document.getElementById('btn-draw-next-text');\r\n\r\n if (nextIndex === -1) {\r\n btnDrawText.textContent = \"Les 3 Gagnants de 75 \u20ac ont \u00e9t\u00e9 tir\u00e9s au sort !\";\r\n btnDraw.classList.add('opacity-60');\r\n } else {\r\n btnDrawText.textContent = `\ud83c\udfb0 Lancer le tirage du Gagnant #${nextIndex + 1} (Ch\u00e8que 75 \u20ac)`;\r\n btnDraw.classList.remove('opacity-60');\r\n }\r\n\r\n grid.innerHTML = [0, 1, 2].map(idx => {\r\n const winner = drawnWinners[idx];\r\n if (!winner) {\r\n return `\r\n <div class=\"rounded-2xl p-5 bg-black\/40 border-2 border-dashed border-white\/15 flex flex-col items-center justify-center text-center min-h-[175px]\">\r\n <div class=\"w-11 h-11 rounded-full bg-white\/5 text-ccb-gold flex items-center justify-center text-lg mb-2\">\r\n <i class=\"fa-solid fa-gift\"><\/i>\r\n <\/div>\r\n <div class=\"text-xs font-bold uppercase tracking-wider text-slate-400\">Ch\u00e8que Cadeau #${idx + 1}<\/div>\r\n <div class=\"text-lg font-black text-ccb-gold\">Valeur 75 \u20ac<\/div>\r\n <div class=\"text-[11px] text-slate-500 mt-1\">En attente du tirage au sort...<\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n const shop = shops.find(s => s.id === winner.shopId);\r\n const shopName = shop ? shop.name : 'Commerce CCB';\r\n\r\n return `\r\n <div class=\"golden-ticket rounded-2xl p-5 text-left relative shadow-2xl flex flex-col justify-between min-h-[175px]\">\r\n <div>\r\n <div class=\"flex items-center justify-between border-b border-black\/15 pb-2 mb-2.5\">\r\n <span class=\"px-2.5 py-0.5 rounded-full bg-black text-ccb-gold text-[10px] font-black uppercase tracking-wider\">\r\n \ud83c\udfc6 Gagnant #${idx + 1} \u2022 75 \u20ac\r\n <\/span>\r\n <span class=\"font-mono text-xs font-bold text-black\/80\">#${winner.id}<\/span>\r\n <\/div>\r\n <div class=\"text-lg font-black text-black truncate\">${escapeHtml(winner.name)}<\/div>\r\n <div class=\"text-xs font-bold text-ccb-pinkDark mt-0.5\">\r\n <i class=\"fa-solid fa-phone mr-1\"><\/i>${formatPhoneReadable(winner.phone)}\r\n <\/div>\r\n <div class=\"text-[11px] text-black\/75 truncate\">\r\n <i class=\"fa-regular fa-envelope mr-1\"><\/i>${escapeHtml(winner.email)}\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-3 pt-2 border-t border-black\/15 flex items-center justify-between text-[11px] font-bold text-black\/80\">\r\n <span class=\"truncate\"><i class=\"fa-solid fa-store mr-1\"><\/i>Vote : ${escapeHtml(shopName)}<\/span>\r\n <button onclick=\"redrawSpecificSlot(${idx})\" title=\"Retirer au sort si absent\/invalide\" class=\"text-black underline hover:text-ccb-pinkDark ml-2 shrink-0\">\r\n Retirer\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('');\r\n }\r\n\r\n function triggerLiveDraw() {\r\n if (isDrawing) return;\r\n\r\n const nextSlotIndex = drawnWinners.findIndex(w => w === null);\r\n if (nextSlotIndex === -1) {\r\n showToast(\"Les 3 gagnants sont d\u00e9j\u00e0 tir\u00e9s ! Cliquez sur \u00ab R\u00e9initialiser \u00bb pour recommencer.\");\r\n return;\r\n }\r\n\r\n \/\/ Filtrer les votants qui n'ont pas encore gagn\u00e9\r\n const alreadyWonIds = drawnWinners.filter(Boolean).map(w => w.id);\r\n const eligibleVoters = voters.filter(v => !alreadyWonIds.includes(v.id));\r\n\r\n if (eligibleVoters.length === 0) {\r\n showToast(\"Pas assez de votants uniques pour tirer un nouveau gagnant.\");\r\n return;\r\n }\r\n\r\n isDrawing = true;\r\n const mainNameEl = document.getElementById('slot-main-name');\r\n const subInfoEl = document.getElementById('slot-sub-info');\r\n const statusLabel = document.getElementById('slot-status-label');\r\n\r\n statusLabel.innerHTML = `<i class=\"fa-solid fa-spinner fa-spin mr-1\"><\/i> Brasage \u00e9lectronique des ${eligibleVoters.length} tickets en cours...`;\r\n\r\n let ticks = 0;\r\n const totalTicks = 28; \/\/ Environ 3 secondes de suspense\r\n const interval = setInterval(() => {\r\n const randomPreview = eligibleVoters[Math.floor(Math.random() * eligibleVoters.length)];\r\n mainNameEl.textContent = randomPreview.name;\r\n subInfoEl.textContent = `Ticket #${randomPreview.id} \u2022 ${maskPhone(randomPreview.phone)}`;\r\n playBeep(320 + (ticks * 12), 0.04, 'triangle');\r\n ticks++;\r\n\r\n if (ticks >= totalTicks) {\r\n clearInterval(interval);\r\n\r\n \/\/ S\u00e9lection al\u00e9atoire cryptographique finale\r\n const randomBuffer = new Uint32Array(1);\r\n window.crypto.getRandomValues(randomBuffer);\r\n const winnerIndex = randomBuffer[0] % eligibleVoters.length;\r\n const finalWinner = eligibleVoters[winnerIndex];\r\n\r\n drawnWinners[nextSlotIndex] = finalWinner;\r\n saveStateToStorage();\r\n\r\n const shop = shops.find(s => s.id === finalWinner.shopId);\r\n mainNameEl.innerHTML = `<span class=\"text-ccb-gold\">\ud83c\udf89 ${escapeHtml(finalWinner.name)} \ud83c\udf89<\/span>`;\r\n subInfoEl.textContent = `Gagnant #${nextSlotIndex + 1} (Ch\u00e8que 75 \u20ac) \u2022 T\u00e9l : ${formatPhoneReadable(finalWinner.phone)} \u2022 A vot\u00e9 pour : ${shop ? shop.name : 'CCB'}`;\r\n statusLabel.innerHTML = `<i class=\"fa-solid fa-crown mr-1\"><\/i> Gagnant #${nextSlotIndex + 1} officiellement d\u00e9sign\u00e9 !`;\r\n\r\n renderWinnersCards();\r\n launchConfettiBurst();\r\n playVictoryChime();\r\n isDrawing = false;\r\n }\r\n }, 95);\r\n }\r\n\r\n function redrawSpecificSlot(slotIndex) {\r\n if (isDrawing) return;\r\n drawnWinners[slotIndex] = null;\r\n saveStateToStorage();\r\n renderWinnersCards();\r\n triggerLiveDraw();\r\n }\r\n\r\n function resetWinnersDraw() {\r\n if (isDrawing) return;\r\n drawnWinners = [null, null, null];\r\n saveStateToStorage();\r\n document.getElementById('slot-main-name').textContent = 'Cliquez sur \u00ab Tirer un Gagnant \u00bb';\r\n document.getElementById('slot-sub-info').textContent = '3 Ch\u00e8ques Cadeaux Centre Commerces Bourg de 75 \u20ac en jeu';\r\n document.getElementById('slot-status-label').innerHTML = '<i class=\"fa-solid fa-ticket mr-1\"><\/i> Pr\u00eat \u00e0 tirer au sort parmi les participants valid\u00e9s';\r\n renderWinnersCards();\r\n showToast(\"L'urne de tirage au sort a \u00e9t\u00e9 r\u00e9initialis\u00e9e.\");\r\n }\r\n\r\n \/***********************************************************************\r\n * 9. OUTILS BUREAU : SIMULATEUR DE VOTES, AJOUT BOUTIQUE, EXPORT CSV\r\n ***********************************************************************\/\r\n function addSimulatedBatchVotes(count) {\r\n const firstNames = ['Camille', 'Lucas', 'Chlo\u00e9', 'Antoine', 'L\u00e9a', 'Hugo', 'Manon', 'Maxime', 'Sarah', 'Thomas', 'Juliette', 'Romain', 'In\u00e8s', 'Alexandre', 'Clara'];\r\n const lastNames = ['Martin', 'Bernard', 'Dubois', 'Moreau', 'Laurent', 'Simon', 'Michel', 'Lefebvre', 'Roux', 'David', 'Bertrand', 'Morel', 'Girard', 'Lambert'];\r\n\r\n for (let i = 0; i < count; i++) {\r\n const rShop = shops[Math.floor(Math.random() * shops.length)];\r\n rShop.votes += 1;\r\n\r\n const fn = firstNames[Math.floor(Math.random() * firstNames.length)];\r\n const ln = lastNames[Math.floor(Math.random() * lastNames.length)];\r\n const randDigits = Math.floor(10000000 + Math.random() * 89999999);\r\n const ticket = `CCB-2026-${Math.floor(1000 + Math.random() * 9000)}`;\r\n\r\n voters.unshift({\r\n id: ticket,\r\n name: `${fn} ${ln}`,\r\n phone: `06${randDigits}`,\r\n email: `${fn.toLowerCase()}.${ln.toLowerCase()}${Math.floor(Math.random()*99)}@email.fr`,\r\n shopId: rShop.id,\r\n timestamp: 'Vote QR D\u00e9mo'\r\n });\r\n }\r\n\r\n saveStateToStorage();\r\n renderAdminDashboard();\r\n playBeep(660, 0.08, 'sine');\r\n showToast(`+${count} nouveaux votes clients simul\u00e9s avec succ\u00e8s !`);\r\n }\r\n\r\n function toggleAddShopForm() {\r\n const box = document.getElementById('add-shop-form-box');\r\n box.classList.toggle('hidden');\r\n }\r\n\r\n function addCustomShop() {\r\n const nameInput = document.getElementById('new-shop-name');\r\n const streetInput = document.getElementById('new-shop-street');\r\n const catInput = document.getElementById('new-shop-category');\r\n\r\n const name = nameInput.value.trim();\r\n const street = streetInput.value.trim() || 'Centre-Ville';\r\n const category = catInput.value.trim() || 'Commerce Adh\u00e9rent';\r\n\r\n if (!name) {\r\n showToast(\"Veuillez saisir le nom de la boutique.\");\r\n return;\r\n }\r\n\r\n const newId = `ccb-${Date.now()}`;\r\n shops.push({\r\n id: newId,\r\n name: name,\r\n street: street,\r\n category: category,\r\n icon: 'fa-store',\r\n votes: 0\r\n });\r\n\r\n nameInput.value = '';\r\n streetInput.value = '';\r\n catInput.value = '';\r\n toggleAddShopForm();\r\n\r\n saveStateToStorage();\r\n renderAdminDashboard();\r\n renderClientShops();\r\n populateQrModalDropdown();\r\n showToast(`Boutique \u00ab ${name} \u00bb ajout\u00e9e \u00e0 la liste !`);\r\n }\r\n\r\n function exportDataCSV() {\r\n let csvContent = \"\\uFEFF\"; \/\/ BOM UTF-8 pour Excel\r\n csvContent += \"=== CLASSEMENT DES COMMERCES (CONCOURS VITRINES CCB01) ===\\r\\n\";\r\n csvContent += \"Rang;ID Commerce;Nom de la Boutique;Rue;Categorie;Nombre de Votes\\r\\n\";\r\n\r\n const ranked = [...shops].sort((a, b) => b.votes - a.votes);\r\n ranked.forEach((s, idx) => {\r\n csvContent += `${idx + 1};${s.id};\"${s.name.replace(\/\"\/g, '\"\"')}\";\"${s.street}\";\"${s.category}\";${s.votes}\\r\\n`;\r\n });\r\n\r\n csvContent += \"\\r\\n=== LISTE DES CLIENTS VOTANTS (TIRAGE AU SORT 3x 75 EUR) ===\\r\\n\";\r\n csvContent += \"Ticket;Nom et Prenom;Telephone;Email;Boutique Votee;Horodatage\\r\\n\";\r\n\r\n voters.forEach(v => {\r\n const shop = shops.find(s => s.id === v.shopId);\r\n const shopName = shop ? shop.name : v.shopId;\r\n csvContent += `${v.id};\"${v.name.replace(\/\"\/g, '\"\"')}\";\"${v.phone}\";\"${v.email}\";\"${shopName.replace(\/\"\/g, '\"\"')}\";\"${v.timestamp}\"\\r\\n`;\r\n });\r\n\r\n const blob = new Blob([csvContent], { type: 'text\/csv;charset=utf-8;' });\r\n const url = URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.download = `resultats_vitrines_ccb01_${new Date().toISOString().slice(0,10)}.csv`;\r\n document.body.appendChild(a);\r\n a.click();\r\n document.body.removeChild(a);\r\n URL.revokeObjectURL(url);\r\n showToast(\"Export CSV t\u00e9l\u00e9charg\u00e9 (pr\u00eat pour Excel) !\");\r\n }\r\n\r\n \/***********************************************************************\r\n * 10. MODALS QR CODES & WORDPRESS ELEMENTOR\r\n ***********************************************************************\/\r\n function populateQrModalDropdown() {\r\n const sel = document.getElementById('qr-shop-selector');\r\n if (!sel) return;\r\n sel.innerHTML = '<option value=\"ALL\">\ud83c\udf10 QR Code G\u00e9n\u00e9ral (Tous les commerces - assistance.ccb01.fr)<\/option>';\r\n [...shops].sort((a, b) => a.name.localeCompare(b.name)).forEach(s => {\r\n const opt = document.createElement('option');\r\n opt.value = s.id;\r\n opt.textContent = `\ud83c\udfea QR Pr\u00e9-cibl\u00e9 : ${s.name} (${s.street})`;\r\n sel.appendChild(opt);\r\n });\r\n }\r\n\r\n function updateQrCodePreview() {\r\n const val = document.getElementById('qr-shop-selector').value;\r\n const img = document.getElementById('qr-image-preview');\r\n const urlText = document.getElementById('qr-url-preview');\r\n const caption = document.getElementById('qr-caption-title');\r\n\r\n let targetUrl = 'https:\/\/assistance.ccb01.fr\/concours-vitrines\/';\r\n if (val !== 'ALL') {\r\n targetUrl += `?commerce=${encodeURIComponent(val)}`;\r\n const shop = shops.find(s => s.id === val);\r\n caption.textContent = shop ? `Votez pour : ${shop.name}` : 'QR Code Vitrine';\r\n } else {\r\n caption.textContent = 'Scan Officiel \u2022 Concours des Vitrines CCB01';\r\n }\r\n\r\n urlText.textContent = targetUrl;\r\n img.src = `https:\/\/api.qrserver.com\/v1\/create-qr-code\/?size=220x220&data=${encodeURIComponent(targetUrl)}&color=11131A`;\r\n }\r\n\r\n function openQrModal() {\r\n populateQrModalDropdown();\r\n updateQrCodePreview();\r\n document.getElementById('modal-qr').classList.remove('hidden');\r\n }\r\n\r\n function closeQrModal() {\r\n document.getElementById('modal-qr').classList.add('hidden');\r\n }\r\n\r\n function copyQrLink() {\r\n const url = document.getElementById('qr-url-preview').textContent.trim();\r\n const temp = document.createElement('input');\r\n temp.value = url;\r\n document.body.appendChild(temp);\r\n temp.select();\r\n document.execCommand('copy');\r\n document.body.removeChild(temp);\r\n showToast(\"Lien QR Code copi\u00e9 dans le presse-papiers !\");\r\n }\r\n\r\n function openWordpressModal() {\r\n document.getElementById('modal-wp').classList.remove('hidden');\r\n }\r\n\r\n function closeWordpressModal() {\r\n document.getElementById('modal-wp').classList.add('hidden');\r\n }\r\n\r\n function saveWebhookUrl() {\r\n const val = document.getElementById('webhook-url-input').value.trim();\r\n try {\r\n localStorage.setItem('ccb01_webhook_url', val);\r\n } catch (e) {}\r\n showToast(val ? \"Webhook centralis\u00e9 connect\u00e9 !\" : \"Webhook d\u00e9sactiv\u00e9.\");\r\n }\r\n\r\n function sendVoteToWebhook(voter, shop) {\r\n try {\r\n const webhookUrl = localStorage.getItem('ccb01_webhook_url');\r\n if (webhookUrl && webhookUrl.startsWith('http')) {\r\n fetch(webhookUrl, {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/json' },\r\n body: JSON.stringify({\r\n ticket: voter.id,\r\n nom: voter.name,\r\n telephone: voter.phone,\r\n email: voter.email,\r\n commerce_id: shop.id,\r\n commerce_nom: shop.name,\r\n commerce_rue: shop.street,\r\n date: voter.timestamp\r\n })\r\n }).catch(() => {});\r\n }\r\n } catch (e) {}\r\n }\r\n\r\n \/***********************************************************************\r\n * 11. EFFETS SONORES SYNTH\u00c9TIQUES (WEB AUDIO API - SANS FICHIER EXTERNE)\r\n ***********************************************************************\/\r\n let audioCtx = null;\r\n\r\n function getAudioContext() {\r\n if (!audioCtx) {\r\n const AudioContextClass = window.AudioContext || window.webkitAudioContext;\r\n if (AudioContextClass) audioCtx = new AudioContextClass();\r\n }\r\n return audioCtx;\r\n }\r\n\r\n function toggleSound() {\r\n soundEnabled = !soundEnabled;\r\n const icon = document.getElementById('icon-sound');\r\n icon.className = soundEnabled\r\n ? 'fa-solid fa-volume-high text-ccb-gold text-xs'\r\n : 'fa-solid fa-volume-xmark text-slate-400 text-xs';\r\n showToast(soundEnabled ? \"Effets sonores activ\u00e9s\" : \"Effets sonores coup\u00e9s\");\r\n }\r\n\r\n function playBeep(freq = 440, duration = 0.08, type = 'sine') {\r\n if (!soundEnabled) return;\r\n try {\r\n const ctx = getAudioContext();\r\n if (!ctx) return;\r\n if (ctx.state === 'suspended') ctx.resume();\r\n\r\n const osc = ctx.createOscillator();\r\n const gain = ctx.createGain();\r\n osc.type = type;\r\n osc.frequency.setValueAtTime(freq, ctx.currentTime);\r\n\r\n gain.gain.setValueAtTime(0.08, ctx.currentTime);\r\n gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration);\r\n\r\n osc.connect(gain);\r\n gain.connect(ctx.destination);\r\n\r\n osc.start();\r\n osc.stop(ctx.currentTime + duration);\r\n } catch (e) {}\r\n }\r\n\r\n function playVictoryChime() {\r\n if (!soundEnabled) return;\r\n const notes = [523.25, 659.25, 783.99, 1046.50]; \/\/ Do Mi Sol Do\r\n notes.forEach((freq, idx) => {\r\n setTimeout(() => playBeep(freq, 0.18, 'triangle'), idx * 110);\r\n });\r\n }\r\n\r\n \/***********************************************************************\r\n * 12. COMPTE \u00c0 REBOURS & ANIMATIONS CANVAS (NEIGE DOR\u00c9E + CONFETTIS)\r\n ***********************************************************************\/\r\n function startCountdownTimer() {\r\n \/\/ Cible : 24 D\u00e9cembre \u00e0 19h00\r\n const now = new Date();\r\n const targetYear = now.getMonth() === 11 && now.getDate() > 24 ? now.getFullYear() + 1 : now.getFullYear();\r\n const targetDate = new Date(targetYear, 11, 24, 19, 0, 0).getTime();\r\n\r\n function updateTimer() {\r\n const current = Date.now();\r\n const diff = Math.max(0, targetDate - current);\r\n const d = Math.floor(diff \/ (1000 * 60 * 60 * 24));\r\n const h = Math.floor((diff \/ (1000 * 60 * 60)) % 24);\r\n const m = Math.floor((diff \/ 1000 \/ 60) % 60);\r\n const s = Math.floor((diff \/ 1000) % 60);\r\n\r\n const el = document.getElementById('countdown-display');\r\n if (el) {\r\n el.textContent = `${d}j ${String(h).padStart(2, '0')}h ${String(m).padStart(2, '0')}m ${String(s).padStart(2, '0')}s`;\r\n }\r\n }\r\n updateTimer();\r\n setInterval(updateTimer, 1000);\r\n }\r\n\r\n function initFestiveBackgroundCanvas() {\r\n const canvas = document.getElementById('festive-canvas');\r\n if (!canvas) return;\r\n const ctx = canvas.getContext('2d');\r\n let width, height;\r\n let particles = [];\r\n\r\n function resize() {\r\n width = canvas.width = window.innerWidth;\r\n height = canvas.height = window.innerHeight;\r\n }\r\n window.addEventListener('resize', resize);\r\n resize();\r\n\r\n const count = Math.min(55, Math.floor(window.innerWidth \/ 24));\r\n const colors = ['#FFD700', '#FFFFFF', '#F58220', '#E50051'];\r\n\r\n for (let i = 0; i < count; i++) {\r\n particles.push({\r\n x: Math.random() * width,\r\n y: Math.random() * height,\r\n r: Math.random() * 2.4 + 0.8,\r\n speedY: Math.random() * 0.55 + 0.2,\r\n speedX: (Math.random() - 0.5) * 0.35,\r\n color: colors[Math.floor(Math.random() * colors.length)],\r\n alpha: Math.random() * 0.65 + 0.15\r\n });\r\n }\r\n\r\n function animate() {\r\n ctx.clearRect(0, 0, width, height);\r\n for (let p of particles) {\r\n p.y += p.speedY;\r\n p.x += p.speedX;\r\n if (p.y > height) {\r\n p.y = -5;\r\n p.x = Math.random() * width;\r\n }\r\n if (p.x > width) p.x = 0;\r\n if (p.x < 0) p.x = width;\r\n\r\n ctx.save();\r\n ctx.globalAlpha = p.alpha;\r\n ctx.fillStyle = p.color;\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);\r\n ctx.fill();\r\n ctx.restore();\r\n }\r\n requestAnimationFrame(animate);\r\n }\r\n animate();\r\n }\r\n\r\n function launchConfettiBurst() {\r\n const canvas = document.getElementById('confetti-canvas');\r\n if (!canvas) return;\r\n const ctx = canvas.getContext('2d');\r\n canvas.width = window.innerWidth;\r\n canvas.height = window.innerHeight;\r\n\r\n const pieces = [];\r\n const colors = ['#E50051', '#F58220', '#FFD700', '#FFFFFF', '#FF2A74'];\r\n\r\n for (let i = 0; i < 110; i++) {\r\n pieces.push({\r\n x: canvas.width \/ 2,\r\n y: canvas.height \/ 2,\r\n vx: (Math.random() - 0.5) * 18,\r\n vy: (Math.random() - 0.85) * 18,\r\n size: Math.random() * 8 + 4,\r\n color: colors[Math.floor(Math.random() * colors.length)],\r\n rot: Math.random() * 360,\r\n vRot: (Math.random() - 0.5) * 12,\r\n gravity: 0.32,\r\n opacity: 1\r\n });\r\n }\r\n\r\n function frame() {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n let active = false;\r\n\r\n for (let p of pieces) {\r\n p.x += p.vx;\r\n p.y += p.vy;\r\n p.vy += p.gravity;\r\n p.rot += p.vRot;\r\n p.opacity -= 0.008;\r\n\r\n if (p.opacity > 0 && p.y < canvas.height + 30) {\r\n active = true;\r\n ctx.save();\r\n ctx.globalAlpha = Math.max(0, p.opacity);\r\n ctx.translate(p.x, p.y);\r\n ctx.rotate((p.rot * Math.PI) \/ 180);\r\n ctx.fillStyle = p.color;\r\n ctx.fillRect(-p.size \/ 2, -p.size \/ 2, p.size, p.size * 0.6);\r\n ctx.restore();\r\n }\r\n }\r\n\r\n if (active) {\r\n requestAnimationFrame(frame);\r\n } else {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n }\r\n }\r\n frame();\r\n }\r\n\r\n \/***********************************************************************\r\n * 13. UTILITAIRES DIVERS\r\n ***********************************************************************\/\r\n function showToast(msg) {\r\n const toast = document.getElementById('toast-notification');\r\n const text = document.getElementById('toast-text');\r\n text.textContent = msg;\r\n toast.classList.remove('hidden');\r\n clearTimeout(window._toastTimer);\r\n window._toastTimer = setTimeout(() => {\r\n toast.classList.add('hidden');\r\n }, 3400);\r\n }\r\n\r\n function escapeHtml(str) {\r\n return String(str)\r\n .replace(\/&\/g, '&')\r\n .replace(\/<\/g, '<')\r\n .replace(\/>\/g, '>')\r\n .replace(\/\"\/g, '"')\r\n .replace(\/'\/g, ''');\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Concours des Plus Belles Vitrines de No\u00ebl | Centre Commerces Bourg (CCB01) D\u00e9mo Bureau CCB01 assistance.ccb01.fr \u2022 Animation Vitrines de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-181","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/assistance.ccb01.fr\/index.php?rest_route=\/wp\/v2\/pages\/181","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/assistance.ccb01.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/assistance.ccb01.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/assistance.ccb01.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/assistance.ccb01.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=181"}],"version-history":[{"count":18,"href":"https:\/\/assistance.ccb01.fr\/index.php?rest_route=\/wp\/v2\/pages\/181\/revisions"}],"predecessor-version":[{"id":210,"href":"https:\/\/assistance.ccb01.fr\/index.php?rest_route=\/wp\/v2\/pages\/181\/revisions\/210"}],"wp:attachment":[{"href":"https:\/\/assistance.ccb01.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Concours des Plus Belles Vitrines de No\u00ebl | Centre Commerces Bourg (CCB01)<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,700;0,800;1,600&display=swap\" rel=\"stylesheet\">\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n\r\n <script>\r\n tailwind.config = {\r\n darkMode: 'class',\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Montserrat', 'sans-serif'],\r\n serif: ['Playfair Display', 'serif'],\r\n },\r\n colors: {\r\n ccb: {\r\n pink: '#E50051',\r\n pinkLight: '#FF2A74',\r\n pinkDark: '#B3003E',\r\n orange: '#F58220',\r\n orangeLight: '#FF9E44',\r\n dark: '#0B0D13',\r\n card: '#141824',\r\n gold: '#FFD700',\r\n goldWarm: '#D4AF37',\r\n }\r\n },\r\n animation: {\r\n 'pulse-slow': 'pulse 3.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',\r\n 'float': 'float 4s ease-in-out infinite',\r\n 'shimmer': 'shimmer 2.5s linear infinite',\r\n },\r\n keyframes: {\r\n float: {\r\n '0%, 100%': { transform: 'translateY(0px)' },\r\n '50%': { transform: 'translateY(-7px)' },\r\n },\r\n shimmer: {\r\n '0%': { backgroundPosition: '-200% 0' },\r\n '100%': { backgroundPosition: '200% 0' },\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n :root {\r\n --ccb-pink: #E50051;\r\n --ccb-orange: #F58220;\r\n --ccb-gold: #FFD700;\r\n }\r\n\r\n \/* ==========================================================================\r\n BLINDAGE ANTI-CONFLITS WORDPRESS \/ ELEMENTOR (FOND NOIR & PLEINE LARGEUR)\r\n ========================================================================== *\/\r\n html,\r\n body,\r\n #page,\r\n #content,\r\n .site,\r\n .site-content,\r\n .ast-container,\r\n .entry-content,\r\n .page-content,\r\n .elementor,\r\n .elementor-inner,\r\n .elementor-section-wrap,\r\n .elementor-section,\r\n .elementor-container,\r\n .elementor-column-wrap,\r\n .elementor-widget-wrap,\r\n .elementor-widget-html,\r\n .e-con,\r\n .e-con-inner {\r\n background-color: #090B10 !important;\r\n color: #F8FAFC !important;\r\n }\r\n\r\n body {\r\n background-color: #090B10 !important;\r\n color: #F8FAFC !important;\r\n overflow-x: hidden !important;\r\n font-family: 'Montserrat', sans-serif !important;\r\n margin: 0 !important;\r\n }\r\n\r\n \/* Permet au bloc de sortir des colonnes \u00e9troites de WordPress pour occuper tout l'\u00e9cran *\/\r\n #ccb-app-root {\r\n width: 100vw !important;\r\n max-width: 100vw !important;\r\n margin-left: calc(50% - 50vw) !important;\r\n margin-right: calc(50% - 50vw) !important;\r\n background-color: #090B10 !important;\r\n color: #F8FAFC !important;\r\n font-family: 'Montserrat', sans-serif !important;\r\n position: relative !important;\r\n min-height: 100vh !important;\r\n overflow-x: hidden !important;\r\n box-sizing: border-box !important;\r\n }\r\n\r\n #ccb-app-root *,\r\n #ccb-app-root *::before,\r\n #ccb-app-root *::after {\r\n box-sizing: border-box !important;\r\n }\r\n\r\n \/* Protection des titres contre le CSS noir de WordPress *\/\r\n #ccb-app-root h1,\r\n #ccb-app-root h2,\r\n #ccb-app-root h3,\r\n #ccb-app-root h4 {\r\n color: #FFFFFF !important;\r\n font-family: 'Montserrat', sans-serif !important;\r\n margin-top: 0 !important;\r\n }\r\n\r\n \/* Classe activable pour masquer l'ancien titre\/ent\u00eate WordPress au-dessus du bloc *\/\r\n body.ccb-clean-wp-page .entry-header,\r\n body.ccb-clean-wp-page .page-header,\r\n body.ccb-clean-wp-page h1.entry-title,\r\n body.ccb-clean-wp-page header.site-header,\r\n body.ccb-clean-wp-page #masthead,\r\n body.ccb-clean-wp-page footer.site-footer,\r\n body.ccb-clean-wp-page #colophon {\r\n display: none !important;\r\n }\r\n\r\n \/* ==========================================================================\r\n CORRECTION BLIND\u00c9E DES CHAMPS INPUT & SELECT CONTRE WORDPRESS\r\n ========================================================================== *\/\r\n #ccb-app-root input.ccb-input {\r\n background-color: #121624 !important;\r\n color: #FFFFFF !important;\r\n border: 1.5px solid rgba(255, 255, 255, 0.2) !important;\r\n border-radius: 14px !important;\r\n height: 54px !important;\r\n min-height: 54px !important;\r\n line-height: 54px !important;\r\n padding: 0 18px 0 54px !important; \/* 54px \u00e0 gauche pour que l'ic\u00f4ne ne touche jamais le texte *\/\r\n font-size: 15px !important;\r\n font-weight: 500 !important;\r\n font-family: 'Montserrat', sans-serif !important;\r\n width: 100% !important;\r\n box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5) !important;\r\n outline: none !important;\r\n margin: 0 !important;\r\n }\r\n\r\n #ccb-app-root input.ccb-input:focus {\r\n border-color: #E50051 !important;\r\n box-shadow: 0 0 0 3px rgba(229, 0, 81, 0.28), inset 0 2px 6px rgba(0, 0, 0, 0.5) !important;\r\n }\r\n\r\n #ccb-app-root input.ccb-input::placeholder {\r\n color: #94A3B8 !important;\r\n opacity: 1 !important;\r\n }\r\n\r\n \/* Barre de recherche des boutiques *\/\r\n #ccb-app-root input.ccb-search-input {\r\n background-color: #121624 !important;\r\n color: #FFFFFF !important;\r\n border: 1.5px solid rgba(255, 255, 255, 0.2) !important;\r\n border-radius: 12px !important;\r\n height: 42px !important;\r\n min-height: 42px !important;\r\n line-height: 42px !important;\r\n padding: 0 14px 0 42px !important; \/* 42px \u00e0 gauche pour d\u00e9gager la loupe *\/\r\n font-size: 13px !important;\r\n font-weight: 500 !important;\r\n font-family: 'Montserrat', sans-serif !important;\r\n width: 100% !important;\r\n box-shadow: none !important;\r\n outline: none !important;\r\n margin: 0 !important;\r\n }\r\n\r\n #ccb-app-root input.ccb-search-input:focus {\r\n border-color: #F58220 !important;\r\n }\r\n\r\n #ccb-app-root input.ccb-search-input::placeholder {\r\n color: #94A3B8 !important;\r\n opacity: 1 !important;\r\n }\r\n\r\n \/* Liste d\u00e9roulante (<select>) des commerces 100% lisible et centr\u00e9e *\/\r\n #ccb-app-root select.ccb-select {\r\n background-color: #121624 !important;\r\n color: #FFFFFF !important;\r\n border: 2px solid rgba(245, 130, 32, 0.65) !important;\r\n border-radius: 16px !important;\r\n height: 58px !important;\r\n min-height: 58px !important;\r\n line-height: 54px !important;\r\n padding: 0 48px 0 52px !important;\r\n font-size: 15px !important;\r\n font-weight: 700 !important;\r\n font-family: 'Montserrat', sans-serif !important;\r\n width: 100% !important;\r\n appearance: none !important;\r\n -webkit-appearance: none !important;\r\n -moz-appearance: none !important;\r\n background-image: none !important;\r\n cursor: pointer !important;\r\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;\r\n margin: 0 !important;\r\n }\r\n\r\n #ccb-app-root select.ccb-select:focus {\r\n border-color: #E50051 !important;\r\n box-shadow: 0 0 0 3px rgba(229, 0, 81, 0.3) !important;\r\n outline: none !important;\r\n }\r\n\r\n #ccb-app-root select.ccb-select option {\r\n background-color: #121624 !important;\r\n color: #FFFFFF !important;\r\n padding: 10px !important;\r\n font-size: 15px !important;\r\n }\r\n\r\n \/* Background Canvas for Snow & Golden Sparks *\/\r\n #festive-canvas {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\r\n z-index: 1;\r\n }\r\n\r\n \/* Confetti Canvas *\/\r\n #confetti-canvas {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\r\n z-index: 100;\r\n }\r\n\r\n \/* Shimmering Gold Text *\/\r\n .gold-gradient-text {\r\n background: linear-gradient(90deg, #FFF3B0 0%, #FFD700 25%, #F58220 50%, #FFD700 75%, #FFF3B0 100%);\r\n background-size: 200% auto;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n animation: shimmer 4s linear infinite;\r\n }\r\n\r\n \/* Glassmorphism Cards *\/\r\n .glass-panel {\r\n background: rgba(20, 24, 36, 0.82);\r\n backdrop-filter: blur(16px);\r\n -webkit-backdrop-filter: blur(16px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n .glass-panel-gold {\r\n background: linear-gradient(145deg, rgba(28, 24, 18, 0.92), rgba(18, 20, 30, 0.92));\r\n backdrop-filter: blur(16px);\r\n border: 1px solid rgba(255, 215, 0, 0.35);\r\n box-shadow: 0 15px 40px rgba(245, 130, 32, 0.15);\r\n }\r\n\r\n .shop-card-selected {\r\n border-color: #E50051 !important;\r\n background: linear-gradient(135deg, rgba(229, 0, 81, 0.22) 0%, rgba(245, 130, 32, 0.12) 100%) !important;\r\n box-shadow: 0 0 25px rgba(229, 0, 81, 0.45), inset 0 0 12px rgba(229, 0, 81, 0.25) !important;\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* 3D Golden Ticket Styling *\/\r\n .golden-ticket {\r\n background: linear-gradient(135deg, #FFF6D6 0%, #FFD700 35%, #F58220 75%, #D4AF37 100%);\r\n color: #11131A;\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 25px 60px rgba(245, 130, 32, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.4) inset;\r\n }\r\n\r\n .golden-ticket::before,\r\n .golden-ticket::after {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n width: 32px;\r\n height: 32px;\r\n background-color: #090B10;\r\n border-radius: 50%;\r\n transform: translateY(-50%);\r\n z-index: 10;\r\n }\r\n .golden-ticket::before { left: -18px; }\r\n .golden-ticket::after { right: -18px; }\r\n\r\n \/* Custom Scrollbar *\/\r\n ::-webkit-scrollbar {\r\n width: 8px;\r\n height: 8px;\r\n }\r\n ::-webkit-scrollbar-track {\r\n background: #0B0D13;\r\n }\r\n ::-webkit-scrollbar-thumb {\r\n background: linear-gradient(180deg, #E50051, #F58220);\r\n border-radius: 9999px;\r\n }\r\n\r\n \/* Slot Machine Drum Effect *\/\r\n .slot-window {\r\n background: radial-gradient(circle at center, #1F2437 0%, #0B0D13 100%);\r\n border: 2px solid #FFD700;\r\n box-shadow: inset 0 0 25px rgba(0,0,0,0.9), 0 0 25px rgba(255, 215, 0, 0.25);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"min-h-screen flex flex-col justify-between relative selection:bg-ccb-pink selection:text-white\">\r\n<div id=\"ccb-app-root\" class=\"min-h-screen flex flex-col justify-between relative\">\r\n\r\n \r\n <canvas id=\"festive-canvas\"><\/canvas>\r\n \r\n <canvas id=\"confetti-canvas\"><\/canvas>\r\n\r\n \r\n \r\n \r\n <div class=\"sticky top-0 z-50 bg-ccb-dark\/95 backdrop-blur-md border-b border-white\/15 px-3 py-2.5 shadow-2xl\">\r\n <div class=\"max-w-7xl mx-auto flex flex-wrap items-center justify-between gap-2\">\r\n \r\n <div class=\"flex items-center gap-2.5\">\r\n <span class=\"inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold uppercase tracking-wider bg-gradient-to-r from-ccb-pink to-ccb-orange text-white shadow-md\">\r\n <i class=\"fa-solid fa-wand-magic-sparkles\"><\/i> D\u00e9mo Bureau CCB01\r\n <\/span>\r\n <span class=\"text-xs text-slate-300 hidden md:inline\">\r\n <code class=\"text-ccb-gold font-mono\">assistance.ccb01.fr<\/code> \u2022 Animation Vitrines de No\u00ebl\r\n <\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex items-center gap-1.5 bg-slate-900\/90 p-1 rounded-xl border border-white\/10\">\r\n <button type=\"button\" id=\"btn-mode-client\" onclick=\"switchViewMode('client')\"\r\n class=\"px-3.5 py-1.5 rounded-lg text-xs sm:text-sm font-bold transition-all flex items-center gap-2 bg-gradient-to-r from-ccb-pink to-ccb-orange text-white shadow-lg\">\r\n <i class=\"fa-solid fa-mobile-screen-button\"><\/i>\r\n <span>Vue Client (QR Code)<\/span>\r\n <\/button>\r\n <button type=\"button\" id=\"btn-mode-admin\" onclick=\"switchViewMode('admin')\"\r\n class=\"px-3.5 py-1.5 rounded-lg text-xs sm:text-sm font-bold transition-all flex items-center gap-2 text-slate-300 hover:text-white hover:bg-white\/5\">\r\n <i class=\"fa-solid fa-trophy text-ccb-gold\"><\/i>\r\n <span>Cockpit Bureau & Tirage Live<\/span>\r\n <span id=\"nav-badge-votes\" class=\"ml-1 px-1.5 py-0.5 text-[10px] rounded-full bg-ccb-gold text-black font-extrabold\">0<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex items-center gap-2\">\r\n <button type=\"button\" id=\"btn-toggle-wp-header\" onclick=\"toggleCleanWpPage()\" title=\"Masquer ou afficher l'ent\u00eate WordPress d'origine\"\r\n class=\"px-2.5 py-1.5 rounded-lg text-xs font-semibold bg-emerald-500\/20 hover:bg-emerald-500\/30 text-emerald-300 border border-emerald-400\/30 transition flex items-center gap-1.5\">\r\n <i class=\"fa-solid fa-expand\"><\/i>\r\n <span class=\"hidden sm:inline\" id=\"label-wp-fullscreen\">Mode Plein \u00c9cran : Actif<\/span>\r\n <\/button>\r\n <button type=\"button\" onclick=\"simulateQrPreselection()\" title=\"Simuler un client qui scanne le QR Code devant une vitrine pr\u00e9cise\"\r\n class=\"px-2.5 py-1.5 rounded-lg text-xs font-semibold bg-white\/10 hover:bg-white\/20 text-amber-300 border border-amber-400\/30 transition flex items-center gap-1.5\">\r\n <i class=\"fa-solid fa-qrcode\"><\/i>\r\n <span class=\"hidden sm:inline\">Test QR Vitrine<\/span>\r\n <\/button>\r\n <button type=\"button\" id=\"btn-sound-toggle\" onclick=\"toggleSound()\" title=\"Activer\/Couper les bruitages du tirage au sort\"\r\n class=\"w-8 h-8 rounded-lg bg-white\/10 hover:bg-white\/20 text-slate-200 flex items-center justify-center transition\">\r\n <i id=\"icon-sound\" class=\"fa-solid fa-volume-high text-ccb-gold text-xs\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n \r\n \r\n <main class=\"relative z-10 flex-grow py-6 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto w-full\">\r\n\r\n \r\n \r\n \r\n <section id=\"view-client\" class=\"max-w-2xl mx-auto space-y-6 transition-all duration-300\">\r\n\r\n \r\n <div class=\"glass-panel rounded-3xl p-6 sm:p-8 text-center relative overflow-hidden border-t-2 border-ccb-pink\/60\">\r\n \r\n <div class=\"absolute -top-24 left-1\/2 -translate-x-1\/2 w-72 h-72 bg-gradient-to-br from-ccb-pink\/30 via-ccb-orange\/25 to-transparent rounded-full blur-3xl pointer-events-none\"><\/div>\r\n\r\n \r\n <div class=\"flex justify-center items-center gap-2 text-ccb-gold text-xs tracking-widest uppercase font-bold mb-4\">\r\n <i class=\"fa-solid fa-star animate-pulse\"><\/i>\r\n <span>F\u00eates de Fin d'Ann\u00e9e \u2022 Bourg-en-Bresse<\/span>\r\n <i class=\"fa-solid fa-star animate-pulse\"><\/i>\r\n <\/div>\r\n\r\n \r\n <div class=\"relative mx-auto w-44 h-44 sm:w-48 sm:h-48 mb-5 animate-float flex items-center justify-center\">\r\n \r\n <img decoding=\"async\" id=\"ccb-detected-wp-logo\" src=\"\" alt=\"Centre Commerces Bourg\"\r\n class=\"hidden w-full h-full object-contain drop-shadow-[0_12px_28px_rgba(229,0,81,0.45)]\" \/>\r\n\r\n \r\n <svg id=\"ccb-fallback-svg-logo\" viewBox=\"0 0 340 340\" class=\"w-full h-full drop-shadow-[0_12px_28px_rgba(229,0,81,0.45)] overflow-visible\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <defs>\r\n \r\n <path id=\"ccbArcTop\" d=\"M 56,170 A 114,114 0 0,1 284,170\" \/>\r\n \r\n <path id=\"ccbArcBottom\" d=\"M 42,176 A 128,128 0 0,0 298,176\" \/>\r\n \r\n <filter id=\"ccbPillShadow\" x=\"-15%\" y=\"-15%\" width=\"130%\" height=\"135%\">\r\n <feDropShadow dx=\"0\" dy=\"4\" stdDeviation=\"4\" flood-color=\"#000000\" flood-opacity=\"0.4\"\/>\r\n <\/filter>\r\n <\/defs>\r\n\r\n \r\n <circle cx=\"170\" cy=\"170\" r=\"144\" fill=\"#050505\" stroke=\"#FFFFFF\" stroke-width=\"3\"\/>\r\n\r\n \r\n <circle cx=\"170\" cy=\"170\" r=\"96\" fill=\"#F58220\"\/>\r\n <circle cx=\"170\" cy=\"170\" r=\"88\" fill=\"#FFFFFF\" stroke=\"#F58220\" stroke-width=\"3\"\/>\r\n <circle cx=\"170\" cy=\"170\" r=\"83\" fill=\"#FFFFFF\" stroke=\"#F58220\" stroke-width=\"2\"\/>\r\n\r\n \r\n <text fill=\"#FFFFFF\" style=\"font-family: 'Montserrat', sans-serif !important; font-weight: 800 !important; font-size: 30px !important; letter-spacing: 7px !important; text-transform: uppercase !important;\">\r\n <textPath href=\"#ccbArcTop\" startOffset=\"50%\" text-anchor=\"middle\">UNION<\/textPath>\r\n <\/text>\r\n\r\n \r\n <text fill=\"#FFFFFF\" style=\"font-family: 'Montserrat', sans-serif !important; font-weight: 800 !important; font-size: 24px !important; letter-spacing: 2.5px !important; text-transform: uppercase !important;\">\r\n <textPath href=\"#ccbArcBottom\" startOffset=\"50%\" text-anchor=\"middle\">COMMERCIALE<\/textPath>\r\n <\/text>\r\n\r\n \r\n <g transform=\"rotate(14 170 170)\">\r\n \r\n <text x=\"170\" y=\"125\" text-anchor=\"middle\" style=\"font-family: 'Montserrat', sans-serif !important; font-weight: 900 !important; font-size: 32px !important;\">\r\n <tspan fill=\"#000000\">C<\/tspan><tspan fill=\"#E50051\">entre<\/tspan>\r\n <\/text>\r\n\r\n \r\n <rect x=\"8\" y=\"137\" width=\"324\" height=\"54\" rx=\"27\" ry=\"27\" fill=\"#FFFFFF\" stroke=\"#000000\" stroke-width=\"2\" filter=\"url(#ccbPillShadow)\"\/>\r\n\r\n \r\n <text x=\"170\" y=\"174\" text-anchor=\"middle\" style=\"font-family: 'Montserrat', sans-serif !important; font-weight: 900 !important; font-size: 29px !important; letter-spacing: -0.5px !important;\">\r\n <tspan fill=\"#000000\">C<\/tspan><tspan fill=\"#E50051\">ommerces <\/tspan><tspan fill=\"#000000\">B<\/tspan><tspan fill=\"#E50051\">ourg<\/tspan>\r\n <\/text>\r\n\r\n \r\n <g transform=\"translate(144, 197) rotate(-8)\">\r\n <path d=\"M16,8 C16,-2 27,-2 27,8\" fill=\"none\" stroke=\"#E50051\" stroke-width=\"2.5\"\/>\r\n <path d=\"M22,7 C22,-3 33,-3 33,7\" fill=\"none\" stroke=\"#E50051\" stroke-width=\"2.5\"\/>\r\n <polygon points=\"11,8 2,30 8,34 14,10\" fill=\"#E50051\"\/>\r\n <polygon points=\"14,10 5,35 11,39 17,12\" fill=\"#B3003E\"\/>\r\n <path d=\"M15,9 L45,11 L41,41 L10,39 Z\" fill=\"#FFFFFF\" stroke=\"#E50051\" stroke-width=\"2.8\" stroke-linejoin=\"round\"\/>\r\n <\/g>\r\n <\/g>\r\n <\/svg>\r\n <\/div>\r\n\r\n \r\n <h1 class=\"text-2xl sm:text-3xl font-black tracking-tight leading-tight mb-2\" style=\"color: #FFFFFF !important;\">\r\n \u00c9lisez la\r\n <span class=\"gold-gradient-text font-serif italic text-3xl sm:text-4xl block mt-1\">Plus Belle Vitrine de No\u00ebl<\/span>\r\n <\/h1>\r\n <p class=\"text-xs sm:text-sm text-slate-300 max-w-md mx-auto leading-relaxed\">\r\n Soutenez votre commer\u00e7ant coup de c\u0153ur du centre-ville de <strong class=\"text-white\">Bourg-en-Bresse<\/strong> et participez au grand tirage au sort de No\u00ebl !\r\n <\/p>\r\n\r\n \r\n <div class=\"mt-5 p-3.5 rounded-2xl bg-gradient-to-r from-ccb-pink\/25 via-ccb-orange\/25 to-ccb-pink\/25 border border-ccb-gold\/40 flex items-center justify-center gap-3 shadow-lg\">\r\n <div class=\"w-11 h-11 rounded-xl bg-gradient-to-br from-ccb-gold to-ccb-orange text-black flex items-center justify-center text-xl font-black shrink-0 shadow\">\r\n <i class=\"fa-solid fa-gift\"><\/i>\r\n <\/div>\r\n <div class=\"text-left\">\r\n <div class=\"text-[11px] uppercase tracking-wider font-bold text-ccb-gold\">Tirage au sort parmi les votants<\/div>\r\n <div class=\"text-sm sm:text-base font-extrabold text-white\">\r\n <span class=\"text-ccb-gold\">3 Ch\u00e8ques Cadeaux de 75 \u20ac<\/span> \u00e0 gagner !\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"mt-4 pt-3 border-t border-white\/10 flex items-center justify-between text-xs text-slate-300\">\r\n <span class=\"flex items-center gap-1.5 font-medium\">\r\n <i class=\"fa-regular fa-clock text-ccb-orange\"><\/i> Fin des votes dans :\r\n <\/span>\r\n <div id=\"countdown-display\" class=\"font-mono font-bold text-ccb-gold bg-black\/50 px-3 py-1.5 rounded-lg border border-white\/15\">\r\n 18j 08h 45m 12s\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"qr-preselect-banner\" class=\"hidden glass-panel-gold rounded-2xl p-4 border-l-4 border-l-ccb-gold flex items-center justify-between gap-3\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"w-10 h-10 rounded-full bg-ccb-gold\/20 text-ccb-gold flex items-center justify-center text-lg shrink-0\">\r\n <i class=\"fa-solid fa-qrcode\"><\/i>\r\n <\/div>\r\n <div>\r\n <div class=\"text-xs font-bold uppercase tracking-wider text-ccb-gold\">QR Code Vitrine d\u00e9tect\u00e9 !<\/div>\r\n <div id=\"qr-preselect-text\" class=\"text-xs sm:text-sm text-white font-semibold\">Vitrine pr\u00e9-s\u00e9lectionn\u00e9e automatiquement.<\/div>\r\n <\/div>\r\n <\/div>\r\n <button type=\"button\" onclick=\"clearShopSelection()\" class=\"text-xs text-slate-300 hover:text-white underline shrink-0\">Changer<\/button>\r\n <\/div>\r\n\r\n \r\n \r\n \r\n <form id=\"vote-form\" onsubmit=\"handleVoteSubmit(event)\" class=\"space-y-6\" novalidate>\r\n\r\n \r\n <div class=\"glass-panel rounded-3xl p-5 sm:p-7 space-y-5\">\r\n <div class=\"flex items-center justify-between gap-2\">\r\n <div class=\"flex items-center gap-3\">\r\n <span class=\"w-8 h-8 rounded-full bg-ccb-pink text-white text-xs font-black flex items-center justify-center shadow shrink-0\">1<\/span>\r\n <h2 class=\"text-base sm:text-xl font-extrabold text-white\" style=\"color: #FFFFFF !important;\">Choisissez votre vitrine favorite<\/h2>\r\n <\/div>\r\n <span id=\"shops-count-badge\" class=\"text-xs font-bold text-ccb-orange bg-ccb-orange\/15 px-3 py-1 rounded-full border border-ccb-orange\/30 shrink-0\">\r\n 12 vitrines en lice\r\n <\/span>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <label for=\"shop-select-dropdown\" class=\"block text-xs font-bold uppercase tracking-wider text-slate-200 mb-2\">\r\n <i class=\"fa-solid fa-store text-ccb-pink mr-1.5\"><\/i> S\u00e9lection rapide dans la liste d\u00e9roulante :\r\n <\/label>\r\n <div class=\"relative flex items-center\">\r\n \r\n <div class=\"pointer-events-none absolute left-4 top-1\/2 -translate-y-1\/2 text-ccb-orange text-lg z-10\">\r\n <i class=\"fa-solid fa-shop\"><\/i>\r\n <\/div>\r\n\r\n <select id=\"shop-select-dropdown\" onchange=\"selectShopFromDropdown(this.value)\" required class=\"ccb-select\">\r\n <option value=\"\">-- Choisissez un commerce dans la liste --<\/option>\r\n <\/select>\r\n\r\n \r\n <div class=\"pointer-events-none absolute right-4 top-1\/2 -translate-y-1\/2 text-ccb-gold text-base z-10\">\r\n <i class=\"fa-solid fa-chevron-down\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"pt-1 space-y-3\">\r\n <div class=\"flex flex-col sm:flex-row gap-3 justify-between items-stretch sm:items-center\">\r\n <span class=\"text-xs sm:text-sm text-slate-300 font-semibold\">\r\n \u2728 Ou cliquez directement sur la vitrine ci-dessous :\r\n <\/span>\r\n \r\n <div class=\"relative w-full sm:w-64 shrink-0\">\r\n <i class=\"fa-solid fa-magnifying-glass absolute left-3.5 top-1\/2 -translate-y-1\/2 text-ccb-orange text-xs pointer-events-none z-10\"><\/i>\r\n <input type=\"text\" id=\"shop-search-input\" oninput=\"filterShopsClient()\" placeholder=\"Rechercher un nom, une rue...\"\r\n class=\"ccb-search-input\">\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"street-filters\" class=\"flex items-center gap-1.5 overflow-x-auto pb-2 no-scrollbar text-xs\">\r\n <button type=\"button\" onclick=\"setStreetFilter('ALL')\" data-street=\"ALL\"\r\n class=\"street-pill shrink-0 px-3.5 py-1.5 rounded-full font-bold bg-ccb-pink text-white transition\">\r\n Tous les quartiers\r\n <\/button>\r\n <button type=\"button\" onclick=\"setStreetFilter('Rue Notre-Dame')\" data-street=\"Rue Notre-Dame\"\r\n class=\"street-pill shrink-0 px-3.5 py-1.5 rounded-full font-medium bg-white\/5 hover:bg-white\/15 text-slate-300 transition\">\r\n Rue Notre-Dame\r\n <\/button>\r\n <button type=\"button\" onclick=\"setStreetFilter('Rue Victor Basch')\" data-street=\"Rue Victor Basch\"\r\n class=\"street-pill shrink-0 px-3.5 py-1.5 rounded-full font-medium bg-white\/5 hover:bg-white\/15 text-slate-300 transition\">\r\n Rue Victor Basch\r\n <\/button>\r\n <button type=\"button\" onclick=\"setStreetFilter('Rue Gambetta')\" data-street=\"Rue Gambetta\"\r\n class=\"street-pill shrink-0 px-3.5 py-1.5 rounded-full font-medium bg-white\/5 hover:bg-white\/15 text-slate-300 transition\">\r\n Rue Gambetta\r\n <\/button>\r\n <button type=\"button\" onclick=\"setStreetFilter('Carr\u00e9 Amiot')\" data-street=\"Carr\u00e9 Amiot\"\r\n class=\"street-pill shrink-0 px-3.5 py-1.5 rounded-full font-medium bg-white\/5 hover:bg-white\/15 text-slate-300 transition\">\r\n Carr\u00e9 Amiot\r\n <\/button>\r\n <button type=\"button\" onclick=\"setStreetFilter('Place Carriat')\" data-street=\"Place Carriat\"\r\n class=\"street-pill shrink-0 px-3.5 py-1.5 rounded-full font-medium bg-white\/5 hover:bg-white\/15 text-slate-300 transition\">\r\n Place Carriat & Bichat\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div id=\"client-shops-grid\" class=\"grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-80 overflow-y-auto pr-1 pt-1\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"selected-shop-pill\" class=\"hidden p-3.5 rounded-2xl bg-gradient-to-r from-ccb-pink\/25 to-ccb-orange\/25 border border-ccb-pink\/60 flex items-center justify-between\">\r\n <div class=\"flex items-center gap-3\">\r\n <span class=\"w-9 h-9 rounded-xl bg-ccb-pink text-white flex items-center justify-center text-sm shrink-0\">\r\n <i class=\"fa-solid fa-heart\"><\/i>\r\n <\/span>\r\n <div>\r\n <div class=\"text-[10px] uppercase tracking-wider text-pink-200 font-bold\">Votre vote porte sur :<\/div>\r\n <div id=\"selected-shop-name-display\" class=\"text-sm font-extrabold text-white\">-<\/div>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-xs font-bold text-ccb-gold shrink-0\"><i class=\"fa-solid fa-circle-check mr-1\"><\/i>Choisi<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-panel rounded-3xl p-5 sm:p-7 space-y-5\">\r\n <div class=\"flex items-center gap-3\">\r\n <span class=\"w-8 h-8 rounded-full bg-ccb-orange text-black text-xs font-black flex items-center justify-center shadow shrink-0\">2<\/span>\r\n <div>\r\n <h2 class=\"text-base sm:text-xl font-extrabold text-white\" style=\"color: #FFFFFF !important;\">Vos coordonn\u00e9es pour le tirage au sort<\/h2>\r\n <p class=\"text-xs text-slate-300 mt-0.5\">Pour vous contacter si vous gagnez l'un des <strong class=\"text-ccb-gold\">3 ch\u00e8ques cadeaux de 75 \u20ac<\/strong><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"space-y-4\">\r\n \r\n <div>\r\n <label for=\"voter-name\" class=\"block text-xs font-bold uppercase tracking-wider text-slate-200 mb-1.5\">\r\n Nom et Pr\u00e9nom <span class=\"text-ccb-pink\">*<\/span>\r\n <\/label>\r\n <div class=\"relative flex items-center\">\r\n <div class=\"pointer-events-none absolute left-4 top-1\/2 -translate-y-1\/2 w-6 text-center text-ccb-orange text-base z-10\">\r\n <i class=\"fa-regular fa-user\"><\/i>\r\n <\/div>\r\n <input type=\"text\" id=\"voter-name\" required placeholder=\"Ex : Marie Revermont\" class=\"ccb-input\">\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <label for=\"voter-phone\" class=\"block text-xs font-bold uppercase tracking-wider text-slate-200 mb-1.5\">\r\n T\u00e9l\u00e9phone portable <span class=\"text-ccb-pink\">*<\/span>\r\n <\/label>\r\n <div class=\"relative flex items-center\">\r\n <div class=\"pointer-events-none absolute left-4 top-1\/2 -translate-y-1\/2 w-6 text-center text-ccb-orange text-base z-10\">\r\n <i class=\"fa-solid fa-mobile-screen\"><\/i>\r\n <\/div>\r\n <input type=\"tel\" id=\"voter-phone\" required placeholder=\"Ex : 06 12 34 56 78\" class=\"ccb-input\">\r\n <\/div>\r\n <p class=\"text-[11px] text-slate-400 mt-1.5\">1 seule participation par num\u00e9ro de t\u00e9l\u00e9phone pour garantir l'\u00e9quit\u00e9 du vote.<\/p>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <label for=\"voter-email\" class=\"block text-xs font-bold uppercase tracking-wider text-slate-200 mb-1.5\">\r\n Adresse e-mail <span class=\"text-ccb-pink\">*<\/span>\r\n <\/label>\r\n <div class=\"relative flex items-center\">\r\n <div class=\"pointer-events-none absolute left-4 top-1\/2 -translate-y-1\/2 w-6 text-center text-ccb-orange text-base z-10\">\r\n <i class=\"fa-regular fa-envelope\"><\/i>\r\n <\/div>\r\n <input type=\"email\" id=\"voter-email\" required placeholder=\"Ex : marie.revermont@email.fr\" class=\"ccb-input\">\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <label class=\"flex items-start gap-3 p-3.5 rounded-2xl bg-slate-900\/90 border border-white\/15 cursor-pointer hover:border-white\/30 transition\">\r\n <input type=\"checkbox\" id=\"voter-rgpd\" required class=\"mt-1 w-4 h-4 accent-ccb-pink rounded cursor-pointer shrink-0\">\r\n <span class=\"text-xs text-slate-300 leading-relaxed\">\r\n J'accepte le r\u00e8glement du jeu concours organis\u00e9 par <strong class=\"text-white\">Centre Commerces Bourg<\/strong> et j'autorise l'union commerciale \u00e0 me contacter en cas de gain d'un ch\u00e8que cadeau de 75 \u20ac.\r\n <\/span>\r\n <\/label>\r\n <\/div>\r\n\r\n \r\n <div id=\"vote-error-box\" class=\"hidden p-3.5 rounded-2xl bg-red-500\/20 border border-red-500\/50 text-red-200 text-xs font-semibold flex items-center gap-2.5\">\r\n <i class=\"fa-solid fa-triangle-exclamation text-red-400 text-base\"><\/i>\r\n <span id=\"vote-error-text\">Veuillez v\u00e9rifier vos informations.<\/span>\r\n <\/div>\r\n\r\n \r\n <button type=\"submit\"\r\n class=\"w-full py-4 px-6 rounded-2xl font-black text-base sm:text-lg text-white bg-gradient-to-r from-ccb-pink via-ccb-orange to-ccb-pink bg-[length:200%_auto] hover:bg-right transition-all duration-500 shadow-[0_10px_30px_rgba(229,0,81,0.45)] hover:shadow-[0_15px_35px_rgba(245,130,32,0.6)] transform hover:-translate-y-0.5 flex items-center justify-center gap-3\">\r\n <i class=\"fa-solid fa-wand-magic-sparkles\"><\/i>\r\n <span>Je valide mon vote & je tente ma chance !<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/form>\r\n\r\n \r\n \r\n \r\n <div id=\"vote-confirmation-card\" class=\"hidden space-y-6 animate-fade-in\">\r\n <div class=\"glass-panel rounded-3xl p-6 sm:p-8 text-center space-y-5 border-2 border-ccb-gold\/50\">\r\n <div class=\"w-16 h-16 rounded-full bg-gradient-to-br from-ccb-gold to-ccb-orange text-black mx-auto flex items-center justify-center text-3xl shadow-xl\">\r\n <i class=\"fa-solid fa-check-double\"><\/i>\r\n <\/div>\r\n\r\n <div>\r\n <span class=\"px-3 py-1 rounded-full text-xs font-extrabold uppercase tracking-widest bg-ccb-gold\/20 text-ccb-gold border border-ccb-gold\/40\">\r\n Vote Officiellement Enregistr\u00e9\r\n <\/span>\r\n <h2 class=\"text-2xl sm:text-3xl font-black text-white mt-2\">\r\n Merci <span id=\"confirm-voter-firstname\" class=\"text-ccb-gold\">Marie<\/span> ! \ud83c\udf89\r\n <\/h2>\r\n <p class=\"text-xs sm:text-sm text-slate-300 mt-1\">\r\n Votre voix a bien \u00e9t\u00e9 ajout\u00e9e au compteur de votre commer\u00e7ant et votre ticket est dans l'urne pour le tirage des <strong class=\"text-white\">3 x 75 \u20ac<\/strong> !\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"golden-ticket rounded-2xl p-5 sm:p-6 text-left mx-auto max-w-md\">\r\n <div class=\"flex items-center justify-between border-b border-black\/15 pb-3 mb-3\">\r\n <div>\r\n <div class=\"text-[10px] font-black uppercase tracking-widest text-black\/70\">UNION COMMERCIALE \u2022 BOURG-EN-BRESSE<\/div>\r\n <div class=\"text-base font-black text-black\">TICKET D'OR DE NO\u00cbL<\/div>\r\n <\/div>\r\n <div class=\"text-right\">\r\n <span class=\"px-2.5 py-1 rounded-lg bg-black text-ccb-gold font-mono text-xs font-bold\" id=\"confirm-ticket-number\">\r\n #CCB-8492\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"space-y-2 text-xs sm:text-sm\">\r\n <div class=\"flex justify-between\">\r\n <span class=\"font-semibold text-black\/70\">Participant(e) :<\/span>\r\n <span class=\"font-extrabold text-black\" id=\"confirm-full-name\">-<\/span>\r\n <\/div>\r\n <div class=\"flex justify-between\">\r\n <span class=\"font-semibold text-black\/70\">Vitrine soutenue :<\/span>\r\n <span class=\"font-extrabold text-ccb-pinkDark\" id=\"confirm-shop-name\">-<\/span>\r\n <\/div>\r\n <div class=\"flex justify-between\">\r\n <span class=\"font-semibold text-black\/70\">Tirage au sort :<\/span>\r\n <span class=\"font-bold text-black\">3 Ch\u00e8ques Cadeaux de 75 \u20ac<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mt-4 pt-3 border-t border-dashed border-black\/25 flex items-center justify-between text-[11px] font-bold text-black\/75\">\r\n <span><i class=\"fa-solid fa-shield-halved mr-1\"><\/i>Participation certifi\u00e9e CCB01<\/span>\r\n <span id=\"confirm-date-time\">-<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-col sm:flex-row gap-3 pt-2\">\r\n <button type=\"button\" onclick=\"shareContest()\"\r\n class=\"flex-1 py-3 px-4 rounded-xl font-bold text-xs sm:text-sm bg-white\/10 hover:bg-white\/20 text-white border border-white\/15 transition flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-share-nodes text-ccb-orange\"><\/i>\r\n <span>Partager le concours \u00e0 mes proches<\/span>\r\n <\/button>\r\n <button type=\"button\" onclick=\"resetClientFormForTest()\"\r\n class=\"py-3 px-4 rounded-xl font-bold text-xs sm:text-sm bg-ccb-pink\/20 hover:bg-ccb-pink\/30 text-pink-200 border border-ccb-pink\/40 transition flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-rotate-right\"><\/i>\r\n <span>Tester un autre vote (D\u00e9mo)<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n \r\n \r\n \r\n <section id=\"view-admin\" class=\"hidden space-y-8 transition-all duration-300\">\r\n\r\n \r\n <div class=\"glass-panel rounded-3xl p-6 sm:p-8 border-l-4 border-l-ccb-pink flex flex-col lg:flex-row lg:items-center justify-between gap-6\">\r\n <div class=\"space-y-1.5\">\r\n <div class=\"inline-flex items-center gap-2 text-xs font-extrabold uppercase tracking-widest text-ccb-orange\">\r\n <i class=\"fa-solid fa-crown text-ccb-gold\"><\/i> Espace Membres du Bureau \u2022 Centre Commerces Bourg\r\n <\/div>\r\n <h2 class=\"text-2xl sm:text-3xl font-black text-white\">\r\n Supervision des Votes & Tirage au Sort Officiel\r\n <\/h2>\r\n <p class=\"text-xs sm:text-sm text-slate-300 max-w-2xl\">\r\n Suivez en temps r\u00e9el le classement des <strong class=\"text-ccb-gold\">3 commer\u00e7ants gagnants<\/strong>, g\u00e9n\u00e9rez les QR codes boutiques et lancez la machine \u00e0 tirage au sort des <strong class=\"text-ccb-gold\">3 ch\u00e8ques cadeaux de 75 \u20ac<\/strong>.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-wrap items-center gap-2.5\">\r\n <button onclick=\"addSimulatedBatchVotes(15)\"\r\n class=\"px-4 py-2.5 rounded-xl text-xs font-bold bg-white\/10 hover:bg-white\/15 text-amber-300 border border-amber-400\/30 transition flex items-center gap-2\">\r\n <i class=\"fa-solid fa-bolt\"><\/i>\r\n <span>+15 Votes D\u00e9mo<\/span>\r\n <\/button>\r\n <button onclick=\"openQrModal()\"\r\n class=\"px-4 py-2.5 rounded-xl text-xs font-bold bg-ccb-pink\/20 hover:bg-ccb-pink\/30 text-pink-200 border border-ccb-pink\/40 transition flex items-center gap-2\">\r\n <i class=\"fa-solid fa-qrcode\"><\/i>\r\n <span>QR Codes Boutiques<\/span>\r\n <\/button>\r\n <button onclick=\"exportDataCSV()\"\r\n class=\"px-4 py-2.5 rounded-xl text-xs font-bold bg-emerald-500\/20 hover:bg-emerald-500\/30 text-emerald-200 border border-emerald-500\/40 transition flex items-center gap-2\">\r\n <i class=\"fa-solid fa-file-csv\"><\/i>\r\n <span>Exporter Excel (CSV)<\/span>\r\n <\/button>\r\n <button onclick=\"openWordpressModal()\"\r\n class=\"px-4 py-2.5 rounded-xl text-xs font-bold bg-gradient-to-r from-ccb-pink to-ccb-orange text-white shadow-lg transition flex items-center gap-2\">\r\n <i class=\"fa-brands fa-wordpress\"><\/i>\r\n <span>Code Elementor \/ WP<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-2 lg:grid-cols-4 gap-4\">\r\n <div class=\"glass-panel rounded-2xl p-5 border-t-2 border-t-ccb-pink\">\r\n <div class=\"flex items-center justify-between text-slate-400 text-xs font-bold uppercase\">\r\n <span>Votes Valid\u00e9s<\/span>\r\n <i class=\"fa-solid fa-check-to-slot text-ccb-pink text-base\"><\/i>\r\n <\/div>\r\n <div id=\"kpi-total-votes\" class=\"text-3xl sm:text-4xl font-black text-white mt-2\">0<\/div>\r\n <div class=\"text-[11px] text-emerald-400 font-semibold mt-1\">\r\n <i class=\"fa-solid fa-arrow-trend-up mr-1\"><\/i>Comptage certifi\u00e9 en direct\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"glass-panel rounded-2xl p-5 border-t-2 border-t-ccb-orange\">\r\n <div class=\"flex items-center justify-between text-slate-400 text-xs font-bold uppercase\">\r\n <span>Participants \u00c9ligibles<\/span>\r\n <i class=\"fa-solid fa-users text-ccb-orange text-base\"><\/i>\r\n <\/div>\r\n <div id=\"kpi-unique-voters\" class=\"text-3xl sm:text-4xl font-black text-white mt-2\">0<\/div>\r\n <div class=\"text-[11px] text-slate-300 font-medium mt-1\">\r\n Dans l'urne pour les 3 x 75 \u20ac\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"glass-panel rounded-2xl p-5 border-t-2 border-t-ccb-gold\">\r\n <div class=\"flex items-center justify-between text-slate-400 text-xs font-bold uppercase\">\r\n <span>Vitrines en Lice<\/span>\r\n <i class=\"fa-solid fa-store text-ccb-gold text-base\"><\/i>\r\n <\/div>\r\n <div id=\"kpi-total-shops\" class=\"text-3xl sm:text-4xl font-black text-white mt-2\">18<\/div>\r\n <div class=\"text-[11px] text-amber-300 font-medium mt-1\">\r\n Adh\u00e9rents Centre Commerces Bourg\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"glass-panel rounded-2xl p-5 border-t-2 border-t-emerald-500\">\r\n <div class=\"flex items-center justify-between text-slate-400 text-xs font-bold uppercase\">\r\n <span>Doublons Bloqu\u00e9s<\/span>\r\n <i class=\"fa-solid fa-shield-cat text-emerald-400 text-base\"><\/i>\r\n <\/div>\r\n <div id=\"kpi-blocked-duplicates\" class=\"text-3xl sm:text-4xl font-black text-white mt-2\">14<\/div>\r\n <div class=\"text-[11px] text-emerald-400 font-medium mt-1\">\r\n Filtre anti-triche T\u00e9l & Email actif\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n \r\n \r\n <div class=\"glass-panel rounded-3xl p-6 sm:p-8 space-y-6\">\r\n <div class=\"flex flex-col sm:flex-row sm:items-center justify-between gap-2 border-b border-white\/10 pb-4\">\r\n <div>\r\n <span class=\"text-xs font-extrabold uppercase tracking-wider text-ccb-gold\">\r\n <i class=\"fa-solid fa-medal mr-1\"><\/i> R\u00e9compense des 3 Plus Belles Vitrines\r\n <\/span>\r\n <h3 class=\"text-xl sm:text-2xl font-black text-white\">\r\n Podium Officiel des Commer\u00e7ants (Top 3)\r\n <\/h3>\r\n <\/div>\r\n <span class=\"text-xs text-slate-400\">Mise \u00e0 jour automatique \u00e0 chaque scan QR Code<\/span>\r\n <\/div>\r\n\r\n \r\n <div id=\"podium-container\" class=\"grid grid-cols-1 md:grid-cols-3 gap-5 items-end pt-4\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n \r\n \r\n <div class=\"glass-panel-gold rounded-3xl p-6 sm:p-8 space-y-6 relative overflow-hidden\">\r\n <div class=\"flex flex-col md:flex-row md:items-center justify-between gap-4 border-b border-ccb-gold\/25 pb-5\">\r\n <div>\r\n <div class=\"inline-flex items-center gap-2 px-3 py-1 rounded-full bg-ccb-gold\/20 text-ccb-gold text-xs font-extrabold uppercase tracking-widest mb-2\">\r\n <i class=\"fa-solid fa-wand-sparkles\"><\/i> Show Tirage au Sort en R\u00e9union de Bureau\r\n <\/div>\r\n <h3 class=\"text-2xl sm:text-3xl font-black text-white\">\r\n Tirage au Sort des <span class=\"text-ccb-gold\">3 Ch\u00e8ques Cadeaux de 75 \u20ac<\/span>\r\n <\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-300 mt-1\">\r\n Algorithme al\u00e9atoire int\u00e9gral parmi tous les votants uniques enregistr\u00e9s (un m\u00eame client ne peut pas \u00eatre tir\u00e9 deux fois).\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"flex items-center gap-3\">\r\n <button onclick=\"resetWinnersDraw()\"\r\n class=\"px-4 py-2.5 rounded-xl text-xs font-bold bg-white\/10 hover:bg-white\/20 text-slate-200 border border-white\/15 transition flex items-center gap-2\">\r\n <i class=\"fa-solid fa-rotate-left\"><\/i>\r\n <span>R\u00e9initialiser le tirage<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slot-window rounded-3xl p-6 text-center max-w-3xl mx-auto space-y-4\">\r\n <div class=\"text-xs font-bold uppercase tracking-widest text-ccb-gold\" id=\"slot-status-label\">\r\n <i class=\"fa-solid fa-ticket mr-1\"><\/i> Pr\u00eat \u00e0 tirer au sort parmi les participants valid\u00e9s\r\n <\/div>\r\n\r\n <div id=\"slot-rolling-display\" class=\"py-5 px-4 rounded-2xl bg-black\/60 border border-white\/10 min-h-[96px] flex flex-col items-center justify-center\">\r\n <div class=\"text-2xl sm:text-4xl font-black tracking-tight text-white\" id=\"slot-main-name\">\r\n Cliquez sur \u00ab Tirer un Gagnant \u00bb\r\n <\/div>\r\n <div class=\"text-xs sm:text-sm text-ccb-orange font-mono mt-1\" id=\"slot-sub-info\">\r\n 3 Ch\u00e8ques Cadeaux Centre Commerces Bourg de 75 \u20ac en jeu\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex flex-wrap justify-center gap-3 pt-2\">\r\n <button id=\"btn-draw-next\" onclick=\"triggerLiveDraw()\"\r\n class=\"px-8 py-4 rounded-2xl font-black text-base sm:text-lg text-black bg-gradient-to-r from-ccb-gold via-amber-400 to-ccb-orange hover:brightness-110 shadow-[0_0_30px_rgba(255,215,0,0.4)] transition transform hover:scale-105 flex items-center gap-3\">\r\n <i class=\"fa-solid fa-dice text-xl\"><\/i>\r\n <span id=\"btn-draw-next-text\">Lancer le tirage du 1er Ch\u00e8que de 75 \u20ac !<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"winners-cards-grid\" class=\"grid grid-cols-1 md:grid-cols-3 gap-5 pt-2\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n \r\n \r\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\r\n\r\n \r\n <div class=\"lg:col-span-2 glass-panel rounded-3xl p-6 space-y-4\">\r\n <div class=\"flex flex-col sm:flex-row sm:items-center justify-between gap-3\">\r\n <div>\r\n <h3 class=\"text-lg font-black text-white flex items-center gap-2\">\r\n <i class=\"fa-solid fa-list-ol text-ccb-pink\"><\/i>\r\n Classement Complet des Boutiques Participantes\r\n <\/h3>\r\n <p class=\"text-xs text-slate-400\">Suivi d\u00e9taill\u00e9 des voix et parts de votes par commerce<\/p>\r\n <\/div>\r\n\r\n \r\n <button onclick=\"toggleAddShopForm()\"\r\n class=\"px-3.5 py-2 rounded-xl text-xs font-bold bg-ccb-pink hover:bg-ccb-pinkLight text-white transition flex items-center gap-1.5 self-start\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n <span>Ajouter un commerce<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div id=\"add-shop-form-box\" class=\"hidden p-4 rounded-2xl bg-slate-900\/90 border border-ccb-pink\/40 space-y-3\">\r\n <div class=\"text-xs font-bold text-ccb-gold uppercase\">Ajouter un commerce adh\u00e9rent CCB01 dans la liste<\/div>\r\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-2.5\">\r\n <input type=\"text\" id=\"new-shop-name\" placeholder=\"Nom de la boutique\" class=\"px-3 py-2 rounded-xl bg-black\/50 border border-white\/15 text-xs text-white\">\r\n <input type=\"text\" id=\"new-shop-street\" placeholder=\"Rue (ex: Rue Gambetta)\" class=\"px-3 py-2 rounded-xl bg-black\/50 border border-white\/15 text-xs text-white\">\r\n <input type=\"text\" id=\"new-shop-category\" placeholder=\"Cat\u00e9gorie (ex: Mode, Bijoux)\" class=\"px-3 py-2 rounded-xl bg-black\/50 border border-white\/15 text-xs text-white\">\r\n <\/div>\r\n <div class=\"flex justify-end gap-2\">\r\n <button type=\"button\" onclick=\"toggleAddShopForm()\" class=\"px-3 py-1.5 rounded-lg text-xs text-slate-400 hover:text-white\">Annuler<\/button>\r\n <button type=\"button\" onclick=\"addCustomShop()\" class=\"px-4 py-1.5 rounded-lg text-xs font-bold bg-ccb-orange text-black\">Enregistrer la boutique<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"admin-leaderboard-list\" class=\"space-y-2.5 max-h-[460px] overflow-y-auto pr-1\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-panel rounded-3xl p-6 space-y-4 flex flex-col justify-between\">\r\n <div class=\"space-y-4\">\r\n <div class=\"flex items-center justify-between\">\r\n <div>\r\n <h3 class=\"text-lg font-black text-white flex items-center gap-2\">\r\n <i class=\"fa-solid fa-bolt text-ccb-gold\"><\/i>\r\n Derniers Votes Clients\r\n <\/h3>\r\n <p class=\"text-xs text-slate-400\">Journal d'audit horodat\u00e9<\/p>\r\n <\/div>\r\n <button onclick=\"toggleMaskPhones()\" id=\"btn-mask-phones\"\r\n class=\"px-2.5 py-1 rounded-lg bg-white\/10 hover:bg-white\/15 text-[11px] font-semibold text-slate-200 transition\">\r\n <i class=\"fa-regular fa-eye\"><\/i> Afficher N\u00b0\r\n <\/button>\r\n <\/div>\r\n\r\n <div id=\"admin-recent-voters\" class=\"space-y-2.5 max-h-[380px] overflow-y-auto pr-1\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pt-3 border-t border-white\/10 text-[11px] text-slate-400 flex items-center justify-between\">\r\n <span><i class=\"fa-solid fa-lock text-emerald-400 mr-1\"><\/i>Donn\u00e9es conformes RGPD<\/span>\r\n <button onclick=\"exportDataCSV()\" class=\"text-ccb-gold hover:underline font-bold\">Tout t\u00e9l\u00e9charger (.CSV)<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n <\/main>\r\n\r\n \r\n \r\n \r\n <div id=\"modal-qr\" class=\"fixed inset-0 z-50 hidden bg-black\/80 backdrop-blur-md flex items-center justify-center p-4\">\r\n <div class=\"glass-panel rounded-3xl max-w-lg w-full p-6 sm:p-8 space-y-5 border border-ccb-gold\/40 relative\">\r\n <button onclick=\"closeQrModal()\" class=\"absolute top-5 right-5 w-9 h-9 rounded-full bg-white\/10 hover:bg-white\/20 text-white flex items-center justify-center\">\r\n <i class=\"fa-solid fa-xmark\"><\/i>\r\n <\/button>\r\n\r\n <div>\r\n <span class=\"text-xs font-extrabold uppercase tracking-wider text-ccb-orange\">Kit Affiches Vitrines CCB01<\/span>\r\n <h3 class=\"text-xl font-black text-white mt-1\">G\u00e9n\u00e9rateur de QR Code pour les Vitrines<\/h3>\r\n <p class=\"text-xs text-slate-300 mt-1\">\r\n Vous pouvez utiliser un QR Code unique pour toute la ville, ou g\u00e9n\u00e9rer un QR Code personnalis\u00e9 qui pr\u00e9-s\u00e9lectionne directement le commerce scann\u00e9 !\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"space-y-3\">\r\n <label class=\"block text-xs font-bold uppercase text-slate-300\">Choisir le type de QR Code :<\/label>\r\n <select id=\"qr-shop-selector\" onchange=\"updateQrCodePreview()\"\r\n class=\"w-full rounded-xl bg-slate-900 border border-white\/20 text-white text-xs sm:text-sm font-semibold px-3.5 py-2.5\">\r\n <option value=\"ALL\">\ud83c\udf10 QR Code G\u00e9n\u00e9ral (Tous les commerces - assistance.ccb01.fr)<\/option>\r\n <\/select>\r\n\r\n <div class=\"p-5 rounded-2xl bg-white text-center space-y-3\">\r\n <img decoding=\"async\" id=\"qr-image-preview\" src=\"https:\/\/api.qrserver.com\/v1\/create-qr-code\/?size=220x220&data=https:\/\/assistance.ccb01.fr\/concours-vitrines\/&color=11131A\"\r\n alt=\"QR Code Officiel CCB01\" class=\"w-44 h-44 mx-auto rounded-lg shadow\"\r\n onerror=\"this.src='https:\/\/placehold.co\/220x220\/FFFFFF\/11131A?text=QR+Code+CCB01'\">\r\n <div class=\"text-xs font-bold text-slate-900\" id=\"qr-caption-title\">Scan Officiel \u2022 Concours des Vitrines CCB01<\/div>\r\n <div class=\"text-[11px] font-mono text-ccb-pink bg-slate-100 px-2.5 py-1 rounded inline-block break-all\" id=\"qr-url-preview\">\r\n https:\/\/assistance.ccb01.fr\/concours-vitrines\/\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex justify-end gap-2.5\">\r\n <button onclick=\"copyQrLink()\" class=\"px-4 py-2.5 rounded-xl text-xs font-bold bg-white\/10 hover:bg-white\/20 text-white flex items-center gap-2\">\r\n <i class=\"fa-regular fa-copy\"><\/i> Copier le lien\r\n <\/button>\r\n <button onclick=\"closeQrModal()\" class=\"px-5 py-2.5 rounded-xl text-xs font-bold bg-gradient-to-r from-ccb-pink to-ccb-orange text-white\">\r\n Fermer\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n \r\n \r\n <div id=\"modal-wp\" class=\"fixed inset-0 z-50 hidden bg-black\/80 backdrop-blur-md flex items-center justify-center p-4\">\r\n <div class=\"glass-panel rounded-3xl max-w-2xl w-full p-6 sm:p-8 space-y-5 border border-ccb-pink\/50 relative max-h-[90vh] overflow-y-auto\">\r\n <button onclick=\"closeWordpressModal()\" class=\"absolute top-5 right-5 w-9 h-9 rounded-full bg-white\/10 hover:bg-white\/20 text-white flex items-center justify-center\">\r\n <i class=\"fa-solid fa-xmark\"><\/i>\r\n <\/button>\r\n\r\n <div>\r\n <span class=\"text-xs font-extrabold uppercase tracking-wider text-ccb-gold\">D\u00e9ploiement sur assistance.ccb01.fr<\/span>\r\n <h3 class=\"text-xl sm:text-2xl font-black text-white mt-1\">\r\n <i class=\"fa-brands fa-wordpress text-ccb-orange mr-1\"><\/i> Int\u00e9gration WordPress & Elementor\r\n <\/h3>\r\n <\/div>\r\n\r\n <div class=\"space-y-4 text-xs sm:text-sm text-slate-300 leading-relaxed\">\r\n <div class=\"p-4 rounded-2xl bg-white\/5 border border-white\/10 space-y-2\">\r\n <div class=\"font-bold text-white text-sm\">1. Mise en page Pleine Largeur dans Elementor<\/div>\r\n <p>\r\n Sur <code class=\"text-ccb-gold\">assistance.ccb01.fr<\/code>, cr\u00e9ez une nouvelle page (ex: <code class=\"text-ccb-gold\">\/vote-vitrines<\/code>), choisissez le mod\u00e8le de page <strong>\u00ab Elementor Canevas \u00bb (Elementor Canvas)<\/strong> pour masquer le menu habituel et offrir une vraie exp\u00e9rience d'application mobile au scan du QR Code, puis glissez un widget <strong>HTML<\/strong> contenant ce fichier.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"p-4 rounded-2xl bg-white\/5 border border-white\/10 space-y-2\">\r\n <div class=\"font-bold text-white text-sm\">2. Centralisation des votes (Webhook Google Sheets \/ Make \/ Base WP)<\/div>\r\n <p>\r\n Pour que tous les smartphones des clients alimentent la m\u00eame base de donn\u00e9es centrale en temps r\u00e9el, vous pouvez coller ci-dessous l'URL d'un Webhook (Make.com, Zapier, Google Apps Script ou endpoint REST WordPress). Chaque vote y sera envoy\u00e9 automatiquement en <code class=\"text-ccb-gold\">POST JSON<\/code> :\r\n <\/p>\r\n <div class=\"flex gap-2 pt-1\">\r\n <input type=\"url\" id=\"webhook-url-input\" placeholder=\"https:\/\/hook.eu1.make.com\/votre-webhook-ccb01 (Optionnel)\"\r\n class=\"flex-1 px-3 py-2 rounded-xl bg-slate-900 border border-white\/20 text-xs text-white\">\r\n <button onclick=\"saveWebhookUrl()\" class=\"px-4 py-2 rounded-xl bg-ccb-orange text-black font-bold text-xs\">\r\n Connecter\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"p-4 rounded-2xl bg-ccb-pink\/15 border border-ccb-pink\/40 space-y-1.5\">\r\n <div class=\"font-bold text-white text-sm\"><i class=\"fa-solid fa-lock mr-1 text-ccb-gold\"><\/i> 3. Acc\u00e8s secret au Cockpit Bureau le jour J<\/div>\r\n <p>\r\n Pour la version publique des clients, la barre de d\u00e9monstration du haut peut \u00eatre masqu\u00e9e en changeant <code class=\"text-white font-mono\">SHOW_DEMO_BAR = false<\/code> dans le script, et vous acc\u00e9derez au Cockpit Bureau + Tirage au sort simplement en ajoutant <code class=\"text-ccb-gold font-mono\">?admin=ccb01<\/code> \u00e0 la fin de l'adresse !\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex justify-end\">\r\n <button onclick=\"closeWordpressModal()\" class=\"px-6 py-2.5 rounded-xl text-xs font-bold bg-gradient-to-r from-ccb-pink to-ccb-orange text-white\">\r\n Parfait, j'ai compris !\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"toast-notification\" class=\"fixed bottom-5 right-5 z-50 hidden px-4 py-3 rounded-2xl bg-slate-900\/95 border border-ccb-gold text-white text-xs sm:text-sm font-bold shadow-2xl flex items-center gap-2.5\">\r\n <i class=\"fa-solid fa-circle-check text-ccb-gold text-base\"><\/i>\r\n <span id=\"toast-text\">Action effectu\u00e9e<\/span>\r\n <\/div>\r\n\r\n \r\n \r\n \r\n <footer class=\"relative z-10 border-t border-white\/10 bg-black\/50 backdrop-blur-md py-6 px-4 mt-12\">\r\n <div class=\"max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-400\">\r\n <div class=\"flex items-center gap-3\">\r\n <span class=\"w-3 h-3 rounded-full bg-gradient-to-r from-ccb-pink to-ccb-orange\"><\/span>\r\n <span class=\"font-bold text-white\">Union Commerciale Centre Commerces Bourg (CCB01)<\/span>\r\n <span>\u2022 Bourg-en-Bresse<\/span>\r\n <\/div>\r\n <div class=\"flex flex-wrap items-center gap-4\">\r\n <span>\ud83c\udf81 3 Ch\u00e8ques Cadeaux de 75 \u20ac (Votants)<\/span>\r\n <span>\u2022<\/span>\r\n <span>\ud83c\udfc6 Troph\u00e9e des 3 Vitrines (Commer\u00e7ants)<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n<\/div> \r\n\r\n \r\n \r\n \r\n <script>\r\n \/***********************************************************************\r\n * 1. DONN\u00c9ES INITIALES : COMMERCES DE BOURG-EN-BRESSE & VOTES D\u00c9MO\r\n ***********************************************************************\/\r\n const STORAGE_KEY_SHOPS = 'ccb01_vitrines_shops_v1';\r\n const STORAGE_KEY_VOTERS = 'ccb01_vitrines_voters_v1';\r\n const STORAGE_KEY_WINNERS = 'ccb01_vitrines_winners_v1';\r\n const STORAGE_KEY_DUPLICATES = 'ccb01_vitrines_dups_v1';\r\n\r\n \/\/ Liste r\u00e9aliste de commerces par rue du centre-ville de Bourg-en-Bresse (personnalisable)\r\n const DEFAULT_SHOPS = [\r\n { id: 'ccb-1', name: 'Maison L\u00e9a - Pr\u00eat-\u00e0-Porter', street: 'Rue Notre-Dame', category: 'Mode & Accessoires', icon: 'fa-shirt', votes: 48 },\r\n { id: 'ccb-2', name: 'Chocolaterie & Douceurs de Bresse', street: 'Rue Victor Basch', category: 'Gastronomie & Chocolats', icon: 'fa-cookie-bite', votes: 62 },\r\n { id: 'ccb-3', name: 'Bijouterie L\\'\u00c9clat d\\'Or', street: 'Rue Notre-Dame', category: 'Horlogerie & Bijoux', icon: 'fa-gem', votes: 55 },\r\n { id: 'ccb-4', name: 'Fleuriste L\\'Atelier V\u00e9g\u00e9tal', street: 'Rue Gambetta', category: 'Fleurs & D\u00e9coration', icon: 'fa-seedling', votes: 41 },\r\n { id: 'ccb-5', name: 'Librairie Papeterie du Centre', street: 'Place Carriat', category: 'Culture & Livres', icon: 'fa-book-open', votes: 37 },\r\n { id: 'ccb-6', name: 'Optique Cr\u00e9ateurs Bourg', street: 'Carr\u00e9 Amiot', category: 'Opticien', icon: 'fa-glasses', votes: 29 },\r\n { id: 'ccb-7', name: 'Concept Store L\\'Esprit D\u00e9co', street: 'Rue Gambetta', category: 'Maison & Cadeaux', icon: 'fa-couch', votes: 34 },\r\n { id: 'ccb-8', name: 'P\u00e2tisserie Salon de Th\u00e9 Imp\u00e9rial', street: 'Rue Notre-Dame', category: 'Boulangerie P\u00e2tisserie', icon: 'fa-cake-candles', votes: 44 },\r\n { id: 'ccb-9', name: 'Chaussures & Maroquinerie Bresse', street: 'Rue Victor Basch', category: 'Chaussures & Sacs', icon: 'fa-bag-shopping', votes: 26 },\r\n { id: 'ccb-10', name: 'Cave & \u00c9picerie Fine du Terroir', street: 'Rue Gambetta', category: 'Vins & Terroir', icon: 'fa-wine-bottle', votes: 31 },\r\n { id: 'ccb-11', name: 'Boutique Enfants Les Petits Lutins', street: 'Carr\u00e9 Amiot', category: 'Jouets & Mode Enfant', icon: 'fa-puzzle-piece', votes: 39 },\r\n { id: 'ccb-12', name: 'Institut Beaut\u00e9 & Parfumerie', street: 'Place Carriat', category: 'Beaut\u00e9 & Bien-\u00eatre', icon: 'fa-spa', votes: 24 }\r\n ];\r\n\r\n \/\/ Votants initiaux de d\u00e9monstration pour que le tirage au sort fonctionne imm\u00e9diatement en r\u00e9union de bureau\r\n const DEFAULT_VOTERS = [\r\n { id: 'CCB-2026-1042', name: 'Sophie Mercier', phone: '0614283910', email: 'sophie.mercier01@email.fr', shopId: 'ccb-2', timestamp: '22\/10\/2026 14:15' },\r\n { id: 'CCB-2026-1829', name: 'Laurent Gauthier', phone: '0678451290', email: 'l.gauthier.bourg@email.fr', shopId: 'ccb-3', timestamp: '22\/10\/2026 14:22' },\r\n { id: 'CCB-2026-2310', name: 'Camille Deschamps', phone: '0781234509', email: 'camille.deschamps@email.fr', shopId: 'ccb-1', timestamp: '22\/10\/2026 14:30' },\r\n { id: 'CCB-2026-2944', name: 'Nicolas Perrin', phone: '0645892311', email: 'nicolas.perrin01@email.fr', shopId: 'ccb-8', timestamp: '22\/10\/2026 14:38' },\r\n { id: 'CCB-2026-3412', name: '\u00c9lodie Chanal', phone: '0698127634', email: 'elodie.chanal@email.fr', shopId: 'ccb-2', timestamp: '22\/10\/2026 14:44' },\r\n { id: 'CCB-2026-4091', name: 'Thomas Guillot', phone: '0762349812', email: 'thomas.guillot@email.fr', shopId: 'ccb-4', timestamp: '22\/10\/2026 14:50' },\r\n { id: 'CCB-2026-4820', name: 'Val\u00e9rie Morel', phone: '0633491827', email: 'valerie.morel01@email.fr', shopId: 'ccb-3', timestamp: '22\/10\/2026 14:55' },\r\n { id: 'CCB-2026-5190', name: 'Julien Blanc', phone: '0651209843', email: 'julien.blanc.ain@email.fr', shopId: 'ccb-11', timestamp: '22\/10\/2026 15:01' },\r\n { id: 'CCB-2026-5903', name: 'Aur\u00e9lie Tissot', phone: '0687654321', email: 'aurelie.tissot@email.fr', shopId: 'ccb-1', timestamp: '22\/10\/2026 15:05' },\r\n { id: 'CCB-2026-6411', name: 'Marc-Antoine Favre', phone: '0755432198', email: 'ma.favre01@email.fr', shopId: 'ccb-5', timestamp: '22\/10\/2026 15:09' }\r\n ];\r\n\r\n \/\/ \u00c9tat de l'application\r\n let shops = [];\r\n let voters = [];\r\n let drawnWinners = [null, null, null]; \/\/ 3 gagnants de 75 \u20ac\r\n let blockedDuplicates = 14;\r\n let selectedShopId = '';\r\n let currentStreetFilter = 'ALL';\r\n let showUnmaskedPhones = false;\r\n let soundEnabled = true;\r\n let isDrawing = false;\r\n\r\n \/***********************************************************************\r\n * 2. INITIALISATION AU CHARGEMENT\r\n ***********************************************************************\/\r\n window.onload = function () {\r\n \/\/ Active par d\u00e9faut le mode Plein \u00c9cran propre sur WordPress (masque l'ancien titre blanc)\r\n document.body.classList.add('ccb-clean-wp-page');\r\n detectWordPressSiteLogo();\r\n\r\n loadStateFromStorage();\r\n initFestiveBackgroundCanvas();\r\n startCountdownTimer();\r\n renderClientShops();\r\n renderAdminDashboard();\r\n populateQrModalDropdown();\r\n checkUrlParameters();\r\n };\r\n\r\n \/\/ D\u00e9tecte automatiquement le vrai logo PNG de votre site WordPress s'il est pr\u00e9sent dans la page\r\n function detectWordPressSiteLogo() {\r\n try {\r\n const wpLogoSelectors = [\r\n 'img.custom-logo',\r\n '.site-logo img',\r\n '.elementor-widget-theme-site-logo img',\r\n 'header img[src*=\"logo\"]',\r\n 'img[src*=\"centre_commerces_bourg\"]',\r\n 'img[src*=\"ccb\"]'\r\n ];\r\n for (const sel of wpLogoSelectors) {\r\n const foundImg = document.querySelector(sel);\r\n if (foundImg && foundImg.src && foundImg.id !== 'ccb-detected-wp-logo') {\r\n const targetImg = document.getElementById('ccb-detected-wp-logo');\r\n const fallbackSvg = document.getElementById('ccb-fallback-svg-logo');\r\n if (targetImg && fallbackSvg) {\r\n targetImg.src = foundImg.src;\r\n targetImg.classList.remove('hidden');\r\n fallbackSvg.classList.add('hidden');\r\n break;\r\n }\r\n }\r\n }\r\n } catch (e) {}\r\n }\r\n\r\n \/\/ Permet d'afficher ou masquer l'ancien ent\u00eate WordPress (ex: \"Les votes sont termin\u00e9s...\")\r\n function toggleCleanWpPage() {\r\n const isClean = document.body.classList.toggle('ccb-clean-wp-page');\r\n const label = document.getElementById('label-wp-fullscreen');\r\n if (label) {\r\n label.textContent = isClean ? 'Mode Plein \u00c9cran : Actif' : 'Ent\u00eate WP : Visible';\r\n }\r\n showToast(isClean ? \"Ancien titre WordPress masqu\u00e9 (Plein \u00e9cran noir actif)\" : \"Ent\u00eate WordPress d'origine r\u00e9affich\u00e9\");\r\n }\r\n\r\n function loadStateFromStorage() {\r\n try {\r\n const savedShops = localStorage.getItem(STORAGE_KEY_SHOPS);\r\n const savedVoters = localStorage.getItem(STORAGE_KEY_VOTERS);\r\n const savedWinners = localStorage.getItem(STORAGE_KEY_WINNERS);\r\n const savedDups = localStorage.getItem(STORAGE_KEY_DUPLICATES);\r\n\r\n shops = savedShops ? JSON.parse(savedShops) : JSON.parse(JSON.stringify(DEFAULT_SHOPS));\r\n voters = savedVoters ? JSON.parse(savedVoters) : JSON.parse(JSON.stringify(DEFAULT_VOTERS));\r\n drawnWinners = savedWinners ? JSON.parse(savedWinners) : [null, null, null];\r\n blockedDuplicates = savedDups ? parseInt(savedDups, 10) : 14;\r\n } catch (e) {\r\n shops = JSON.parse(JSON.stringify(DEFAULT_SHOPS));\r\n voters = JSON.parse(JSON.stringify(DEFAULT_VOTERS));\r\n drawnWinners = [null, null, null];\r\n }\r\n updateNavVoteBadge();\r\n }\r\n\r\n function saveStateToStorage() {\r\n try {\r\n localStorage.setItem(STORAGE_KEY_SHOPS, JSON.stringify(shops));\r\n localStorage.setItem(STORAGE_KEY_VOTERS, JSON.stringify(voters));\r\n localStorage.setItem(STORAGE_KEY_WINNERS, JSON.stringify(drawnWinners));\r\n localStorage.setItem(STORAGE_KEY_DUPLICATES, String(blockedDuplicates));\r\n } catch (e) {\r\n \/\/ Ignore storage quota errors in restricted iframe\r\n }\r\n updateNavVoteBadge();\r\n }\r\n\r\n function getTotalVotes() {\r\n return shops.reduce((acc, s) => acc + s.votes, 0);\r\n }\r\n\r\n function updateNavVoteBadge() {\r\n const badge = document.getElementById('nav-badge-votes');\r\n if (badge) badge.textContent = getTotalVotes();\r\n }\r\n\r\n \/***********************************************************************\r\n * 3. D\u00c9TECTION DES PARAM\u00c8TRES URL (?commerce=id ou ?admin=ccb01)\r\n ***********************************************************************\/\r\n function checkUrlParameters() {\r\n const params = new URLSearchParams(window.location.search);\r\n if (params.get('admin') === 'ccb01') {\r\n switchViewMode('admin');\r\n }\r\n const preShop = params.get('commerce') || params.get('vitrine') || params.get('shop');\r\n if (preShop) {\r\n const found = shops.find(s => s.id === preShop);\r\n if (found) {\r\n selectShop(found.id, true);\r\n }\r\n }\r\n }\r\n\r\n function simulateQrPreselection() {\r\n switchViewMode('client');\r\n resetClientFormForTest();\r\n const randomShop = shops[Math.floor(Math.random() * shops.length)];\r\n selectShop(randomShop.id, true);\r\n showToast(`Scan QR simul\u00e9 pour : ${randomShop.name}`);\r\n window.scrollTo({ top: 180, behavior: 'smooth' });\r\n }\r\n\r\n \/***********************************************************************\r\n * 4. NAVIGATION ENTRE VUE CLIENT ET COCKPIT BUREAU ADMIN\r\n ***********************************************************************\/\r\n function switchViewMode(mode) {\r\n const viewClient = document.getElementById('view-client');\r\n const viewAdmin = document.getElementById('view-admin');\r\n const btnClient = document.getElementById('btn-mode-client');\r\n const btnAdmin = document.getElementById('btn-mode-admin');\r\n\r\n if (mode === 'admin') {\r\n viewClient.classList.add('hidden');\r\n viewAdmin.classList.remove('hidden');\r\n btnAdmin.className = 'px-3.5 py-1.5 rounded-lg text-xs sm:text-sm font-bold transition-all flex items-center gap-2 bg-gradient-to-r from-ccb-pink to-ccb-orange text-white shadow-lg';\r\n btnClient.className = 'px-3.5 py-1.5 rounded-lg text-xs sm:text-sm font-bold transition-all flex items-center gap-2 text-slate-300 hover:text-white hover:bg-white\/5';\r\n renderAdminDashboard();\r\n } else {\r\n viewAdmin.classList.add('hidden');\r\n viewClient.classList.remove('hidden');\r\n btnClient.className = 'px-3.5 py-1.5 rounded-lg text-xs sm:text-sm font-bold transition-all flex items-center gap-2 bg-gradient-to-r from-ccb-pink to-ccb-orange text-white shadow-lg';\r\n btnAdmin.className = 'px-3.5 py-1.5 rounded-lg text-xs sm:text-sm font-bold transition-all flex items-center gap-2 text-slate-300 hover:text-white hover:bg-white\/5';\r\n renderClientShops();\r\n }\r\n }\r\n\r\n \/***********************************************************************\r\n * 5. VUE CLIENT : AFFICHAGE, FILTRES ET S\u00c9LECTION DES VITRINES\r\n ***********************************************************************\/\r\n function renderClientShops() {\r\n const dropdown = document.getElementById('shop-select-dropdown');\r\n const grid = document.getElementById('client-shops-grid');\r\n const countBadge = document.getElementById('shops-count-badge');\r\n const searchVal = (document.getElementById('shop-search-input')?.value || '').toLowerCase().trim();\r\n\r\n if (countBadge) countBadge.textContent = `${shops.length} vitrines en lice`;\r\n\r\n \/\/ 1. Remplir la liste d\u00e9roulante <select> tri\u00e9e par ordre alphab\u00e9tique\r\n const sortedAlpha = [...shops].sort((a, b) => a.name.localeCompare(b.name));\r\n dropdown.innerHTML = '<option value=\"\">-- Choisissez un commerce dans la liste --<\/option>';\r\n sortedAlpha.forEach(shop => {\r\n const opt = document.createElement('option');\r\n opt.value = shop.id;\r\n opt.textContent = `${shop.name} (${shop.street})`;\r\n if (shop.id === selectedShopId) opt.selected = true;\r\n dropdown.appendChild(opt);\r\n });\r\n\r\n \/\/ 2. Filtrer et afficher les cartes visuelles\r\n const filtered = sortedAlpha.filter(shop => {\r\n const matchStreet = currentStreetFilter === 'ALL'\r\n || (currentStreetFilter === 'Place Carriat' && (shop.street.includes('Carriat') || shop.street.includes('Bichat')))\r\n || shop.street.toLowerCase().includes(currentStreetFilter.toLowerCase());\r\n const matchSearch = !searchVal\r\n || shop.name.toLowerCase().includes(searchVal)\r\n || shop.street.toLowerCase().includes(searchVal)\r\n || shop.category.toLowerCase().includes(searchVal);\r\n return matchStreet && matchSearch;\r\n });\r\n\r\n if (filtered.length === 0) {\r\n grid.innerHTML = `\r\n <div class=\"col-span-full py-6 text-center text-xs text-slate-400\">\r\n Aucun commerce trouv\u00e9 pour cette recherche.\r\n <\/div>\r\n `;\r\n return;\r\n }\r\n\r\n grid.innerHTML = filtered.map(shop => {\r\n const isSelected = shop.id === selectedShopId;\r\n return `\r\n <div onclick=\"selectShop('${shop.id}', false)\"\r\n class=\"cursor-pointer rounded-2xl p-3.5 border transition-all duration-200 flex items-center justify-between gap-3 ${\r\n isSelected\r\n ? 'shop-card-selected'\r\n : 'bg-slate-900\/85 border-white\/15 hover:border-ccb-orange\/50 hover:bg-slate-900'\r\n }\">\r\n <div class=\"flex items-center gap-3 min-w-0\">\r\n <div class=\"w-10 h-10 rounded-xl ${\r\n isSelected ? 'bg-ccb-pink text-white' : 'bg-white\/10 text-ccb-orange'\r\n } flex items-center justify-center text-base shrink-0 transition\">\r\n <i class=\"fa-solid ${shop.icon || 'fa-store'}\"><\/i>\r\n <\/div>\r\n <div class=\"min-w-0\">\r\n <div class=\"text-xs sm:text-sm font-extrabold text-white leading-snug break-words\">${escapeHtml(shop.name)}<\/div>\r\n <div class=\"text-[11px] text-slate-300 mt-0.5\">\r\n <i class=\"fa-solid fa-location-dot text-ccb-pink mr-1\"><\/i>${escapeHtml(shop.street)}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"shrink-0\">\r\n <span class=\"w-7 h-7 rounded-full flex items-center justify-center text-xs ${\r\n isSelected\r\n ? 'bg-ccb-gold text-black font-black shadow'\r\n : 'bg-white\/10 text-slate-300'\r\n }\">\r\n <i class=\"fa-solid ${isSelected ? 'fa-check' : 'fa-heart'}\"><\/i>\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('');\r\n }\r\n\r\n function setStreetFilter(street) {\r\n currentStreetFilter = street;\r\n document.querySelectorAll('.street-pill').forEach(btn => {\r\n if (btn.getAttribute('data-street') === street) {\r\n btn.className = 'street-pill shrink-0 px-3 py-1 rounded-full font-bold bg-ccb-pink text-white transition';\r\n } else {\r\n btn.className = 'street-pill shrink-0 px-3 py-1 rounded-full font-medium bg-white\/5 hover:bg-white\/15 text-slate-300 transition';\r\n }\r\n });\r\n renderClientShops();\r\n }\r\n\r\n function filterShopsClient() {\r\n renderClientShops();\r\n }\r\n\r\n function selectShopFromDropdown(shopId) {\r\n selectShop(shopId, false);\r\n }\r\n\r\n function selectShop(shopId, fromQrScan) {\r\n selectedShopId = shopId;\r\n const shop = shops.find(s => s.id === shopId);\r\n const pill = document.getElementById('selected-shop-pill');\r\n const nameDisplay = document.getElementById('selected-shop-name-display');\r\n const qrBanner = document.getElementById('qr-preselect-banner');\r\n const qrText = document.getElementById('qr-preselect-text');\r\n\r\n if (shop) {\r\n pill.classList.remove('hidden');\r\n nameDisplay.textContent = `${shop.name} (${shop.street})`;\r\n if (fromQrScan) {\r\n qrBanner.classList.remove('hidden');\r\n qrText.textContent = `Vitrine pr\u00e9-s\u00e9lectionn\u00e9e : ${shop.name}`;\r\n }\r\n playBeep(580, 0.06, 'sine');\r\n } else {\r\n pill.classList.add('hidden');\r\n qrBanner.classList.add('hidden');\r\n }\r\n\r\n renderClientShops();\r\n }\r\n\r\n function clearShopSelection() {\r\n selectShop('', false);\r\n document.getElementById('qr-preselect-banner').classList.add('hidden');\r\n }\r\n\r\n \/***********************************************************************\r\n * 6. SOUMISSION DU VOTE & VALIDATION ANTI-DOUBLONS\r\n ***********************************************************************\/\r\n function normalizePhone(phone) {\r\n return phone.replace(\/[\\s.\\-+]\/g, '').replace(\/^33\/, '0');\r\n }\r\n\r\n function handleVoteSubmit(e) {\r\n e.preventDefault();\r\n const errorBox = document.getElementById('vote-error-box');\r\n const errorText = document.getElementById('vote-error-text');\r\n errorBox.classList.add('hidden');\r\n\r\n const name = document.getElementById('voter-name').value.trim();\r\n const rawPhone = document.getElementById('voter-phone').value.trim();\r\n const email = document.getElementById('voter-email').value.trim().toLowerCase();\r\n const rgpd = document.getElementById('voter-rgpd').checked;\r\n const cleanPhone = normalizePhone(rawPhone);\r\n\r\n \/\/ 1. V\u00e9rifier qu'une vitrine est choisie\r\n if (!selectedShopId) {\r\n showVoteError(\"Merci de choisir la vitrine pour laquelle vous votez (\u00e9tape 1).\");\r\n return;\r\n }\r\n\r\n \/\/ 2. V\u00e9rifier le nom\r\n if (name.length < 3) {\r\n showVoteError(\"Merci d'indiquer votre nom et pr\u00e9nom complets.\");\r\n return;\r\n }\r\n\r\n \/\/ 3. V\u00e9rifier le format du num\u00e9ro de t\u00e9l\u00e9phone fran\u00e7ais (10 chiffres commen\u00e7ant par 06 ou 07 ou 04)\r\n if (!\/^0[1-9]\\d{8}$\/.test(cleanPhone)) {\r\n showVoteError(\"Merci de saisir un num\u00e9ro de t\u00e9l\u00e9phone valide \u00e0 10 chiffres (ex: 06 12 34 56 78).\");\r\n return;\r\n }\r\n\r\n \/\/ 4. V\u00e9rifier l'email\r\n if (!\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email)) {\r\n showVoteError(\"Merci de saisir une adresse e-mail valide.\");\r\n return;\r\n }\r\n\r\n \/\/ 5. V\u00e9rifier le consentement RGPD\r\n if (!rgpd) {\r\n showVoteError(\"Merci d'accepter le r\u00e8glement du jeu concours pour participer au tirage au sort.\");\r\n return;\r\n }\r\n\r\n \/\/ 6. Contr\u00f4le Anti-Doublon (1 vote par num\u00e9ro ou email)\r\n const duplicateExists = voters.some(\r\n v => normalizePhone(v.phone) === cleanPhone || v.email.toLowerCase() === email\r\n );\r\n if (duplicateExists) {\r\n blockedDuplicates++;\r\n saveStateToStorage();\r\n showVoteError(\"Une participation a d\u00e9j\u00e0 \u00e9t\u00e9 enregistr\u00e9e avec ce num\u00e9ro de t\u00e9l\u00e9phone ou cette adresse e-mail.\");\r\n return;\r\n }\r\n\r\n \/\/ 7. Enregistrer le vote\r\n const shop = shops.find(s => s.id === selectedShopId);\r\n if (!shop) return;\r\n\r\n shop.votes += 1;\r\n const ticketNumber = `CCB-2026-${Math.floor(1000 + Math.random() * 9000)}`;\r\n const nowStr = new Date().toLocaleDateString('fr-FR') + ' \u00e0 ' + new Date().toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });\r\n\r\n const newVoter = {\r\n id: ticketNumber,\r\n name: name,\r\n phone: cleanPhone,\r\n email: email,\r\n shopId: shop.id,\r\n timestamp: nowStr\r\n };\r\n\r\n voters.unshift(newVoter);\r\n saveStateToStorage();\r\n\r\n \/\/ Envoi Webhook optionnel si configur\u00e9 pour WordPress \/ Make \/ Google Sheets\r\n sendVoteToWebhook(newVoter, shop);\r\n\r\n \/\/ 8. Afficher le Ticket d'Or & Lancer les confettis !\r\n document.getElementById('vote-form').classList.add('hidden');\r\n document.getElementById('qr-preselect-banner').classList.add('hidden');\r\n const confirmCard = document.getElementById('vote-confirmation-card');\r\n confirmCard.classList.remove('hidden');\r\n\r\n document.getElementById('confirm-voter-firstname').textContent = name.split(' ')[0];\r\n document.getElementById('confirm-ticket-number').textContent = `#${ticketNumber}`;\r\n document.getElementById('confirm-full-name').textContent = name;\r\n document.getElementById('confirm-shop-name').textContent = `${shop.name} (${shop.street})`;\r\n document.getElementById('confirm-date-time').textContent = nowStr;\r\n\r\n launchConfettiBurst();\r\n playVictoryChime();\r\n window.scrollTo({ top: 100, behavior: 'smooth' });\r\n }\r\n\r\n function showVoteError(msg) {\r\n const errorBox = document.getElementById('vote-error-box');\r\n const errorText = document.getElementById('vote-error-text');\r\n errorText.textContent = msg;\r\n errorBox.classList.remove('hidden');\r\n playBeep(220, 0.15, 'sawtooth');\r\n }\r\n\r\n function resetClientFormForTest() {\r\n document.getElementById('vote-form').reset();\r\n document.getElementById('vote-form').classList.remove('hidden');\r\n document.getElementById('vote-confirmation-card').classList.add('hidden');\r\n document.getElementById('vote-error-box').classList.add('hidden');\r\n clearShopSelection();\r\n }\r\n\r\n function shareContest() {\r\n const shareUrl = 'https:\/\/assistance.ccb01.fr\/concours-vitrines\/';\r\n const tempInput = document.createElement('input');\r\n tempInput.value = `Je viens de voter pour la plus belle vitrine de No\u00ebl de Bourg-en-Bresse avec Centre Commerces Bourg ! Votez aussi et tentez de gagner 3 ch\u00e8ques cadeaux de 75 \u20ac : ${shareUrl}`;\r\n document.body.appendChild(tempInput);\r\n tempInput.select();\r\n document.execCommand('copy');\r\n document.body.removeChild(tempInput);\r\n showToast(\"Message et lien copi\u00e9s ! Vous pouvez les coller dans vos messages.\");\r\n }\r\n\r\n \/***********************************************************************\r\n * 7. COCKPIT BUREAU ADMIN : PODIUM TOP 3, CLASSEMENT & TIRAGE LIVE\r\n ***********************************************************************\/\r\n function renderAdminDashboard() {\r\n const totalVotes = getTotalVotes();\r\n\r\n \/\/ KPIs\r\n document.getElementById('kpi-total-votes').textContent = totalVotes;\r\n document.getElementById('kpi-unique-voters').textContent = voters.length;\r\n document.getElementById('kpi-total-shops').textContent = shops.length;\r\n document.getElementById('kpi-blocked-duplicates').textContent = blockedDuplicates;\r\n\r\n \/\/ Trier les commerces par nombre de votes d\u00e9croissant\r\n const rankedShops = [...shops].sort((a, b) => b.votes - a.votes);\r\n\r\n \/\/ 1. Rendu du Podium Top 3 (2\u00e8me \u00e0 gauche, 1er au centre, 3\u00e8me \u00e0 droite sur desktop)\r\n const first = rankedShops[0];\r\n const second = rankedShops[1];\r\n const third = rankedShops[2];\r\n\r\n const podiumContainer = document.getElementById('podium-container');\r\n const getPct = (v) => totalVotes > 0 ? ((v \/ totalVotes) * 100).toFixed(1) : '0.0';\r\n\r\n podiumContainer.innerHTML = `\r\n \r\n ${second ? `\r\n <div class=\"order-2 md:order-1 rounded-3xl p-5 bg-gradient-to-b from-slate-800\/90 to-slate-900\/95 border border-slate-400\/40 text-center relative shadow-xl\">\r\n <div class=\"w-12 h-12 rounded-2xl bg-slate-300 text-slate-900 font-black text-xl flex items-center justify-center mx-auto -mt-9 shadow-lg border-2 border-white\">\r\n 2<span class=\"text-xs align-top\">e<\/span>\r\n <\/div>\r\n <div class=\"mt-3 text-xs font-bold uppercase tracking-wider text-slate-300\">\ud83e\udd48 M\u00e9daille d'Argent<\/div>\r\n <h4 class=\"text-base sm:text-lg font-black text-white mt-1 truncate\">${escapeHtml(second.name)}<\/h4>\r\n <p class=\"text-xs text-slate-400\">${escapeHtml(second.street)}<\/p>\r\n <div class=\"mt-4 py-2.5 px-4 rounded-2xl bg-black\/40 border border-white\/10 flex items-center justify-between\">\r\n <span class=\"text-xl font-black text-slate-200\">${second.votes} <small class=\"text-xs font-normal\">votes<\/small><\/span>\r\n <span class=\"text-xs font-bold px-2 py-0.5 rounded-full bg-slate-400\/20 text-slate-200\">${getPct(second.votes)}%<\/span>\r\n <\/div>\r\n <\/div>` : ''}\r\n\r\n \r\n ${first ? `\r\n <div class=\"order-1 md:order-2 rounded-3xl p-6 bg-gradient-to-b from-amber-500\/25 via-ccb-pink\/20 to-slate-900\/95 border-2 border-ccb-gold text-center relative shadow-[0_0_40px_rgba(255,215,0,0.25)] md:-translate-y-3\">\r\n <div class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-ccb-gold to-ccb-orange text-black font-black text-2xl flex items-center justify-center mx-auto -mt-11 shadow-xl border-2 border-white\">\r\n <i class=\"fa-solid fa-trophy\"><\/i>\r\n <\/div>\r\n <div class=\"mt-3 text-xs font-extrabold uppercase tracking-widest text-ccb-gold\">\ud83c\udfc6 1er \u2022 Plus Belle Vitrine<\/div>\r\n <h4 class=\"text-lg sm:text-xl font-black text-white mt-1 truncate\">${escapeHtml(first.name)}<\/h4>\r\n <p class=\"text-xs text-amber-200\/80\">${escapeHtml(first.street)}<\/p>\r\n <div class=\"mt-4 py-3 px-4 rounded-2xl bg-black\/50 border border-ccb-gold\/40 flex items-center justify-between\">\r\n <span class=\"text-2xl font-black text-ccb-gold\">${first.votes} <small class=\"text-xs font-normal text-white\">votes<\/small><\/span>\r\n <span class=\"text-xs font-extrabold px-2.5 py-1 rounded-full bg-ccb-gold text-black\">${getPct(first.votes)}%<\/span>\r\n <\/div>\r\n <\/div>` : ''}\r\n\r\n \r\n ${third ? `\r\n <div class=\"order-3 rounded-3xl p-5 bg-gradient-to-b from-amber-900\/40 to-slate-900\/95 border border-amber-600\/40 text-center relative shadow-xl\">\r\n <div class=\"w-12 h-12 rounded-2xl bg-amber-600 text-white font-black text-xl flex items-center justify-center mx-auto -mt-9 shadow-lg border-2 border-amber-300\">\r\n 3<span class=\"text-xs align-top\">e<\/span>\r\n <\/div>\r\n <div class=\"mt-3 text-xs font-bold uppercase tracking-wider text-amber-400\">\ud83e\udd49 M\u00e9daille de Bronze<\/div>\r\n <h4 class=\"text-base sm:text-lg font-black text-white mt-1 truncate\">${escapeHtml(third.name)}<\/h4>\r\n <p class=\"text-xs text-slate-400\">${escapeHtml(third.street)}<\/p>\r\n <div class=\"mt-4 py-2.5 px-4 rounded-2xl bg-black\/40 border border-white\/10 flex items-center justify-between\">\r\n <span class=\"text-xl font-black text-amber-400\">${third.votes} <small class=\"text-xs font-normal text-white\">votes<\/small><\/span>\r\n <span class=\"text-xs font-bold px-2 py-0.5 rounded-full bg-amber-500\/20 text-amber-300\">${getPct(third.votes)}%<\/span>\r\n <\/div>\r\n <\/div>` : ''}\r\n `;\r\n\r\n \/\/ 2. Rendu du Classement Complet avec barres de progression\r\n const maxVotes = rankedShops.length > 0 ? Math.max(rankedShops[0].votes, 1) : 1;\r\n const leaderboardEl = document.getElementById('admin-leaderboard-list');\r\n leaderboardEl.innerHTML = rankedShops.map((shop, idx) => {\r\n const rank = idx + 1;\r\n const widthPct = Math.round((shop.votes \/ maxVotes) * 100);\r\n const sharePct = getPct(shop.votes);\r\n let badgeClass = 'bg-white\/10 text-slate-300';\r\n if (rank === 1) badgeClass = 'bg-ccb-gold text-black font-black';\r\n if (rank === 2) badgeClass = 'bg-slate-300 text-black font-black';\r\n if (rank === 3) badgeClass = 'bg-amber-600 text-white font-black';\r\n\r\n return `\r\n <div class=\"p-3 rounded-2xl bg-slate-900\/75 border border-white\/10 space-y-2\">\r\n <div class=\"flex items-center justify-between gap-2\">\r\n <div class=\"flex items-center gap-2.5 min-w-0\">\r\n <span class=\"w-6 h-6 rounded-lg text-xs flex items-center justify-center shrink-0 ${badgeClass}\">\r\n ${rank}\r\n <\/span>\r\n <div class=\"min-w-0\">\r\n <div class=\"text-xs sm:text-sm font-bold text-white truncate\">${escapeHtml(shop.name)}<\/div>\r\n <div class=\"text-[11px] text-slate-400\">${escapeHtml(shop.street)} \u2022 ${escapeHtml(shop.category)}<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"text-right shrink-0\">\r\n <span class=\"text-sm font-black text-white\">${shop.votes}<\/span>\r\n <span class=\"text-xs text-slate-400\"> (${sharePct}%)<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"w-full h-2 rounded-full bg-black\/60 overflow-hidden\">\r\n <div class=\"h-full rounded-full ${\r\n rank <= 3 ? 'bg-gradient-to-r from-ccb-pink via-ccb-orange to-ccb-gold' : 'bg-ccb-pink\/70'\r\n } transition-all duration-500\" style=\"width: ${widthPct}%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('');\r\n\r\n \/\/ 3. Rendu des derniers votants\r\n const votersListEl = document.getElementById('admin-recent-voters');\r\n votersListEl.innerHTML = voters.slice(0, 25).map(v => {\r\n const shop = shops.find(s => s.id === v.shopId);\r\n const shopName = shop ? shop.name : 'Commerce CCB';\r\n const displayPhone = showUnmaskedPhones\r\n ? formatPhoneReadable(v.phone)\r\n : maskPhone(v.phone);\r\n\r\n return `\r\n <div class=\"p-3 rounded-2xl bg-slate-900\/75 border border-white\/10 flex items-center justify-between gap-2 text-xs\">\r\n <div class=\"min-w-0\">\r\n <div class=\"font-bold text-white truncate\">\r\n ${escapeHtml(v.name)}\r\n <span class=\"ml-1 font-mono text-[10px] text-ccb-gold\">${v.id}<\/span>\r\n <\/div>\r\n <div class=\"text-[11px] text-slate-400 truncate\">\r\n <i class=\"fa-solid fa-heart text-ccb-pink mr-1\"><\/i>${escapeHtml(shopName)}\r\n <\/div>\r\n <\/div>\r\n <div class=\"text-right shrink-0\">\r\n <div class=\"font-mono text-slate-200 font-semibold\">${displayPhone}<\/div>\r\n <div class=\"text-[10px] text-slate-500\">${v.timestamp}<\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('');\r\n\r\n \/\/ 4. Rendu des 3 Gagnants du Tirage au Sort (3 x 75 \u20ac)\r\n renderWinnersCards();\r\n }\r\n\r\n function formatPhoneReadable(p) {\r\n const clean = normalizePhone(p);\r\n return clean.replace(\/(\\d{2})(?=\\d)\/g, '$1 ').trim();\r\n }\r\n\r\n function maskPhone(p) {\r\n const clean = normalizePhone(p);\r\n if (clean.length < 10) return clean;\r\n return `${clean.slice(0, 2)} \u2022\u2022 \u2022\u2022 ${clean.slice(6, 8)} ${clean.slice(8, 10)}`;\r\n }\r\n\r\n function toggleMaskPhones() {\r\n showUnmaskedPhones = !showUnmaskedPhones;\r\n const btn = document.getElementById('btn-mask-phones');\r\n btn.innerHTML = showUnmaskedPhones\r\n ? '<i class=\"fa-regular fa-eye-slash text-ccb-gold\"><\/i> Masquer N\u00b0'\r\n : '<i class=\"fa-regular fa-eye\"><\/i> Afficher N\u00b0';\r\n renderAdminDashboard();\r\n }\r\n\r\n \/***********************************************************************\r\n * 8. MACHINE \u00c0 TIRAGE AU SORT LIVE DES 3 CH\u00c8QUES CADEAUX DE 75 \u20ac\r\n ***********************************************************************\/\r\n function renderWinnersCards() {\r\n const grid = document.getElementById('winners-cards-grid');\r\n const nextIndex = drawnWinners.findIndex(w => w === null);\r\n const btnDraw = document.getElementById('btn-draw-next');\r\n const btnDrawText = document.getElementById('btn-draw-next-text');\r\n\r\n if (nextIndex === -1) {\r\n btnDrawText.textContent = \"Les 3 Gagnants de 75 \u20ac ont \u00e9t\u00e9 tir\u00e9s au sort !\";\r\n btnDraw.classList.add('opacity-60');\r\n } else {\r\n btnDrawText.textContent = `\ud83c\udfb0 Lancer le tirage du Gagnant #${nextIndex + 1} (Ch\u00e8que 75 \u20ac)`;\r\n btnDraw.classList.remove('opacity-60');\r\n }\r\n\r\n grid.innerHTML = [0, 1, 2].map(idx => {\r\n const winner = drawnWinners[idx];\r\n if (!winner) {\r\n return `\r\n <div class=\"rounded-2xl p-5 bg-black\/40 border-2 border-dashed border-white\/15 flex flex-col items-center justify-center text-center min-h-[175px]\">\r\n <div class=\"w-11 h-11 rounded-full bg-white\/5 text-ccb-gold flex items-center justify-center text-lg mb-2\">\r\n <i class=\"fa-solid fa-gift\"><\/i>\r\n <\/div>\r\n <div class=\"text-xs font-bold uppercase tracking-wider text-slate-400\">Ch\u00e8que Cadeau #${idx + 1}<\/div>\r\n <div class=\"text-lg font-black text-ccb-gold\">Valeur 75 \u20ac<\/div>\r\n <div class=\"text-[11px] text-slate-500 mt-1\">En attente du tirage au sort...<\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n const shop = shops.find(s => s.id === winner.shopId);\r\n const shopName = shop ? shop.name : 'Commerce CCB';\r\n\r\n return `\r\n <div class=\"golden-ticket rounded-2xl p-5 text-left relative shadow-2xl flex flex-col justify-between min-h-[175px]\">\r\n <div>\r\n <div class=\"flex items-center justify-between border-b border-black\/15 pb-2 mb-2.5\">\r\n <span class=\"px-2.5 py-0.5 rounded-full bg-black text-ccb-gold text-[10px] font-black uppercase tracking-wider\">\r\n \ud83c\udfc6 Gagnant #${idx + 1} \u2022 75 \u20ac\r\n <\/span>\r\n <span class=\"font-mono text-xs font-bold text-black\/80\">#${winner.id}<\/span>\r\n <\/div>\r\n <div class=\"text-lg font-black text-black truncate\">${escapeHtml(winner.name)}<\/div>\r\n <div class=\"text-xs font-bold text-ccb-pinkDark mt-0.5\">\r\n <i class=\"fa-solid fa-phone mr-1\"><\/i>${formatPhoneReadable(winner.phone)}\r\n <\/div>\r\n <div class=\"text-[11px] text-black\/75 truncate\">\r\n <i class=\"fa-regular fa-envelope mr-1\"><\/i>${escapeHtml(winner.email)}\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-3 pt-2 border-t border-black\/15 flex items-center justify-between text-[11px] font-bold text-black\/80\">\r\n <span class=\"truncate\"><i class=\"fa-solid fa-store mr-1\"><\/i>Vote : ${escapeHtml(shopName)}<\/span>\r\n <button onclick=\"redrawSpecificSlot(${idx})\" title=\"Retirer au sort si absent\/invalide\" class=\"text-black underline hover:text-ccb-pinkDark ml-2 shrink-0\">\r\n Retirer\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('');\r\n }\r\n\r\n function triggerLiveDraw() {\r\n if (isDrawing) return;\r\n\r\n const nextSlotIndex = drawnWinners.findIndex(w => w === null);\r\n if (nextSlotIndex === -1) {\r\n showToast(\"Les 3 gagnants sont d\u00e9j\u00e0 tir\u00e9s ! Cliquez sur \u00ab R\u00e9initialiser \u00bb pour recommencer.\");\r\n return;\r\n }\r\n\r\n \/\/ Filtrer les votants qui n'ont pas encore gagn\u00e9\r\n const alreadyWonIds = drawnWinners.filter(Boolean).map(w => w.id);\r\n const eligibleVoters = voters.filter(v => !alreadyWonIds.includes(v.id));\r\n\r\n if (eligibleVoters.length === 0) {\r\n showToast(\"Pas assez de votants uniques pour tirer un nouveau gagnant.\");\r\n return;\r\n }\r\n\r\n isDrawing = true;\r\n const mainNameEl = document.getElementById('slot-main-name');\r\n const subInfoEl = document.getElementById('slot-sub-info');\r\n const statusLabel = document.getElementById('slot-status-label');\r\n\r\n statusLabel.innerHTML = `<i class=\"fa-solid fa-spinner fa-spin mr-1\"><\/i> Brasage \u00e9lectronique des ${eligibleVoters.length} tickets en cours...`;\r\n\r\n let ticks = 0;\r\n const totalTicks = 28; \/\/ Environ 3 secondes de suspense\r\n const interval = setInterval(() => {\r\n const randomPreview = eligibleVoters[Math.floor(Math.random() * eligibleVoters.length)];\r\n mainNameEl.textContent = randomPreview.name;\r\n subInfoEl.textContent = `Ticket #${randomPreview.id} \u2022 ${maskPhone(randomPreview.phone)}`;\r\n playBeep(320 + (ticks * 12), 0.04, 'triangle');\r\n ticks++;\r\n\r\n if (ticks >= totalTicks) {\r\n clearInterval(interval);\r\n\r\n \/\/ S\u00e9lection al\u00e9atoire cryptographique finale\r\n const randomBuffer = new Uint32Array(1);\r\n window.crypto.getRandomValues(randomBuffer);\r\n const winnerIndex = randomBuffer[0] % eligibleVoters.length;\r\n const finalWinner = eligibleVoters[winnerIndex];\r\n\r\n drawnWinners[nextSlotIndex] = finalWinner;\r\n saveStateToStorage();\r\n\r\n const shop = shops.find(s => s.id === finalWinner.shopId);\r\n mainNameEl.innerHTML = `<span class=\"text-ccb-gold\">\ud83c\udf89 ${escapeHtml(finalWinner.name)} \ud83c\udf89<\/span>`;\r\n subInfoEl.textContent = `Gagnant #${nextSlotIndex + 1} (Ch\u00e8que 75 \u20ac) \u2022 T\u00e9l : ${formatPhoneReadable(finalWinner.phone)} \u2022 A vot\u00e9 pour : ${shop ? shop.name : 'CCB'}`;\r\n statusLabel.innerHTML = `<i class=\"fa-solid fa-crown mr-1\"><\/i> Gagnant #${nextSlotIndex + 1} officiellement d\u00e9sign\u00e9 !`;\r\n\r\n renderWinnersCards();\r\n launchConfettiBurst();\r\n playVictoryChime();\r\n isDrawing = false;\r\n }\r\n }, 95);\r\n }\r\n\r\n function redrawSpecificSlot(slotIndex) {\r\n if (isDrawing) return;\r\n drawnWinners[slotIndex] = null;\r\n saveStateToStorage();\r\n renderWinnersCards();\r\n triggerLiveDraw();\r\n }\r\n\r\n function resetWinnersDraw() {\r\n if (isDrawing) return;\r\n drawnWinners = [null, null, null];\r\n saveStateToStorage();\r\n document.getElementById('slot-main-name').textContent = 'Cliquez sur \u00ab Tirer un Gagnant \u00bb';\r\n document.getElementById('slot-sub-info').textContent = '3 Ch\u00e8ques Cadeaux Centre Commerces Bourg de 75 \u20ac en jeu';\r\n document.getElementById('slot-status-label').innerHTML = '<i class=\"fa-solid fa-ticket mr-1\"><\/i> Pr\u00eat \u00e0 tirer au sort parmi les participants valid\u00e9s';\r\n renderWinnersCards();\r\n showToast(\"L'urne de tirage au sort a \u00e9t\u00e9 r\u00e9initialis\u00e9e.\");\r\n }\r\n\r\n \/***********************************************************************\r\n * 9. OUTILS BUREAU : SIMULATEUR DE VOTES, AJOUT BOUTIQUE, EXPORT CSV\r\n ***********************************************************************\/\r\n function addSimulatedBatchVotes(count) {\r\n const firstNames = ['Camille', 'Lucas', 'Chlo\u00e9', 'Antoine', 'L\u00e9a', 'Hugo', 'Manon', 'Maxime', 'Sarah', 'Thomas', 'Juliette', 'Romain', 'In\u00e8s', 'Alexandre', 'Clara'];\r\n const lastNames = ['Martin', 'Bernard', 'Dubois', 'Moreau', 'Laurent', 'Simon', 'Michel', 'Lefebvre', 'Roux', 'David', 'Bertrand', 'Morel', 'Girard', 'Lambert'];\r\n\r\n for (let i = 0; i < count; i++) {\r\n const rShop = shops[Math.floor(Math.random() * shops.length)];\r\n rShop.votes += 1;\r\n\r\n const fn = firstNames[Math.floor(Math.random() * firstNames.length)];\r\n const ln = lastNames[Math.floor(Math.random() * lastNames.length)];\r\n const randDigits = Math.floor(10000000 + Math.random() * 89999999);\r\n const ticket = `CCB-2026-${Math.floor(1000 + Math.random() * 9000)}`;\r\n\r\n voters.unshift({\r\n id: ticket,\r\n name: `${fn} ${ln}`,\r\n phone: `06${randDigits}`,\r\n email: `${fn.toLowerCase()}.${ln.toLowerCase()}${Math.floor(Math.random()*99)}@email.fr`,\r\n shopId: rShop.id,\r\n timestamp: 'Vote QR D\u00e9mo'\r\n });\r\n }\r\n\r\n saveStateToStorage();\r\n renderAdminDashboard();\r\n playBeep(660, 0.08, 'sine');\r\n showToast(`+${count} nouveaux votes clients simul\u00e9s avec succ\u00e8s !`);\r\n }\r\n\r\n function toggleAddShopForm() {\r\n const box = document.getElementById('add-shop-form-box');\r\n box.classList.toggle('hidden');\r\n }\r\n\r\n function addCustomShop() {\r\n const nameInput = document.getElementById('new-shop-name');\r\n const streetInput = document.getElementById('new-shop-street');\r\n const catInput = document.getElementById('new-shop-category');\r\n\r\n const name = nameInput.value.trim();\r\n const street = streetInput.value.trim() || 'Centre-Ville';\r\n const category = catInput.value.trim() || 'Commerce Adh\u00e9rent';\r\n\r\n if (!name) {\r\n showToast(\"Veuillez saisir le nom de la boutique.\");\r\n return;\r\n }\r\n\r\n const newId = `ccb-${Date.now()}`;\r\n shops.push({\r\n id: newId,\r\n name: name,\r\n street: street,\r\n category: category,\r\n icon: 'fa-store',\r\n votes: 0\r\n });\r\n\r\n nameInput.value = '';\r\n streetInput.value = '';\r\n catInput.value = '';\r\n toggleAddShopForm();\r\n\r\n saveStateToStorage();\r\n renderAdminDashboard();\r\n renderClientShops();\r\n populateQrModalDropdown();\r\n showToast(`Boutique \u00ab ${name} \u00bb ajout\u00e9e \u00e0 la liste !`);\r\n }\r\n\r\n function exportDataCSV() {\r\n let csvContent = \"\\uFEFF\"; \/\/ BOM UTF-8 pour Excel\r\n csvContent += \"=== CLASSEMENT DES COMMERCES (CONCOURS VITRINES CCB01) ===\\r\\n\";\r\n csvContent += \"Rang;ID Commerce;Nom de la Boutique;Rue;Categorie;Nombre de Votes\\r\\n\";\r\n\r\n const ranked = [...shops].sort((a, b) => b.votes - a.votes);\r\n ranked.forEach((s, idx) => {\r\n csvContent += `${idx + 1};${s.id};\"${s.name.replace(\/\"\/g, '\"\"')}\";\"${s.street}\";\"${s.category}\";${s.votes}\\r\\n`;\r\n });\r\n\r\n csvContent += \"\\r\\n=== LISTE DES CLIENTS VOTANTS (TIRAGE AU SORT 3x 75 EUR) ===\\r\\n\";\r\n csvContent += \"Ticket;Nom et Prenom;Telephone;Email;Boutique Votee;Horodatage\\r\\n\";\r\n\r\n voters.forEach(v => {\r\n const shop = shops.find(s => s.id === v.shopId);\r\n const shopName = shop ? shop.name : v.shopId;\r\n csvContent += `${v.id};\"${v.name.replace(\/\"\/g, '\"\"')}\";\"${v.phone}\";\"${v.email}\";\"${shopName.replace(\/\"\/g, '\"\"')}\";\"${v.timestamp}\"\\r\\n`;\r\n });\r\n\r\n const blob = new Blob([csvContent], { type: 'text\/csv;charset=utf-8;' });\r\n const url = URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.download = `resultats_vitrines_ccb01_${new Date().toISOString().slice(0,10)}.csv`;\r\n document.body.appendChild(a);\r\n a.click();\r\n document.body.removeChild(a);\r\n URL.revokeObjectURL(url);\r\n showToast(\"Export CSV t\u00e9l\u00e9charg\u00e9 (pr\u00eat pour Excel) !\");\r\n }\r\n\r\n \/***********************************************************************\r\n * 10. MODALS QR CODES & WORDPRESS ELEMENTOR\r\n ***********************************************************************\/\r\n function populateQrModalDropdown() {\r\n const sel = document.getElementById('qr-shop-selector');\r\n if (!sel) return;\r\n sel.innerHTML = '<option value=\"ALL\">\ud83c\udf10 QR Code G\u00e9n\u00e9ral (Tous les commerces - assistance.ccb01.fr)<\/option>';\r\n [...shops].sort((a, b) => a.name.localeCompare(b.name)).forEach(s => {\r\n const opt = document.createElement('option');\r\n opt.value = s.id;\r\n opt.textContent = `\ud83c\udfea QR Pr\u00e9-cibl\u00e9 : ${s.name} (${s.street})`;\r\n sel.appendChild(opt);\r\n });\r\n }\r\n\r\n function updateQrCodePreview() {\r\n const val = document.getElementById('qr-shop-selector').value;\r\n const img = document.getElementById('qr-image-preview');\r\n const urlText = document.getElementById('qr-url-preview');\r\n const caption = document.getElementById('qr-caption-title');\r\n\r\n let targetUrl = 'https:\/\/assistance.ccb01.fr\/concours-vitrines\/';\r\n if (val !== 'ALL') {\r\n targetUrl += `?commerce=${encodeURIComponent(val)}`;\r\n const shop = shops.find(s => s.id === val);\r\n caption.textContent = shop ? `Votez pour : ${shop.name}` : 'QR Code Vitrine';\r\n } else {\r\n caption.textContent = 'Scan Officiel \u2022 Concours des Vitrines CCB01';\r\n }\r\n\r\n urlText.textContent = targetUrl;\r\n img.src = `https:\/\/api.qrserver.com\/v1\/create-qr-code\/?size=220x220&data=${encodeURIComponent(targetUrl)}&color=11131A`;\r\n }\r\n\r\n function openQrModal() {\r\n populateQrModalDropdown();\r\n updateQrCodePreview();\r\n document.getElementById('modal-qr').classList.remove('hidden');\r\n }\r\n\r\n function closeQrModal() {\r\n document.getElementById('modal-qr').classList.add('hidden');\r\n }\r\n\r\n function copyQrLink() {\r\n const url = document.getElementById('qr-url-preview').textContent.trim();\r\n const temp = document.createElement('input');\r\n temp.value = url;\r\n document.body.appendChild(temp);\r\n temp.select();\r\n document.execCommand('copy');\r\n document.body.removeChild(temp);\r\n showToast(\"Lien QR Code copi\u00e9 dans le presse-papiers !\");\r\n }\r\n\r\n function openWordpressModal() {\r\n document.getElementById('modal-wp').classList.remove('hidden');\r\n }\r\n\r\n function closeWordpressModal() {\r\n document.getElementById('modal-wp').classList.add('hidden');\r\n }\r\n\r\n function saveWebhookUrl() {\r\n const val = document.getElementById('webhook-url-input').value.trim();\r\n try {\r\n localStorage.setItem('ccb01_webhook_url', val);\r\n } catch (e) {}\r\n showToast(val ? \"Webhook centralis\u00e9 connect\u00e9 !\" : \"Webhook d\u00e9sactiv\u00e9.\");\r\n }\r\n\r\n function sendVoteToWebhook(voter, shop) {\r\n try {\r\n const webhookUrl = localStorage.getItem('ccb01_webhook_url');\r\n if (webhookUrl && webhookUrl.startsWith('http')) {\r\n fetch(webhookUrl, {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/json' },\r\n body: JSON.stringify({\r\n ticket: voter.id,\r\n nom: voter.name,\r\n telephone: voter.phone,\r\n email: voter.email,\r\n commerce_id: shop.id,\r\n commerce_nom: shop.name,\r\n commerce_rue: shop.street,\r\n date: voter.timestamp\r\n })\r\n }).catch(() => {});\r\n }\r\n } catch (e) {}\r\n }\r\n\r\n \/***********************************************************************\r\n * 11. EFFETS SONORES SYNTH\u00c9TIQUES (WEB AUDIO API - SANS FICHIER EXTERNE)\r\n ***********************************************************************\/\r\n let audioCtx = null;\r\n\r\n function getAudioContext() {\r\n if (!audioCtx) {\r\n const AudioContextClass = window.AudioContext || window.webkitAudioContext;\r\n if (AudioContextClass) audioCtx = new AudioContextClass();\r\n }\r\n return audioCtx;\r\n }\r\n\r\n function toggleSound() {\r\n soundEnabled = !soundEnabled;\r\n const icon = document.getElementById('icon-sound');\r\n icon.className = soundEnabled\r\n ? 'fa-solid fa-volume-high text-ccb-gold text-xs'\r\n : 'fa-solid fa-volume-xmark text-slate-400 text-xs';\r\n showToast(soundEnabled ? \"Effets sonores activ\u00e9s\" : \"Effets sonores coup\u00e9s\");\r\n }\r\n\r\n function playBeep(freq = 440, duration = 0.08, type = 'sine') {\r\n if (!soundEnabled) return;\r\n try {\r\n const ctx = getAudioContext();\r\n if (!ctx) return;\r\n if (ctx.state === 'suspended') ctx.resume();\r\n\r\n const osc = ctx.createOscillator();\r\n const gain = ctx.createGain();\r\n osc.type = type;\r\n osc.frequency.setValueAtTime(freq, ctx.currentTime);\r\n\r\n gain.gain.setValueAtTime(0.08, ctx.currentTime);\r\n gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration);\r\n\r\n osc.connect(gain);\r\n gain.connect(ctx.destination);\r\n\r\n osc.start();\r\n osc.stop(ctx.currentTime + duration);\r\n } catch (e) {}\r\n }\r\n\r\n function playVictoryChime() {\r\n if (!soundEnabled) return;\r\n const notes = [523.25, 659.25, 783.99, 1046.50]; \/\/ Do Mi Sol Do\r\n notes.forEach((freq, idx) => {\r\n setTimeout(() => playBeep(freq, 0.18, 'triangle'), idx * 110);\r\n });\r\n }\r\n\r\n \/***********************************************************************\r\n * 12. COMPTE \u00c0 REBOURS & ANIMATIONS CANVAS (NEIGE DOR\u00c9E + CONFETTIS)\r\n ***********************************************************************\/\r\n function startCountdownTimer() {\r\n \/\/ Cible : 24 D\u00e9cembre \u00e0 19h00\r\n const now = new Date();\r\n const targetYear = now.getMonth() === 11 && now.getDate() > 24 ? now.getFullYear() + 1 : now.getFullYear();\r\n const targetDate = new Date(targetYear, 11, 24, 19, 0, 0).getTime();\r\n\r\n function updateTimer() {\r\n const current = Date.now();\r\n const diff = Math.max(0, targetDate - current);\r\n const d = Math.floor(diff \/ (1000 * 60 * 60 * 24));\r\n const h = Math.floor((diff \/ (1000 * 60 * 60)) % 24);\r\n const m = Math.floor((diff \/ 1000 \/ 60) % 60);\r\n const s = Math.floor((diff \/ 1000) % 60);\r\n\r\n const el = document.getElementById('countdown-display');\r\n if (el) {\r\n el.textContent = `${d}j ${String(h).padStart(2, '0')}h ${String(m).padStart(2, '0')}m ${String(s).padStart(2, '0')}s`;\r\n }\r\n }\r\n updateTimer();\r\n setInterval(updateTimer, 1000);\r\n }\r\n\r\n function initFestiveBackgroundCanvas() {\r\n const canvas = document.getElementById('festive-canvas');\r\n if (!canvas) return;\r\n const ctx = canvas.getContext('2d');\r\n let width, height;\r\n let particles = [];\r\n\r\n function resize() {\r\n width = canvas.width = window.innerWidth;\r\n height = canvas.height = window.innerHeight;\r\n }\r\n window.addEventListener('resize', resize);\r\n resize();\r\n\r\n const count = Math.min(55, Math.floor(window.innerWidth \/ 24));\r\n const colors = ['#FFD700', '#FFFFFF', '#F58220', '#E50051'];\r\n\r\n for (let i = 0; i < count; i++) {\r\n particles.push({\r\n x: Math.random() * width,\r\n y: Math.random() * height,\r\n r: Math.random() * 2.4 + 0.8,\r\n speedY: Math.random() * 0.55 + 0.2,\r\n speedX: (Math.random() - 0.5) * 0.35,\r\n color: colors[Math.floor(Math.random() * colors.length)],\r\n alpha: Math.random() * 0.65 + 0.15\r\n });\r\n }\r\n\r\n function animate() {\r\n ctx.clearRect(0, 0, width, height);\r\n for (let p of particles) {\r\n p.y += p.speedY;\r\n p.x += p.speedX;\r\n if (p.y > height) {\r\n p.y = -5;\r\n p.x = Math.random() * width;\r\n }\r\n if (p.x > width) p.x = 0;\r\n if (p.x < 0) p.x = width;\r\n\r\n ctx.save();\r\n ctx.globalAlpha = p.alpha;\r\n ctx.fillStyle = p.color;\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);\r\n ctx.fill();\r\n ctx.restore();\r\n }\r\n requestAnimationFrame(animate);\r\n }\r\n animate();\r\n }\r\n\r\n function launchConfettiBurst() {\r\n const canvas = document.getElementById('confetti-canvas');\r\n if (!canvas) return;\r\n const ctx = canvas.getContext('2d');\r\n canvas.width = window.innerWidth;\r\n canvas.height = window.innerHeight;\r\n\r\n const pieces = [];\r\n const colors = ['#E50051', '#F58220', '#FFD700', '#FFFFFF', '#FF2A74'];\r\n\r\n for (let i = 0; i < 110; i++) {\r\n pieces.push({\r\n x: canvas.width \/ 2,\r\n y: canvas.height \/ 2,\r\n vx: (Math.random() - 0.5) * 18,\r\n vy: (Math.random() - 0.85) * 18,\r\n size: Math.random() * 8 + 4,\r\n color: colors[Math.floor(Math.random() * colors.length)],\r\n rot: Math.random() * 360,\r\n vRot: (Math.random() - 0.5) * 12,\r\n gravity: 0.32,\r\n opacity: 1\r\n });\r\n }\r\n\r\n function frame() {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n let active = false;\r\n\r\n for (let p of pieces) {\r\n p.x += p.vx;\r\n p.y += p.vy;\r\n p.vy += p.gravity;\r\n p.rot += p.vRot;\r\n p.opacity -= 0.008;\r\n\r\n if (p.opacity > 0 && p.y < canvas.height + 30) {\r\n active = true;\r\n ctx.save();\r\n ctx.globalAlpha = Math.max(0, p.opacity);\r\n ctx.translate(p.x, p.y);\r\n ctx.rotate((p.rot * Math.PI) \/ 180);\r\n ctx.fillStyle = p.color;\r\n ctx.fillRect(-p.size \/ 2, -p.size \/ 2, p.size, p.size * 0.6);\r\n ctx.restore();\r\n }\r\n }\r\n\r\n if (active) {\r\n requestAnimationFrame(frame);\r\n } else {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n }\r\n }\r\n frame();\r\n }\r\n\r\n \/***********************************************************************\r\n * 13. UTILITAIRES DIVERS\r\n ***********************************************************************\/\r\n function showToast(msg) {\r\n const toast = document.getElementById('toast-notification');\r\n const text = document.getElementById('toast-text');\r\n text.textContent = msg;\r\n toast.classList.remove('hidden');\r\n clearTimeout(window._toastTimer);\r\n window._toastTimer = setTimeout(() => {\r\n toast.classList.add('hidden');\r\n }, 3400);\r\n }\r\n\r\n function escapeHtml(str) {\r\n return String(str)\r\n .replace(\/&\/g, '&')\r\n .replace(\/<\/g, '<')\r\n .replace(\/>\/g, '>')\r\n .replace(\/\"\/g, '"')\r\n .replace(\/'\/g, ''');\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Concours des Plus Belles Vitrines de No\u00ebl | Centre Commerces Bourg (CCB01) D\u00e9mo Bureau CCB01 assistance.ccb01.fr \u2022 Animation Vitrines de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-181","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/assistance.ccb01.fr\/index.php?rest_route=\/wp\/v2\/pages\/181","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/assistance.ccb01.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/assistance.ccb01.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/assistance.ccb01.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/assistance.ccb01.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=181"}],"version-history":[{"count":18,"href":"https:\/\/assistance.ccb01.fr\/index.php?rest_route=\/wp\/v2\/pages\/181\/revisions"}],"predecessor-version":[{"id":210,"href":"https:\/\/assistance.ccb01.fr\/index.php?rest_route=\/wp\/v2\/pages\/181\/revisions\/210"}],"wp:attachment":[{"href":"https:\/\/assistance.ccb01.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}