{"id":18,"date":"2025-11-25T13:54:10","date_gmt":"2025-11-25T13:54:10","guid":{"rendered":"https:\/\/lasubvision.com\/?page_id=18"},"modified":"2026-01-12T22:25:10","modified_gmt":"2026-01-12T22:25:10","slug":"merch","status":"publish","type":"page","link":"https:\/\/lasubvision.com\/?page_id=18","title":{"rendered":"Merch"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \r\n Merch - La Subvision<\/title>\r\n <meta name=\"description\" content=\"Merch\">\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.3\/css\/all.min.css\">\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=Creepster&family=Russo+One&family=Orbitron:wght@400;700;900&family=Graduate&display=swap\" rel=\"stylesheet\">\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n primary: \"#000000\",\r\n secondary: \"#111111\",\r\n accent: \"#dc2626\",\r\n light: \"#1a1a1a\"\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n <style>\r\n \/* POLICE UNDERGROUND - RUSSO ONE *\/\r\n body {\r\n font-family: \"Russo One\", \"Orbitron\", \"Graduate\", sans-serif;\r\n letter-spacing: 0.05em;\r\n color: #ffffff;\r\n background-color: #000000;\r\n overflow-x: hidden;\r\n font-weight: 400;\r\n }\r\n \r\n \/* Appliquer la police \u00e0 tous les \u00e9l\u00e9ments texte SAUF les ic\u00f4nes *\/\r\n body *:not(i):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*=\"icon\"]) {\r\n font-family: \"Russo One\", \"Orbitron\", \"Graduate\", sans-serif !important;\r\n }\r\n \r\n \/* Titres principaux avec Orbitron (plus futuriste) *\/\r\n h1, h2, h3 {\r\n font-family: \"Orbitron\", \"Russo One\", sans-serif !important;\r\n font-weight: 900;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n }\r\n \r\n \/* Boutons avec Graduate (plus bold) *\/\r\n .btn-primary, .btn-secondary {\r\n font-family: \"Graduate\", \"Russo One\", sans-serif !important;\r\n font-weight: 400;\r\n letter-spacing: 0.1em;\r\n }\r\n \r\n \/* Conserver Font Awesome pour les ic\u00f4nes *\/\r\n i, .fa, .fas, .far, .fal, .fab,\r\n [class*=\"fa-\"] {\r\n font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands' !important;\r\n font-style: normal !important;\r\n }\r\n \r\n \/* Animations *\/\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(20px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n @keyframes slideIn {\r\n from { transform: translateX(-100%); }\r\n to { transform: translateX(0); }\r\n }\r\n .fade-in {\r\n animation: fadeIn 0.6s ease-out forwards;\r\n }\r\n .slide-in {\r\n animation: slideIn 0.3s ease-out forwards;\r\n }\r\n \r\n \/* Am\u00e9liorations UI *\/\r\n .product-card {\r\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n background: linear-gradient(145deg, #111111, #0a0a0a);\r\n border: 1px solid #222222;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n .product-card:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);\r\n border-color: #dc2626;\r\n }\r\n .product-image {\r\n position: relative;\r\n overflow: hidden;\r\n cursor: pointer;\r\n }\r\n .product-image img {\r\n transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n .product-image:hover img {\r\n transform: scale(1.05);\r\n }\r\n \r\n \/* Boutons am\u00e9lior\u00e9s *\/\r\n .btn-primary {\r\n background: linear-gradient(135deg, #dc2626, #b91c1c);\r\n border: none;\r\n color: white;\r\n padding: 12px 30px;\r\n border-radius: 8px;\r\n font-weight: bold;\r\n font-size: 1.1rem;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n overflow: hidden;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n }\r\n .btn-primary:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 10px 20px rgba(220, 38, 38, 0.3);\r\n background: linear-gradient(135deg, #b91c1c, #991b1b);\r\n }\r\n .btn-primary:active {\r\n transform: translateY(0);\r\n }\r\n .btn-secondary {\r\n background: transparent;\r\n border: 2px solid white;\r\n color: white;\r\n padding: 12px 30px;\r\n border-radius: 8px;\r\n font-weight: bold;\r\n font-size: 1.1rem;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n }\r\n .btn-secondary:hover {\r\n background: white;\r\n color: black;\r\n border-color: white;\r\n }\r\n \r\n \/* SECTION QUANTIT\u00c9 SIMPLIFI\u00c9E *\/\r\n .quantity-control {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n .quantity-btn {\r\n cursor: pointer;\r\n background: #333;\r\n border: none;\r\n width: 40px;\r\n height: 40px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n color: white;\r\n border-radius: 8px;\r\n transition: all 0.2s;\r\n }\r\n .quantity-btn:hover {\r\n background: #444;\r\n }\r\n .quantity-display {\r\n width: 60px;\r\n text-align: center;\r\n font-size: 1.2rem;\r\n font-weight: bold;\r\n color: white;\r\n background: transparent;\r\n border: none;\r\n }\r\n \r\n \/* Options de taille am\u00e9lior\u00e9es *\/\r\n .size-option {\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n border: 2px solid #4b5563;\r\n padding: 12px 20px;\r\n border-radius: 8px;\r\n background: #1a1a1a;\r\n color: white;\r\n font-weight: bold;\r\n min-width: 60px;\r\n text-align: center;\r\n }\r\n .size-option.selected {\r\n background: #dc2626;\r\n border-color: #dc2626;\r\n color: white;\r\n transform: scale(1.05);\r\n box-shadow: 0 5px 15px rgba(220, 38, 38, 0.3);\r\n }\r\n \r\n \/* Notification *\/\r\n .notification {\r\n position: fixed;\r\n top: 100px;\r\n right: 20px;\r\n background: #dc2626;\r\n color: white;\r\n padding: 15px 25px;\r\n border-radius: 8px;\r\n box-shadow: 0 10px 25px rgba(220, 38, 38, 0.3);\r\n z-index: 2000;\r\n transform: translateX(150%);\r\n transition: transform 0.3s ease;\r\n }\r\n .notification.show {\r\n transform: translateX(0);\r\n }\r\n \r\n \/* Badge stock *\/\r\n .stock-badge {\r\n position: absolute;\r\n top: 15px;\r\n left: 15px;\r\n background: #dc2626;\r\n color: white;\r\n padding: 5px 12px;\r\n border-radius: 4px;\r\n font-size: 0.8rem;\r\n font-weight: bold;\r\n z-index: 2;\r\n }\r\n \r\n \/* Prix *\/\r\n .price-tag {\r\n font-size: 1.8rem;\r\n font-weight: bold;\r\n color: #dc2626;\r\n position: relative;\r\n display: inline-block;\r\n }\r\n .price-tag::after {\r\n content: '\u20ac';\r\n font-size: 1.2rem;\r\n margin-left: 2px;\r\n }\r\n \r\n \/* Z-index corrig\u00e9s *\/\r\n .modal-overlay {\r\n background: rgba(0, 0, 0, 0.9);\r\n backdrop-filter: blur(5px);\r\n z-index: 1000;\r\n }\r\n .modal-content {\r\n background: linear-gradient(145deg, #111111, #0a0a0a);\r\n border: 1px solid #333;\r\n box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7);\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n z-index: 1001;\r\n }\r\n \r\n \/* Cart icon animation *\/\r\n @keyframes bounce {\r\n 0%, 100% { transform: scale(1); }\r\n 50% { transform: scale(1.2); }\r\n }\r\n .cart-bounce {\r\n animation: bounce 0.5s ease;\r\n }\r\n \r\n \/* Sidebar Navigation *\/\r\n .sidebar-transition {\r\n transition: transform 0.3s ease-out;\r\n }\r\n \r\n \/* Media queries *\/\r\n @media (max-width: 768px) {\r\n .product-grid {\r\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n }\r\n .modal-content {\r\n width: 95%;\r\n margin: 10px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"min-h-screen bg-primary text-white\">\r\n <!-- Notification -->\r\n <div class=\"notification\" id=\"notification\">\r\n <span id=\"notificationText\"><\/span>\r\n <\/div>\r\n \r\n <!-- Modal Guide des Tailles -->\r\n <div id=\"sizeGuideModal\" class=\"fixed inset-0 hidden\" style=\"z-index: 2000; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(5px);\">\r\n <div class=\"min-h-screen flex items-center justify-center p-4\">\r\n <div class=\"rounded-xl w-full max-w-4xl\" style=\"z-index: 2001; background: linear-gradient(145deg, #111111, #0a0a0a); border: 1px solid #333; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8);\">\r\n <div class=\"p-6 border-b border-gray-800 flex justify-between items-center\">\r\n <h3 class=\"text-2xl font-bold\">Guide des Tailles<\/h3>\r\n <button onclick=\"closeSizeGuide()\" class=\"text-white hover:text-accent transition-colors\">\r\n <i class=\"fas fa-times text-2xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <div class=\"p-6\">\r\n <div class=\"overflow-x-auto\">\r\n <table class=\"w-full text-left\">\r\n <thead class=\"bg-gray-800\">\r\n <tr>\r\n <th class=\"p-4\">Taille<\/th>\r\n <th class=\"p-4\">Tour de poitrine (cm)<\/th>\r\n <th class=\"p-4\">Longueur (cm)<\/th>\r\n <th class=\"p-4\">Manche (cm)<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr class=\"border-b border-gray-700\">\r\n <td class=\"p-4 font-bold\">S<\/td>\r\n <td class=\"p-4\">92-96<\/td>\r\n <td class=\"p-4\">70<\/td>\r\n <td class=\"p-4\">60<\/td>\r\n <\/tr>\r\n <tr class=\"border-b border-gray-700\">\r\n <td class=\"p-4 font-bold\">M<\/td>\r\n <td class=\"p-4\">100-104<\/td>\r\n <td class=\"p-4\">72<\/td>\r\n <td class=\"p-4\">62<\/td>\r\n <\/tr>\r\n <tr class=\"border-b border-gray-700\">\r\n <td class=\"p-4 font-bold\">L<\/td>\r\n <td class=\"p-4\">108-112<\/td>\r\n <td class=\"p-4\">74<\/td>\r\n <td class=\"p-4\">64<\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"p-4 font-bold\">XL<\/td>\r\n <td class=\"p-4\">116-120<\/td>\r\n <td class=\"p-4\">76<\/td>\r\n <td class=\"p-4\">66<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <div class=\"mt-8 p-6 bg-gray-800 rounded-lg\">\r\n <h4 class=\"text-lg font-bold mb-3\">Comment prendre vos mesures :<\/h4>\r\n <ul class=\"space-y-2 text-gray-300\">\r\n <li><i class=\"fas fa-ruler mr-2 text-accent\"><\/i> <strong>Tour de poitrine<\/strong> : Mesurez autour de la partie la plus large de votre poitrine<\/li>\r\n <li><i class=\"fas fa-ruler mr-2 text-accent\"><\/i> <strong>Longueur<\/strong> : Du haut de l'\u00e9paule jusqu'au bas du v\u00eatement<\/li>\r\n <li><i class=\"fas fa-ruler mr-2 text-accent\"><\/i> <strong>Manche<\/strong> : Du haut de l'\u00e9paule jusqu'au bout de la manche<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Modal Paiement -->\r\n <div id=\"paymentModal\" class=\"fixed inset-0 hidden\" style=\"z-index: 2000; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(5px);\">\r\n <div class=\"min-h-screen flex items-center justify-center p-4\">\r\n <div class=\"rounded-xl w-full max-w-4xl\" style=\"z-index: 2001; background: linear-gradient(145deg, #111111, #0a0a0a); border: 1px solid #333; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8);\">\r\n <div class=\"p-6 border-b border-gray-800 flex justify-between items-center\">\r\n <h3 class=\"text-2xl font-bold\">Moyen de Paiement<\/h3>\r\n <button onclick=\"closePaymentModal()\" class=\"text-white hover:text-accent transition-colors\">\r\n <i class=\"fas fa-times text-2xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <div class=\"p-6\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <!-- Carte de cr\u00e9dit -->\r\n <div class=\"bg-gray-800 p-6 rounded-xl cursor-pointer hover:bg-gray-700 transition-colors\" onclick=\"selectPaymentMethod('card')\">\r\n <div class=\"flex items-center justify-between mb-4\">\r\n <div class=\"text-3xl\">\r\n <i class=\"fas fa-credit-card text-accent\"><\/i>\r\n <\/div>\r\n <input type=\"radio\" name=\"paymentMethod\" class=\"h-5 w-5\" id=\"cardPayment\">\r\n <\/div>\r\n <h4 class=\"text-xl font-bold mb-2\">Carte de cr\u00e9dit<\/h4>\r\n <p class=\"text-gray-300\">Visa, Mastercard, American Express<\/p>\r\n <\/div>\r\n <!-- PayPal -->\r\n <div class=\"bg-gray-800 p-6 rounded-xl cursor-pointer hover:bg-gray-700 transition-colors\" onclick=\"selectPaymentMethod('paypal')\">\r\n <div class=\"flex items-center justify-between mb-4\">\r\n <div class=\"text-3xl\">\r\n <i class=\"fab fa-paypal text-blue-400\"><\/i>\r\n <\/div>\r\n <input type=\"radio\" name=\"paymentMethod\" class=\"h-5 w-5\" id=\"paypalPayment\">\r\n <\/div>\r\n <h4 class=\"text-xl font-bold mb-2\">PayPal<\/h4>\r\n <p class=\"text-gray-300\">Paiement s\u00e9curis\u00e9 via PayPal<\/p>\r\n <\/div>\r\n <\/div>\r\n <!-- D\u00e9tails de la commande -->\r\n <div class=\"mt-8 p-6 bg-gray-800 rounded-lg\">\r\n <h4 class=\"text-lg font-bold mb-4\">R\u00e9capitulatif de la commande<\/h4>\r\n <div id=\"orderSummary\" class=\"space-y-3\">\r\n <!-- Les articles seront ajout\u00e9s dynamiquement -->\r\n <\/div>\r\n <div class=\"mt-6 pt-6 border-t border-gray-700\">\r\n <div class=\"flex justify-between items-center text-xl\">\r\n <span class=\"font-bold\">Total :<\/span>\r\n <span id=\"orderTotal\" class=\"text-accent font-bold text-2xl\">0.00\u20ac<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- Bouton de confirmation -->\r\n <div class=\"mt-8\">\r\n <button id=\"confirmPayment\" class=\"btn-primary w-full py-4 text-lg\" onclick=\"processPayment()\" disabled>\r\n <i class=\"fas fa-lock mr-3\"><\/i>Confirmer le paiement\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Background -->\r\n <div class=\"fixed inset-0 -z-10 bg-black flex items-center justify-center\">\r\n <img decoding=\"async\" id=\"bgBackground\" src=\"http:\/\/lasubvision.com\/wp-content\/uploads\/2025\/11\/logo_subvision.gif\" alt=\"La Subvision background\" class=\"w-600px h-auto object-contain opacity-20\">\r\n <\/div>\r\n \r\n <!-- Sidebar Navigation -->\r\n <div id=\"sidebar\" class=\"fixed left-0 top-0 h-full w-64 bg-secondary shadow-xl sidebar-transition transform -translate-x-full z-40\">\r\n <div class=\"p-6\">\r\n <div class=\"flex justify-between items-center mb-8\">\r\n <h2 class=\"text-4xl font-bold text-white\">Menu<\/h2>\r\n <button id=\"closeSidebar\" class=\"text-white hover:text-accent transition-colors\">\r\n <i class=\"fas fa-times text-2xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <nav class=\"space-y-4\">\r\n <a href=\"https:\/\/lasubvision.com\/\" class=\"block w-full py-4 px-6 rounded-lg hover:bg-primary hover:text-accent transition-all duration-300 text-xl border border-transparent hover:border-accent\">\r\n <i class=\"fas fa-home mr-3\"><\/i>Accueil\r\n <\/a>\r\n <a href=\"https:\/\/lasubvision.com\/?page_id=13\" class=\"block w-full py-4 px-6 rounded-lg hover:bg-primary hover:text-accent transition-all duration-300 text-xl border border-transparent hover:border-accent\">\r\n <i class=\"fas fa-music mr-3\"><\/i>Tracks\r\n <\/a>\r\n <a href=\"https:\/\/lasubvision.com\/?page_id=18\" class=\"block w-full py-4 px-6 rounded-lg bg-primary text-accent text-xl border border-accent\">\r\n <i class=\"fas fa-shopping-bag mr-3\"><\/i>Merch\r\n <\/a>\r\n <a href=\"https:\/\/lasubvision.com\/?page_id=20\" class=\"block w-full py-4 px-6 rounded-lg hover:bg-primary hover:text-accent transition-all duration-300 text-xl border border-transparent hover:border-accent\">\r\n <i class=\"fas fa-users mr-3\"><\/i>Le Collectif\r\n <\/a>\r\n <a href=\"https:\/\/lasubvision.com\/?page_id=22\" class=\"block w-full py-4 px-6 rounded-lg hover:bg-primary hover:text-accent transition-all duration-300 text-xl border border-transparent hover:border-accent\">\r\n <i class=\"fas fa-id-card mr-3\"><\/i>Adhesion\r\n <\/a>\r\n <a href=\"https:\/\/lasubvision.com\/?page_id=24\" class=\"block w-full py-4 px-6 rounded-lg hover:bg-primary hover:text-accent transition-all duration-300 text-xl border border-transparent hover:border-accent\">\r\n <i class=\"fas fa-volume-up mr-3\"><\/i>Sound System\r\n <\/a>\r\n <\/nav>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Overlay -->\r\n <div id=\"overlay\" class=\"fixed inset-0 bg-black bg-opacity-70 z-30 hidden\"><\/div>\r\n \r\n <!-- Header -->\r\n <header class=\"fixed top-0 left-0 right-0 py-4 px-6 bg-black\/90 backdrop-blur-sm z-50\">\r\n <div class=\"max-w-7xl mx-auto flex items-center justify-between\">\r\n <div class=\"flex items-center space-x-4\">\r\n <button id=\"menuToggle\" class=\"p-3 rounded-lg bg-secondary hover:bg-light transition-colors\">\r\n <i class=\"fas fa-bars text-xl\"><\/i>\r\n <\/button>\r\n <h2 class=\"text-2xl font-bold\">LA SUBVISION<\/h2>\r\n <\/div>\r\n <div class=\"flex items-center space-x-6\">\r\n <!-- Cart Icon -->\r\n <div id=\"cartIcon\" class=\"relative\">\r\n <button id=\"cartButton\" class=\"bg-transparent text-accent p-3 rounded-lg hover:bg-light transition-colors relative\">\r\n <i class=\"fas fa-shopping-bag text-xl\"><\/i>\r\n <span id=\"cartCount\" class=\"absolute -top-1 -right-1 bg-accent text-white text-xs rounded-full w-5 h-5 flex items-center justify-center font-bold\">0<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n \r\n <!-- Main Content -->\r\n <main class=\"min-h-screen pt-24 pb-16 px-4 sm:px-8\">\r\n <div class=\"max-w-7xl mx-auto\">\r\n <!-- Hero Section -->\r\n <div class=\"text-center mb-16 fade-in\">\r\n <h1 class=\"text-5xl md:text-7xl font-bold mb-6 text-white\">COLLECTION MERCH<\/h1>\r\n <p class=\"text-xl text-gray-300 max-w-3xl mx-auto mb-10\">\r\n D\u00e9couvrez notre collection exclusive de v\u00eatements et accessoires La Subvision. \r\n Qualit\u00e9 , designs uniques.\r\n <\/p>\r\n <\/div>\r\n \r\n <!-- Collection de produits -->\r\n <div id=\"productsSection\" class=\"product-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16\">\r\n <!-- Produit 1 - T-Shirt -->\r\n <div class=\"product-card rounded-xl overflow-hidden fade-in\" style=\"animation-delay: 0.1s\">\r\n <div class=\"stock-badge\">En stock<\/div>\r\n <div class=\"product-image h-64\">\r\n <img decoding=\"async\" src=\"http:\/\/lasubvision.com\/wp-content\/uploads\/2025\/11\/vetement_subvision.png\" \r\n alt=\"T-Shirt La Subvision\" \r\n class=\"w-full h-full object-cover\"\r\n loading=\"lazy\"\r\n onclick=\"showProductDetail('tshirt', 'T-Shirt La Subvision', 25.00, [\r\n {color: 'blanc', image: 'http:\/\/lasubvision.com\/wp-content\/uploads\/2025\/11\/vetement_subvision.png'}\r\n ], [\r\n '100% coton peign\u00e9 180g\/m\u00b2',\r\n 'Coupe regular fit',\r\n 'Col rond',\r\n 'Manches courtes',\r\n 'Impression s\u00e9rigraphie haute qualit\u00e9',\r\n 'Origine : Portugal'\r\n ], ['blanc'], ['S', 'M', 'L', 'XL'], 10)\">\r\n <\/div>\r\n <div class=\"p-6\">\r\n <div class=\"flex justify-between items-start mb-3\">\r\n <h3 class=\"text-xl font-semibold text-white\">T-Shirt La Subvision<\/h3>\r\n <span class=\"price-tag\">25.00<\/span>\r\n <\/div>\r\n <p class=\"text-gray-400 mb-4 text-sm\">100% coton \u2022 Coupe regular \u2022 Blanc uniquement<\/p>\r\n <div class=\"flex justify-between items-center\">\r\n <div class=\"flex space-x-2\">\r\n <span class=\"text-xs bg-gray-800 px-2 py-1 rounded\">S<\/span>\r\n <span class=\"text-xs bg-gray-800 px-2 py-1 rounded\">M<\/span>\r\n <span class=\"text-xs bg-gray-800 px-2 py-1 rounded\">L<\/span>\r\n <span class=\"text-xs bg-gray-800 px-2 py-1 rounded\">XL<\/span>\r\n <\/div>\r\n <button onclick=\"addToCartFromProduct('tshirt', 'T-Shirt La Subvision', 25.00, 'blanc', 'M')\" class=\"btn-primary text-sm py-2 px-4\">\r\n <i class=\"fas fa-shopping-bag mr-2\"><\/i>Ajouter\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Feature Section - Paiement S\u00e9curis\u00e9 uniquement -->\r\n <div class=\"grid grid-cols-1 gap-8 mb-16 fade-in max-w-md mx-auto\" style=\"animation-delay: 0.4s\">\r\n <div class=\"bg-secondary p-6 rounded-xl border border-gray-800 text-center\">\r\n <div class=\"text-accent text-3xl mb-4\">\r\n <i class=\"fas fa-shield-alt\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-semibold mb-2\">Paiement S\u00e9curis\u00e9<\/h3>\r\n <p class=\"text-gray-400\">Cryptage SSL 256-bit<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n \r\n <!-- Page d\u00e9taill\u00e9e du produit -->\r\n <div id=\"productDetailPage\" class=\"fixed inset-0 modal-overlay hidden\">\r\n <div class=\"min-h-screen flex items-center justify-center p-4\">\r\n <div class=\"modal-content rounded-xl w-full max-w-6xl\">\r\n <!-- Bouton retour -->\r\n <div class=\"p-6 border-b border-gray-800\">\r\n <button onclick=\"hideProductDetail()\" class=\"flex items-center text-white hover:text-accent transition-colors group\">\r\n <i class=\"fas fa-arrow-left text-xl group-hover:-translate-x-1 transition-transform\"><\/i>\r\n <span class=\"ml-3 text-lg\">Retour \u00e0 la collection<\/span>\r\n <\/button>\r\n <\/div>\r\n <div class=\"p-8\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12\">\r\n <!-- Images du produit -->\r\n <div>\r\n <div class=\"relative overflow-hidden rounded-xl mb-6\">\r\n <img decoding=\"async\" id=\"detailProductImage\" src=\"\" alt=\"\" class=\"w-full h-96 object-cover rounded-xl\">\r\n <\/div>\r\n <!-- Caract\u00e9ristiques -->\r\n <div class=\"bg-light p-6 rounded-xl\">\r\n <h3 class=\"text-xl font-semibold mb-4 text-white\">Caract\u00e9ristiques<\/h3>\r\n <ul id=\"characteristicsList\" class=\"space-y-3 text-gray-300\">\r\n <!-- Les caract\u00e9ristiques seront g\u00e9n\u00e9r\u00e9es dynamiquement -->\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <!-- D\u00e9tails du produit -->\r\n <div class=\"flex flex-col\">\r\n <div class=\"mb-6\">\r\n <h1 id=\"detailProductTitle\" class=\"text-3xl font-bold mb-2 text-white\"><\/h1>\r\n <div class=\"flex items-center mb-4\">\r\n <div class=\"text-accent text-3xl font-bold mr-2\" id=\"detailProductPrice\"><\/div>\r\n <span class=\"text-gray-400 text-sm\">TVA incluse<\/span>\r\n <\/div>\r\n <\/div>\r\n <!-- Options de taille -->\r\n <div class=\"mb-8\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <h3 class=\"text-xl font-semibold text-white\">Choisissez votre taille<\/h3>\r\n <button onclick=\"openSizeGuide()\" class=\"text-accent hover:underline text-sm\">\r\n <i class=\"fas fa-ruler mr-1\"><\/i> Guide des tailles\r\n <\/button>\r\n <\/div>\r\n <div id=\"sizeOptions\" class=\"flex flex-wrap gap-3\">\r\n <!-- Les options de taille seront g\u00e9n\u00e9r\u00e9es dynamiquement -->\r\n <\/div>\r\n <\/div>\r\n <!-- Quantit\u00e9 -->\r\n <div class=\"mb-8\">\r\n <h3 class=\"text-xl font-semibold mb-4 text-white\">Quantit\u00e9<\/h3>\r\n <div class=\"flex items-center space-x-4\">\r\n <div class=\"quantity-control\">\r\n <button id=\"decreaseQuantity\" class=\"quantity-btn\">-<\/button>\r\n <span id=\"quantityDisplay\" class=\"quantity-display\">1<\/span>\r\n <button id=\"increaseQuantity\" class=\"quantity-btn\">+<\/button>\r\n <\/div>\r\n <div class=\"text-sm text-gray-400\">\r\n <span id=\"stockInfo\">En stock<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- Boutons d'action -->\r\n <div class=\"space-y-4 mt-auto\">\r\n <button onclick=\"addToCartFromDetail()\" class=\"btn-primary w-full py-4 text-lg\">\r\n <i class=\"fas fa-shopping-bag mr-3\"><\/i>Ajouter au panier\r\n <\/button>\r\n <button onclick=\"buyNow()\" class=\"btn-secondary w-full py-4 text-lg\">\r\n <i class=\"fas fa-bolt mr-3\"><\/i>Acheter maintenant\r\n <\/button>\r\n <\/div>\r\n <!-- Garanties -->\r\n <div class=\"mt-8 pt-8 border-t border-gray-800\">\r\n <div class=\"text-center\">\r\n <div class=\"text-accent text-2xl mb-2\">\r\n <i class=\"fas fa-shield-alt\"><\/i>\r\n <\/div>\r\n <p class=\"text-sm text-gray-400\">Paiement s\u00e9curis\u00e9<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Cart Modal -->\r\n <div id=\"cartModal\" class=\"fixed inset-0 modal-overlay hidden\">\r\n <div class=\"absolute top-1\/2 left-1\/2 transform -translate-x-1\/2 -translate-y-1\/2 modal-content w-full max-w-2xl\">\r\n <div class=\"p-8\">\r\n <div class=\"flex justify-between items-center mb-8\">\r\n <div>\r\n <h3 class=\"text-3xl font-bold text-white\">Votre Panier<\/h3>\r\n <p class=\"text-gray-400 mt-1\" id=\"cartSummary\">0 article(s)<\/p>\r\n <\/div>\r\n <button id=\"closeCart\" class=\"text-white hover:text-accent transition-colors p-2\">\r\n <i class=\"fas fa-times text-2xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <div id=\"cartItems\" class=\"space-y-4 max-h-96 overflow-y-auto pr-2\">\r\n <!-- Panier vide -->\r\n <div id=\"emptyCart\" class=\"text-center py-12\">\r\n <i class=\"fas fa-shopping-bag text-5xl text-gray-600 mb-4\"><\/i>\r\n <p class=\"text-gray-400 text-lg\">Votre panier est vide<\/p>\r\n <button onclick=\"hideProductDetail(); closeCartModal();\" class=\"btn-primary mt-6\">\r\n D\u00e9couvrir la collection\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-8 pt-8 border-t border-gray-800\">\r\n <div class=\"space-y-4 mb-6\">\r\n <div class=\"flex justify-between items-center\">\r\n <span class=\"text-lg text-gray-300\">Sous-total<\/span>\r\n <span id=\"cartSubtotal\" class=\"text-xl font-bold text-white\">0.00\u20ac<\/span>\r\n <\/div>\r\n <div class=\"flex justify-between items-center\">\r\n <span class=\"text-lg text-gray-300\">Livraison<\/span>\r\n <span id=\"shippingCost\" class=\"text-xl font-bold text-white\">Gratuite<\/span>\r\n <\/div>\r\n <div class=\"flex justify-between items-center text-2xl font-bold pt-4 border-t border-gray-800\">\r\n <span class=\"text-white\">Total<\/span>\r\n <span id=\"cartTotal\" class=\"text-accent\">0.00\u20ac<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-4\">\r\n <button onclick=\"openPaymentModal()\" class=\"btn-primary w-full py-4 text-lg\">\r\n <i class=\"fas fa-lock mr-3\"><\/i>Proc\u00e9der au paiement\r\n <\/button>\r\n <button onclick=\"continueShopping()\" class=\"btn-secondary w-full py-4 text-lg\">\r\n Continuer mes achats\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Le JavaScript avec les modifications -->\r\n <script>\r\n let cart = [];\r\n let currentProduct = null;\r\n let selectedColor = 'blanc';\r\n let selectedSize = null;\r\n let quantity = 1;\r\n let productImages = [];\r\n let currentStock = 0;\r\n let selectedPaymentMethod = null;\r\n \r\n \/\/ Configuration du webhook - REMPLACEZ PAR VOTRE URL R\u00c9ELLE\r\n const WEBHOOK_URL = 'https:\/\/hook.eu2.make.com\/xxxxxxxxxxxxx';\r\n \r\n document.addEventListener(\"DOMContentLoaded\", function() {\r\n console.log(\"Page charg\u00e9e\");\r\n initializeNavigation();\r\n initializeCart();\r\n initializeQuantityButtons();\r\n loadCartFromStorage();\r\n updateCartDisplay();\r\n \r\n document.getElementById('sizeGuideModal').addEventListener('click', function(e) {\r\n if (e.target.id === 'sizeGuideModal') {\r\n closeSizeGuide();\r\n }\r\n });\r\n document.getElementById('paymentModal').addEventListener('click', function(e) {\r\n if (e.target.id === 'paymentModal') {\r\n closePaymentModal();\r\n }\r\n });\r\n document.getElementById('cartModal').addEventListener('click', function(e) {\r\n if (e.target.id === 'cartModal') {\r\n closeCartModal();\r\n }\r\n });\r\n });\r\n \r\n function initializeNavigation() {\r\n document.getElementById(\"menuToggle\").addEventListener(\"click\", toggleSidebar);\r\n document.getElementById(\"closeSidebar\").addEventListener(\"click\", closeSidebar);\r\n document.getElementById(\"overlay\").addEventListener(\"click\", closeSidebar);\r\n }\r\n \r\n function toggleSidebar() {\r\n console.log(\"Ouverture du menu\");\r\n const sidebar = document.getElementById(\"sidebar\");\r\n const overlay = document.getElementById(\"overlay\");\r\n sidebar.classList.toggle(\"-translate-x-full\");\r\n overlay.classList.toggle(\"hidden\");\r\n if (!sidebar.classList.contains(\"-translate-x-full\")) {\r\n document.body.style.overflow = 'hidden';\r\n } else {\r\n document.body.style.overflow = 'auto';\r\n }\r\n }\r\n \r\n function closeSidebar() {\r\n console.log(\"Fermeture du menu\");\r\n document.getElementById(\"sidebar\").classList.add(\"-translate-x-full\");\r\n document.getElementById(\"overlay\").classList.add(\"hidden\");\r\n document.body.style.overflow = 'auto';\r\n }\r\n \r\n function initializeCart() {\r\n document.getElementById(\"cartButton\").addEventListener(\"click\", openCart);\r\n document.getElementById(\"closeCart\").addEventListener(\"click\", closeCartModal);\r\n }\r\n \r\n function initializeQuantityButtons() {\r\n document.getElementById('decreaseQuantity').addEventListener('click', decreaseQuantity);\r\n document.getElementById('increaseQuantity').addEventListener('click', increaseQuantity);\r\n }\r\n \r\n function loadCartFromStorage() {\r\n const savedCart = localStorage.getItem('lasubvision_cart');\r\n if (savedCart) {\r\n cart = JSON.parse(savedCart);\r\n console.log(\"Panier charg\u00e9 depuis localStorage:\", cart);\r\n }\r\n }\r\n \r\n function saveCartToStorage() {\r\n localStorage.setItem('lasubvision_cart', JSON.stringify(cart));\r\n }\r\n \r\n async function sendOrderSignal(action, item = null) {\r\n try {\r\n const cartData = {\r\n timestamp: new Date().toISOString(),\r\n action: action,\r\n cart: cart,\r\n totalItems: cart.reduce((sum, item) => sum + item.quantity, 0),\r\n totalAmount: cart.reduce((sum, item) => sum + (item.price * item.quantity), 0).toFixed(2),\r\n addedItem: item\r\n };\r\n console.log('Envoi du signal au webhook:', cartData);\r\n const response = await fetch(WEBHOOK_URL, {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application\/json',\r\n },\r\n body: JSON.stringify(cartData)\r\n });\r\n if (response.ok) {\r\n console.log('Signal envoy\u00e9 avec succ\u00e8s au webhook');\r\n } else {\r\n console.error('Erreur lors de l\\'envoi du signal');\r\n }\r\n } catch (error) {\r\n console.error('Erreur d\\'envoi du signal:', error);\r\n }\r\n }\r\n \r\n function openSizeGuide() {\r\n document.getElementById(\"sizeGuideModal\").classList.remove(\"hidden\");\r\n }\r\n \r\n function closeSizeGuide() {\r\n document.getElementById(\"sizeGuideModal\").classList.add(\"hidden\");\r\n }\r\n \r\n function openPaymentModal() {\r\n console.log(\"Ouverture du modal de paiement\");\r\n if (cart.length === 0) {\r\n showNotification(\"Votre panier est vide !\");\r\n return;\r\n }\r\n updateOrderSummary();\r\n document.getElementById(\"paymentModal\").classList.remove(\"hidden\");\r\n selectedPaymentMethod = null;\r\n document.getElementById('confirmPayment').disabled = true;\r\n }\r\n \r\n function closePaymentModal() {\r\n document.getElementById(\"paymentModal\").classList.add(\"hidden\");\r\n }\r\n \r\n function selectPaymentMethod(method) {\r\n selectedPaymentMethod = method;\r\n document.querySelectorAll('input[name=\"paymentMethod\"]').forEach(radio => {\r\n radio.checked = false;\r\n });\r\n if (method === 'card') {\r\n document.getElementById('cardPayment').checked = true;\r\n } else if (method === 'paypal') {\r\n document.getElementById('paypalPayment').checked = true;\r\n }\r\n document.getElementById('confirmPayment').disabled = false;\r\n }\r\n \r\n function processPayment() {\r\n if (!selectedPaymentMethod) {\r\n showNotification(\"Veuillez s\u00e9lectionner un moyen de paiement\");\r\n return;\r\n }\r\n const paymentData = {\r\n action: 'PROCESS_PAYMENT',\r\n paymentMethod: selectedPaymentMethod,\r\n cart: cart,\r\n totalAmount: cart.reduce((sum, item) => sum + (item.price * item.quantity), 0).toFixed(2),\r\n timestamp: new Date().toISOString()\r\n };\r\n sendOrderSignal('PROCESS_PAYMENT', paymentData);\r\n if (selectedPaymentMethod === 'card') {\r\n showNotification(\"Traitement du paiement par carte...\");\r\n } else if (selectedPaymentMethod === 'paypal') {\r\n showNotification(\"Redirection vers PayPal...\");\r\n }\r\n setTimeout(() => {\r\n showNotification(\"Paiement effectu\u00e9 avec succ\u00e8s !\");\r\n sendOrderSignal('PAYMENT_CONFIRMED', paymentData);\r\n cart = [];\r\n localStorage.removeItem('lasubvision_cart');\r\n updateCartDisplay();\r\n closePaymentModal();\r\n closeCartModal();\r\n }, 2000);\r\n }\r\n \r\n function updateOrderSummary() {\r\n const orderSummary = document.getElementById('orderSummary');\r\n const orderTotal = document.getElementById('orderTotal');\r\n orderSummary.innerHTML = '';\r\n let total = 0;\r\n cart.forEach((item, index) => {\r\n const itemTotal = item.price * item.quantity;\r\n total += itemTotal;\r\n orderSummary.innerHTML += `\r\n <div class=\"flex justify-between items-center\">\r\n <div>\r\n <p class=\"font-medium\">${item.title}<\/p>\r\n <p class=\"text-sm text-gray-400\">${item.color} - ${item.size} x${item.quantity}<\/p>\r\n <\/div>\r\n <span class=\"font-bold\">${itemTotal.toFixed(2)}\u20ac<\/span>\r\n <\/div>\r\n `;\r\n });\r\n orderTotal.textContent = total.toFixed(2) + '\u20ac';\r\n }\r\n \r\n function showNotification(message) {\r\n console.log(\"Notification:\", message);\r\n const notification = document.getElementById('notification');\r\n const notificationText = document.getElementById('notificationText');\r\n notificationText.textContent = message;\r\n notification.classList.add('show');\r\n setTimeout(() => {\r\n notification.classList.remove('show');\r\n }, 3000);\r\n }\r\n \r\n function decreaseQuantity() {\r\n if (quantity > 1) {\r\n quantity--;\r\n updateQuantityDisplay();\r\n }\r\n }\r\n \r\n function increaseQuantity() {\r\n if (quantity < currentStock) {\r\n quantity++;\r\n updateQuantityDisplay();\r\n } else {\r\n showNotification('Quantit\u00e9 maximale disponible atteinte');\r\n }\r\n }\r\n \r\n function updateQuantityDisplay() {\r\n document.getElementById('quantityDisplay').textContent = quantity;\r\n }\r\n \r\n function showProductDetail(id, title, price, images, characteristics, colors, sizes, stock) {\r\n console.log(\"Affichage du produit d\u00e9taill\u00e9:\", title);\r\n currentProduct = { id, title, price, characteristics, colors, sizes, stock };\r\n productImages = images;\r\n selectedColor = 'blanc';\r\n selectedSize = sizes[0];\r\n quantity = 1;\r\n currentStock = stock;\r\n document.getElementById('detailProductTitle').textContent = title;\r\n document.getElementById('detailProductPrice').textContent = price.toFixed(2) + '\u20ac';\r\n document.getElementById('quantityDisplay').textContent = quantity;\r\n updateMainImage(images[0].image);\r\n generateCharacteristics(characteristics);\r\n document.getElementById('colorSection').classList.add('hidden');\r\n document.getElementById('detailProductColor').classList.add('hidden');\r\n generateSizeOptions(sizes);\r\n updateStockDisplay(stock);\r\n document.getElementById('productDetailPage').classList.remove('hidden');\r\n document.body.style.overflow = 'hidden';\r\n }\r\n \r\n function generateCharacteristics(characteristics) {\r\n const characteristicsList = document.getElementById('characteristicsList');\r\n characteristicsList.innerHTML = '';\r\n characteristics.forEach(char => {\r\n const li = document.createElement('li');\r\n li.className = 'flex items-start';\r\n li.innerHTML = `\r\n <i class=\"fas fa-check text-accent mr-3 mt-1\"><\/i>\r\n <span>${char}<\/span>\r\n `;\r\n characteristicsList.appendChild(li);\r\n });\r\n }\r\n \r\n function generateSizeOptions(sizes) {\r\n const sizeContainer = document.getElementById('sizeOptions');\r\n sizeContainer.innerHTML = '';\r\n sizes.forEach(size => {\r\n const sizeElement = document.createElement('button');\r\n sizeElement.type = 'button';\r\n sizeElement.className = `size-option ${size === selectedSize ? 'selected' : ''}`;\r\n sizeElement.textContent = size;\r\n sizeElement.addEventListener('click', () => selectSize(size));\r\n sizeContainer.appendChild(sizeElement);\r\n });\r\n }\r\n \r\n function updateMainImage(imageUrl) {\r\n const img = document.getElementById('detailProductImage');\r\n img.style.opacity = '0';\r\n setTimeout(() => {\r\n img.src = imageUrl;\r\n img.style.opacity = '1';\r\n }, 150);\r\n }\r\n \r\n function selectSize(size) {\r\n selectedSize = size;\r\n document.querySelectorAll('.size-option').forEach(option => {\r\n if (option.textContent === size) {\r\n option.classList.add('selected');\r\n } else {\r\n option.classList.remove('selected');\r\n }\r\n });\r\n }\r\n \r\n function updateStockDisplay(stock) {\r\n const stockInfo = document.getElementById('stockInfo');\r\n if (stock > 10) {\r\n stockInfo.textContent = `En stock (${stock} disponibles)`;\r\n stockInfo.className = 'text-green-400';\r\n } else if (stock > 0) {\r\n stockInfo.textContent = `Stock limit\u00e9 (${stock} disponible${stock > 1 ? 's' : ''})`;\r\n stockInfo.className = 'text-yellow-400';\r\n } else {\r\n stockInfo.textContent = 'Rupture de stock';\r\n stockInfo.className = 'text-red-400';\r\n }\r\n }\r\n \r\n function hideProductDetail() {\r\n document.getElementById('productDetailPage').classList.add('hidden');\r\n document.body.style.overflow = 'auto';\r\n }\r\n \r\n function addToCartFromDetail() {\r\n console.log(\"Ajout au panier depuis la page d\u00e9taill\u00e9e\");\r\n if (currentProduct) {\r\n const item = {\r\n id: currentProduct.id,\r\n title: currentProduct.title,\r\n price: currentProduct.price,\r\n color: 'blanc',\r\n size: selectedSize,\r\n quantity: quantity,\r\n timestamp: new Date().toISOString()\r\n };\r\n addToCart(item);\r\n showNotification(`${quantity} ${currentProduct.title} ajout\u00e9${quantity > 1 ? 's' : ''} au panier`);\r\n hideProductDetail();\r\n openCart();\r\n }\r\n }\r\n \r\n function addToCartFromProduct(id, title, price, color, size) {\r\n console.log(\"Ajout au panier depuis la carte produit:\", title);\r\n const item = {\r\n id: id,\r\n title: title,\r\n price: price,\r\n color: 'blanc',\r\n size: size,\r\n quantity: 1,\r\n timestamp: new Date().toISOString()\r\n };\r\n addToCart(item);\r\n showNotification(`${title} ajout\u00e9 au panier`);\r\n openCart();\r\n }\r\n \r\n function addToCart(item) {\r\n console.log(\"Ajout de l'article au panier:\", item);\r\n const existingItemIndex = cart.findIndex(cartItem => \r\n cartItem.id === item.id && \r\n cartItem.color === item.color && \r\n cartItem.size === item.size\r\n );\r\n if (existingItemIndex !== -1) {\r\n cart[existingItemIndex].quantity += item.quantity;\r\n } else {\r\n cart.push(item);\r\n }\r\n saveCartToStorage();\r\n sendOrderSignal('ADD_TO_CART', item);\r\n const cartIcon = document.getElementById('cartIcon');\r\n cartIcon.classList.add('cart-bounce');\r\n setTimeout(() => cartIcon.classList.remove('cart-bounce'), 500);\r\n updateCartDisplay();\r\n }\r\n \r\n function updateCartDisplay() {\r\n console.log(\"Mise \u00e0 jour de l'affichage du panier. Articles:\", cart);\r\n const cartCount = document.getElementById(\"cartCount\");\r\n const cartItems = document.getElementById(\"cartItems\");\r\n const cartTotal = document.getElementById(\"cartTotal\");\r\n const cartSubtotal = document.getElementById(\"cartSubtotal\");\r\n const cartSummary = document.getElementById(\"cartSummary\");\r\n const emptyCart = document.getElementById(\"emptyCart\");\r\n const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);\r\n cartCount.textContent = totalItems;\r\n if (cart.length === 0) {\r\n emptyCart.classList.remove('hidden');\r\n cartItems.innerHTML = '';\r\n } else {\r\n emptyCart.classList.add('hidden');\r\n cartItems.innerHTML = \"\";\r\n let total = 0;\r\n cart.forEach((item, index) => {\r\n const itemTotal = item.price * item.quantity;\r\n total += itemTotal;\r\n cartItems.innerHTML += `\r\n <div class=\"cart-item border-b border-gray-700 pb-4 mb-4\">\r\n <div class=\"flex justify-between items-start\">\r\n <div class=\"flex-1\">\r\n <h4 class=\"font-semibold text-white\">${item.title}<\/h4>\r\n <p class=\"text-sm text-gray-400\">${item.color} - ${item.size}<\/p>\r\n <div class=\"flex items-center mt-2\">\r\n <button type=\"button\" onclick=\"updateCartItemQuantity(${index}, -1)\" class=\"quantity-btn w-8 h-8 flex items-center justify-center\">-<\/button>\r\n <span class=\"mx-3 text-white font-medium\">${item.quantity}<\/span>\r\n <button type=\"button\" onclick=\"updateCartItemQuantity(${index}, 1)\" class=\"quantity-btn w-8 h-8 flex items-center justify-center\">+<\/button>\r\n <span class=\"ml-4 text-accent font-bold\">${item.price.toFixed(2)}\u20ac<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"text-right\">\r\n <p class=\"text-white font-bold text-lg\">${itemTotal.toFixed(2)}\u20ac<\/p>\r\n <button type=\"button\" onclick=\"removeFromCart(${index})\" class=\"text-gray-400 hover:text-accent transition-colors mt-2 text-sm\">\r\n <i class=\"fas fa-trash mr-1\"><\/i>Supprimer\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n });\r\n cartSubtotal.textContent = total.toFixed(2) + '\u20ac';\r\n cartTotal.textContent = total.toFixed(2) + '\u20ac';\r\n cartSummary.textContent = `${totalItems} article${totalItems > 1 ? 's' : ''}`;\r\n }\r\n }\r\n \r\n function updateCartItemQuantity(index, change) {\r\n console.log(`Mise \u00e0 jour quantit\u00e9: index=${index}, change=${change}`);\r\n if (!cart[index]) return;\r\n cart[index].quantity += change;\r\n if (cart[index].quantity <= 0) {\r\n cart.splice(index, 1);\r\n showNotification('Article retir\u00e9 du panier');\r\n } else {\r\n saveCartToStorage();\r\n const item = cart[index];\r\n sendOrderSignal('UPDATE_QUANTITY', item);\r\n showNotification(`Quantit\u00e9 mise \u00e0 jour: ${item.quantity}`);\r\n }\r\n saveCartToStorage();\r\n updateCartDisplay();\r\n }\r\n \r\n function removeFromCart(index) {\r\n console.log(\"Suppression de l'article:\", cart[index]);\r\n if (!cart[index]) return;\r\n const item = cart[index];\r\n cart.splice(index, 1);\r\n saveCartToStorage();\r\n sendOrderSignal('REMOVE_FROM_CART', item);\r\n updateCartDisplay();\r\n showNotification('Article retir\u00e9 du panier');\r\n }\r\n \r\n function openCart() {\r\n console.log(\"Ouverture du panier\");\r\n closeSidebar();\r\n document.getElementById(\"cartModal\").classList.remove(\"hidden\");\r\n document.body.style.overflow = 'hidden';\r\n }\r\n \r\n function closeCartModal() {\r\n document.getElementById(\"cartModal\").classList.add(\"hidden\");\r\n document.body.style.overflow = 'auto';\r\n }\r\n \r\n function continueShopping() {\r\n closeCartModal();\r\n }\r\n \r\n function buyNow() {\r\n console.log(\"Acheter maintenant\");\r\n if (currentProduct) {\r\n const item = {\r\n id: currentProduct.id,\r\n title: currentProduct.title,\r\n price: currentProduct.price,\r\n color: 'blanc',\r\n size: selectedSize,\r\n quantity: quantity\r\n };\r\n addToCart(item);\r\n hideProductDetail();\r\n openPaymentModal();\r\n }\r\n }\r\n \r\n \/\/ Exposition des fonctions pour les rendre accessibles globalement\r\n window.addToCartFromProduct = addToCartFromProduct;\r\n window.removeFromCart = removeFromCart;\r\n window.showProductDetail = showProductDetail;\r\n window.hideProductDetail = hideProductDetail;\r\n window.openSizeGuide = openSizeGuide;\r\n window.closeSizeGuide = closeSizeGuide;\r\n window.updateCartItemQuantity = updateCartItemQuantity;\r\n window.addToCartFromDetail = addToCartFromDetail;\r\n window.buyNow = buyNow;\r\n window.openPaymentModal = openPaymentModal;\r\n window.closePaymentModal = closePaymentModal;\r\n window.processPayment = processPayment;\r\n window.selectPaymentMethod = selectPaymentMethod;\r\n window.continueShopping = continueShopping;\r\n window.openCart = openCart;\r\n window.closeCartModal = closeCartModal;\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Merch – La Subvision Guide des Tailles Taille Tour de poitrine (cm) Longueur (cm) Manche (cm) S 92-96 70 60 M 100-104 72 62 L 108-112 74 64 XL 116-120 76 66 Comment prendre vos mesures : Tour de poitrine : Mesurez autour de la partie la plus large de votre poitrine Longueur : Du […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ocean_post_layout":"full-screen","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"off","ocean_display_header":"off","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"on","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"off","ocean_display_footer_bottom":"off","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-18","page","type-page","status-publish","hentry","entry","owp-thumbs-layout-horizontal","owp-btn-normal","owp-tabs-layout-horizontal","has-no-thumbnails","has-product-nav"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/lasubvision.com\/index.php?rest_route=\/wp\/v2\/pages\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lasubvision.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lasubvision.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lasubvision.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lasubvision.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=18"}],"version-history":[{"count":127,"href":"https:\/\/lasubvision.com\/index.php?rest_route=\/wp\/v2\/pages\/18\/revisions"}],"predecessor-version":[{"id":341,"href":"https:\/\/lasubvision.com\/index.php?rest_route=\/wp\/v2\/pages\/18\/revisions\/341"}],"wp:attachment":[{"href":"https:\/\/lasubvision.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}