Sound System - La Subvision<\/title>\r\n <meta name=\"description\" content=\"Sound System La Subvision\">\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 <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n primary: \"#000000\",\r\n secondary: \"transparent\",\r\n accent: \"#dc2626\"\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n <style>\r\n\r\n\r\n @font-face {\r\n font-family: \"Matrix Medium\";\r\n src: url(\"https:\/\/lasubvision.com\/wp-content\/uploads\/2025\/11\/matrix.ttf\") format(\"truetype\");\r\n font-display: swap;\r\n }\r\n body {\r\n font-family: \"Matrix Medium\", sans-serif;\r\n letter-spacing: 0.08em;\r\n color: #ffffff;\r\n background-color: #000000;\r\n }\r\n\r\n .text-blue-900 {\r\n color: #ffffff !important;\r\n }\r\n\r\n .sidebar-transition {\r\n transition: transform 0.3s ease-in-out;\r\n }\r\n\r\n \/* Forcer la couleur blanche pour tous les textes *\/\r\n .text-gray-300, \r\n .text-gray-400,\r\n .hover\\:text-gray-300:hover,\r\n .text-blue-900 {\r\n color: #ffffff !important;\r\n }\r\n\r\n \/* Style pour le logo centr\u00e9 au milieu en fond - AGRANDI *\/\r\n .logo-background {\r\n position: fixed;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 600px; \/* AGRANDI 400px \u2192 600px *\/\r\n height: auto;\r\n z-index: -10;\r\n opacity: 0.8;\r\n }\r\n\r\n @media (max-width: 640px) {\r\n .logo-background {\r\n width: 450px; \/* AGRANDI 300px \u2192 450px *\/\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"min-h-screen bg-primary text-white\">\r\n \r\n <img decoding=\"async\" id=\"bgLogo\" src=\"http:\/\/lasubvision.com\/wp-content\/uploads\/2025\/11\/logo_subvision.gif\" alt=\"La Subvision logo\" class=\"logo-background\">\r\n\r\n \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 <h2 class=\"text-4xl font-bold mb-8\">Navigation<\/h2> \r\n <nav class=\"space-y-6 text-xl\"> \r\n <a href=\"https:\/\/lasubvision.com\/\" class=\"block w-full text-left py-3 px-4 rounded hover:bg-primary transition-colors text-xl\">Accueil<\/a> \r\n <a href=\"https:\/\/lasubvision.com\/?page_id=13\" class=\"block w-full text-left py-3 px-4 rounded hover:bg-primary transition-colors text-xl\">Tracks<\/a> \r\n <a href=\"https:\/\/lasubvision.com\/?page_id=18\" class=\"block w-full text-left py-3 px-4 rounded hover:bg-primary transition-colors text-xl\">Merch<\/a> \r\n <a href=\"https:\/\/lasubvision.com\/?page_id=20\" class=\"block w-full text-left py-3 px-4 rounded hover:bg-primary transition-colors text-xl\">Le Collectif<\/a> \r\n <a href=\"https:\/\/lasubvision.com\/?page_id=22\" class=\"block w-full text-left py-3 px-4 rounded hover:bg-primary transition-colors text-xl\">Adh\u00e9rer<\/a> \r\n <a href=\"https:\/\/lasubvision.com\/?page_id=24\" class=\"block w-full text-left py-3 px-4 rounded hover:bg-primary transition-colors text-xl\">Sound System<\/a> \r\n <\/nav>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"overlay\" class=\"fixed inset-0 bg-black bg-opacity-50 z-30 hidden\"><\/div>\r\n\r\n \r\n <div id=\"cartIcon\" class=\"fixed top-4 right-4 z-50\">\r\n <button id=\"cartButton\" class=\"bg-transparent text-accent p-0 shadow-none hover:text-red-700 transition-colors focus:outline-none\">\r\n <i class=\"fas fa-heart text-2xl\"><\/i>\r\n <span id=\"cartCount\" class=\"absolute -top-1 -right-1 bg-white text-accent text-xs rounded-full w-5 h-5 flex items-center justify-center font-bold hidden\">0<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <main class=\"min-h-screen flex flex-col items-center justify-center px-4 sm:px-8 py-16 sm:py-24\">\r\n <div class=\"w-full max-w-6xl mx-auto\">\r\n \r\n <div class=\"flex items-center mb-12\"> \r\n <button id=\"menuToggle\" class=\"mr-4 p-2 rounded hover:bg-secondary transition-colors\">\r\n <i class=\"fas fa-bars text-2xl text-white\"><\/i> \r\n <\/button>\r\n <h2 class=\"text-6xl font-bold text-white\">Sound System<\/h2> \r\n <\/div>\r\n \r\n \r\n <div class=\"mb-16\"> \r\n <h3 class=\"text-4xl font-bold mb-8 text-white\">Notre Materiel<\/h3> \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 justify-items-center\"> \r\n \r\n <div class=\"bg-secondary rounded-lg overflow-hidden w-full max-w-sm border border-gray-700\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/400\/300?random=13\" alt=\"Notre Soundsystem\" class=\"w-full h-48 object-cover\" loading=\"lazy\">\r\n <div class=\"p-6\">\r\n <h3 class=\"text-2xl font-semibold text-white\">Notre Soundsystem<\/h3> \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"bg-secondary rounded-lg p-8 border border-gray-700\">\r\n <h3 class=\"text-4xl font-bold mb-8 text-white\">Demande de Location Personnalisee<\/h3> \r\n <form id=\"rentalForm\" class=\"space-y-8\"> \r\n <div>\r\n <label for=\"rentalName\" class=\"block text-lg font-medium mb-3 text-white\">Nom et Prenom *<\/label> \r\n <input type=\"text\" id=\"rentalName\" required class=\"w-full px-5 py-4 bg-primary border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-accent text-lg\"> \r\n <\/div>\r\n \r\n <div>\r\n <label for=\"rentalEmail\" class=\"block text-lg font-medium mb-3 text-white\">Email *<\/label> \r\n <input type=\"email\" id=\"rentalEmail\" required class=\"w-full px-5 py-4 bg-primary border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-accent text-lg\"> \r\n <\/div>\r\n \r\n <div>\r\n <label for=\"eventDate\" class=\"block text-lg font-medium mb-3 text-white\">Date de l'evenement<\/label> \r\n <input type=\"date\" id=\"eventDate\" class=\"w-full px-5 py-4 bg-primary border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-accent text-lg\"> \r\n <\/div>\r\n \r\n <div>\r\n <label for=\"eventType\" class=\"block text-lg font-medium mb-3 text-white\">Type d'evenement<\/label> \r\n <input type=\"text\" id=\"eventType\" class=\"w-full px-5 py-4 bg-primary border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-accent text-lg\" placeholder=\"Concert, fete, mariage...\"> \r\n <\/div>\r\n \r\n <div>\r\n <label for=\"message\" class=\"block text-lg font-medium mb-3 text-white\">Message ou Besoins specifiques<\/label> \r\n <textarea id=\"message\" rows=\"4\" class=\"w-full px-5 py-4 bg-primary border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-accent text-lg\"><\/textarea> \r\n <\/div>\r\n \r\n <button type=\"submit\" class=\"w-full bg-black text-white py-5 px-6 rounded-lg font-semibold hover:bg-gray-800 transition-colors border border-gray-600 text-xl\"> \r\n Envoyer la demande\r\n <\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n\r\n \r\n <div id=\"cartModal\" class=\"fixed inset-0 bg-black bg-opacity-50 z-50 hidden\">\r\n <div class=\"absolute top-1\/2 left-1\/2 transform -translate-x-1\/2 -translate-y-1\/2 bg-primary rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] overflow-hidden border border-gray-700\">\r\n <div class=\"p-6\">\r\n <div class=\"flex justify-between items-center mb-6\">\r\n <h3 class=\"text-4xl font-bold text-white\">Panier<\/h3> \r\n <button id=\"closeCart\" class=\"text-white hover:text-accent\">\r\n <i class=\"fas fa-times text-2xl\"><\/i> \r\n <\/button>\r\n <\/div>\r\n \r\n <div id=\"cartItems\" class=\"space-y-4 max-h-96 overflow-y-auto\">\r\n \r\n <\/div>\r\n \r\n <div class=\"mt-6 pt-6 border-t border-gray-600\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <span class=\"text-xl font-semibold text-white\">Total:<\/span> \r\n <span id=\"cartTotal\" class=\"text-xl font-bold text-accent\">0.00\u20ac<\/span> \r\n <\/div>\r\n \r\n <button id=\"checkoutButton\" class=\"w-full bg-accent text-white py-3 px-6 rounded-lg font-semibold hover:bg-red-700 transition-colors text-lg\"> \r\n Proc\u00e9der au paiement\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Cart state\r\n let cart = [];\r\n\r\n \/\/ Initialize the application\r\n document.addEventListener(\"DOMContentLoaded\", function() {\r\n initializeNavigation();\r\n initializeCart();\r\n initializeRentalForm();\r\n \r\n \/\/ Forcer l'affichage du coeur\r\n const cartIcon = document.getElementById('cartIcon');\r\n if (cartIcon) {\r\n cartIcon.style.display = 'block';\r\n cartIcon.style.visibility = 'visible';\r\n cartIcon.style.opacity = '1';\r\n }\r\n });\r\n\r\n function initializeNavigation() {\r\n \/\/ Menu toggle button\r\n const menuToggle = document.getElementById(\"menuToggle\");\r\n if (menuToggle) {\r\n menuToggle.addEventListener(\"click\", function(e) {\r\n e.preventDefault();\r\n toggleSidebar();\r\n });\r\n }\r\n\r\n \/\/ Overlay click to close sidebar\r\n const overlay = document.getElementById(\"overlay\");\r\n if (overlay) {\r\n overlay.addEventListener(\"click\", function() {\r\n closeSidebar();\r\n });\r\n }\r\n }\r\n\r\n function toggleSidebar() {\r\n const sidebar = document.getElementById(\"sidebar\");\r\n const overlay = document.getElementById(\"overlay\");\r\n\r\n if (sidebar && overlay) {\r\n if (sidebar.classList.contains(\"-translate-x-full\")) {\r\n sidebar.classList.remove(\"-translate-x-full\");\r\n overlay.classList.remove(\"hidden\");\r\n } else {\r\n closeSidebar();\r\n }\r\n }\r\n }\r\n\r\n function closeSidebar() {\r\n const sidebar = document.getElementById(\"sidebar\");\r\n const overlay = document.getElementById(\"overlay\");\r\n \r\n if (sidebar && overlay) {\r\n sidebar.classList.add(\"-translate-x-full\");\r\n overlay.classList.add(\"hidden\");\r\n }\r\n }\r\n\r\n function initializeCart() {\r\n \/\/ Cart button\r\n const cartButton = document.getElementById(\"cartButton\");\r\n if (cartButton) {\r\n cartButton.addEventListener(\"click\", function(e) {\r\n e.preventDefault();\r\n openCart();\r\n });\r\n }\r\n\r\n \/\/ Close cart button\r\n const closeCart = document.getElementById(\"closeCart\");\r\n if (closeCart) {\r\n closeCart.addEventListener(\"click\", function(e) {\r\n e.preventDefault();\r\n closeCartModal();\r\n });\r\n }\r\n\r\n \/\/ Checkout button\r\n const checkoutButton = document.getElementById(\"checkoutButton\");\r\n if (checkoutButton) {\r\n checkoutButton.addEventListener(\"click\", function(e) {\r\n e.preventDefault();\r\n processCheckout();\r\n });\r\n }\r\n }\r\n\r\n function initializeRentalForm() {\r\n \/\/ Rental form\r\n const rentalForm = document.getElementById(\"rentalForm\");\r\n if (rentalForm) {\r\n rentalForm.addEventListener(\"submit\", function(e) {\r\n e.preventDefault();\r\n const name = document.getElementById(\"rentalName\").value;\r\n const email = document.getElementById(\"rentalEmail\").value;\r\n const eventDate = document.getElementById(\"eventDate\").value;\r\n const eventType = document.getElementById(\"eventType\").value;\r\n const message = document.getElementById(\"message\").value;\r\n\r\n const to = \"la.subvision@gmail.com\";\r\n const subject = encodeURIComponent(\"Demande de location Sound System - \" + name);\r\n const body = encodeURIComponent(\r\n \"Nom \/ Pr\u00e9nom : \" + name + \"\\n\" +\r\n \"Email : \" + email + \"\\n\" +\r\n \"Date de l'\u00e9v\u00e9nement : \" + (eventDate || \"Non pr\u00e9cis\u00e9\") + \"\\n\" +\r\n \"Type d'\u00e9v\u00e9nement : \" + (eventType || \"Non pr\u00e9cis\u00e9\") + \"\\n\\n\" +\r\n \"Message \/ Besoins sp\u00e9cifiques :\\n\" + (message || \"Aucun message renseign\u00e9.\")\r\n );\r\n\r\n \/\/ Ouvre le client mail avec le mail pr\u00eat \u00e0 \u00eatre envoy\u00e9\r\n window.location.href = \"mailto:\" + to + \"?subject=\" + subject + \"&body=\" + body;\r\n\r\n alert(\"Merci \" + name + \" ! Un email de demande de location vient d'\u00eatre pr\u00e9par\u00e9 pour \u00eatre envoy\u00e9 \u00e0 la.subvision@gmail.com.\");\r\n this.reset();\r\n });\r\n }\r\n }\r\n\r\n function updateCartDisplay() {\r\n const cartCount = document.getElementById(\"cartCount\");\r\n const cartItems = document.getElementById(\"cartItems\");\r\n const cartTotal = document.getElementById(\"cartTotal\");\r\n\r\n \/\/ Update cart count\r\n if (cart.length > 0 && cartCount) {\r\n cartCount.textContent = cart.length;\r\n cartCount.classList.remove(\"hidden\");\r\n } else if (cartCount) {\r\n cartCount.classList.add(\"hidden\");\r\n }\r\n\r\n \/\/ Update cart items\r\n if (cartItems) {\r\n cartItems.innerHTML = \"\";\r\n let total = 0;\r\n\r\n cart.forEach((item, index) => {\r\n total += item.price;\r\n \r\n const itemElement = document.createElement(\"div\");\r\n itemElement.className = \"flex justify-between items-center py-2 border-b border-gray-600\";\r\n itemElement.innerHTML = `\r\n <div>\r\n <h4 class=\"font-semibold text-white\">${item.title}<\/h4>\r\n <p class=\"text-sm text-white\">${item.category}<\/p>\r\n <\/div>\r\n <div class=\"flex items-center space-x-4\">\r\n <span class=\"font-bold text-white\">${item.price.toFixed(2)}\u20ac<\/span>\r\n <button onclick=\"removeFromCart(${index})\" class=\"text-white hover:text-accent\">\r\n <i class=\"fas fa-times\"><\/i>\r\n <\/button>\r\n <\/div>\r\n `;\r\n cartItems.appendChild(itemElement);\r\n });\r\n\r\n \/\/ Update total\r\n if (cartTotal) {\r\n cartTotal.textContent = total.toFixed(2) + \"\u20ac\";\r\n }\r\n }\r\n }\r\n\r\n function removeFromCart(index) {\r\n cart.splice(index, 1);\r\n updateCartDisplay();\r\n }\r\n\r\n function openCart() {\r\n const cartModal = document.getElementById(\"cartModal\");\r\n if (cartModal) {\r\n cartModal.classList.remove(\"hidden\");\r\n }\r\n }\r\n\r\n function closeCartModal() {\r\n const cartModal = document.getElementById(\"cartModal\");\r\n if (cartModal) {\r\n cartModal.classList.add(\"hidden\");\r\n }\r\n }\r\n\r\n function processCheckout() {\r\n if (cart.length === 0) {\r\n alert(\"Votre panier est vide !\");\r\n return;\r\n }\r\n\r\n alert(\"Fonctionnalit\u00e9 de paiement a impl\u00e9menter. Articles dans le panier : \" + cart.length);\r\n \/\/ Here you would integrate with a payment processor\r\n }\r\n\r\n \/\/ Exposer les fonctions globalement pour les boutons onclick\r\n window.removeFromCart = removeFromCart;\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Sound System – La Subvision Navigation Accueil Tracks Merch Le Collectif Adh\u00e9rer Sound System 0 Sound System Notre Materiel Notre Soundsystem Demande de Location Personnalisee Nom et Prenom * Email * Date de l’evenement Type d’evenement Message ou Besoins specifiques Envoyer la demande Panier Total: 0.00\u20ac Proc\u00e9der au paiement<\/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-24","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\/24","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=24"}],"version-history":[{"count":7,"href":"https:\/\/lasubvision.com\/index.php?rest_route=\/wp\/v2\/pages\/24\/revisions"}],"predecessor-version":[{"id":105,"href":"https:\/\/lasubvision.com\/index.php?rest_route=\/wp\/v2\/pages\/24\/revisions\/105"}],"wp:attachment":[{"href":"https:\/\/lasubvision.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\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 Sound System - La Subvision<\/title>\r\n <meta name=\"description\" content=\"Sound System La Subvision\">\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 <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n primary: \"#000000\",\r\n secondary: \"transparent\",\r\n accent: \"#dc2626\"\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n <style>\r\n\r\n\r\n @font-face {\r\n font-family: \"Matrix Medium\";\r\n src: url(\"https:\/\/lasubvision.com\/wp-content\/uploads\/2025\/11\/matrix.ttf\") format(\"truetype\");\r\n font-display: swap;\r\n }\r\n body {\r\n font-family: \"Matrix Medium\", sans-serif;\r\n letter-spacing: 0.08em;\r\n color: #ffffff;\r\n background-color: #000000;\r\n }\r\n\r\n .text-blue-900 {\r\n color: #ffffff !important;\r\n }\r\n\r\n .sidebar-transition {\r\n transition: transform 0.3s ease-in-out;\r\n }\r\n\r\n \/* Forcer la couleur blanche pour tous les textes *\/\r\n .text-gray-300, \r\n .text-gray-400,\r\n .hover\\:text-gray-300:hover,\r\n .text-blue-900 {\r\n color: #ffffff !important;\r\n }\r\n\r\n \/* Style pour le logo centr\u00e9 au milieu en fond - AGRANDI *\/\r\n .logo-background {\r\n position: fixed;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 600px; \/* AGRANDI 400px \u2192 600px *\/\r\n height: auto;\r\n z-index: -10;\r\n opacity: 0.8;\r\n }\r\n\r\n @media (max-width: 640px) {\r\n .logo-background {\r\n width: 450px; \/* AGRANDI 300px \u2192 450px *\/\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"min-h-screen bg-primary text-white\">\r\n \r\n <img decoding=\"async\" id=\"bgLogo\" src=\"http:\/\/lasubvision.com\/wp-content\/uploads\/2025\/11\/logo_subvision.gif\" alt=\"La Subvision logo\" class=\"logo-background\">\r\n\r\n \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 <h2 class=\"text-4xl font-bold mb-8\">Navigation<\/h2> \r\n <nav class=\"space-y-6 text-xl\"> \r\n <a href=\"https:\/\/lasubvision.com\/\" class=\"block w-full text-left py-3 px-4 rounded hover:bg-primary transition-colors text-xl\">Accueil<\/a> \r\n <a href=\"https:\/\/lasubvision.com\/?page_id=13\" class=\"block w-full text-left py-3 px-4 rounded hover:bg-primary transition-colors text-xl\">Tracks<\/a> \r\n <a href=\"https:\/\/lasubvision.com\/?page_id=18\" class=\"block w-full text-left py-3 px-4 rounded hover:bg-primary transition-colors text-xl\">Merch<\/a> \r\n <a href=\"https:\/\/lasubvision.com\/?page_id=20\" class=\"block w-full text-left py-3 px-4 rounded hover:bg-primary transition-colors text-xl\">Le Collectif<\/a> \r\n <a href=\"https:\/\/lasubvision.com\/?page_id=22\" class=\"block w-full text-left py-3 px-4 rounded hover:bg-primary transition-colors text-xl\">Adh\u00e9rer<\/a> \r\n <a href=\"https:\/\/lasubvision.com\/?page_id=24\" class=\"block w-full text-left py-3 px-4 rounded hover:bg-primary transition-colors text-xl\">Sound System<\/a> \r\n <\/nav>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"overlay\" class=\"fixed inset-0 bg-black bg-opacity-50 z-30 hidden\"><\/div>\r\n\r\n \r\n <div id=\"cartIcon\" class=\"fixed top-4 right-4 z-50\">\r\n <button id=\"cartButton\" class=\"bg-transparent text-accent p-0 shadow-none hover:text-red-700 transition-colors focus:outline-none\">\r\n <i class=\"fas fa-heart text-2xl\"><\/i>\r\n <span id=\"cartCount\" class=\"absolute -top-1 -right-1 bg-white text-accent text-xs rounded-full w-5 h-5 flex items-center justify-center font-bold hidden\">0<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <main class=\"min-h-screen flex flex-col items-center justify-center px-4 sm:px-8 py-16 sm:py-24\">\r\n <div class=\"w-full max-w-6xl mx-auto\">\r\n \r\n <div class=\"flex items-center mb-12\"> \r\n <button id=\"menuToggle\" class=\"mr-4 p-2 rounded hover:bg-secondary transition-colors\">\r\n <i class=\"fas fa-bars text-2xl text-white\"><\/i> \r\n <\/button>\r\n <h2 class=\"text-6xl font-bold text-white\">Sound System<\/h2> \r\n <\/div>\r\n \r\n \r\n <div class=\"mb-16\"> \r\n <h3 class=\"text-4xl font-bold mb-8 text-white\">Notre Materiel<\/h3> \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 justify-items-center\"> \r\n \r\n <div class=\"bg-secondary rounded-lg overflow-hidden w-full max-w-sm border border-gray-700\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/400\/300?random=13\" alt=\"Notre Soundsystem\" class=\"w-full h-48 object-cover\" loading=\"lazy\">\r\n <div class=\"p-6\">\r\n <h3 class=\"text-2xl font-semibold text-white\">Notre Soundsystem<\/h3> \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"bg-secondary rounded-lg p-8 border border-gray-700\">\r\n <h3 class=\"text-4xl font-bold mb-8 text-white\">Demande de Location Personnalisee<\/h3> \r\n <form id=\"rentalForm\" class=\"space-y-8\"> \r\n <div>\r\n <label for=\"rentalName\" class=\"block text-lg font-medium mb-3 text-white\">Nom et Prenom *<\/label> \r\n <input type=\"text\" id=\"rentalName\" required class=\"w-full px-5 py-4 bg-primary border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-accent text-lg\"> \r\n <\/div>\r\n \r\n <div>\r\n <label for=\"rentalEmail\" class=\"block text-lg font-medium mb-3 text-white\">Email *<\/label> \r\n <input type=\"email\" id=\"rentalEmail\" required class=\"w-full px-5 py-4 bg-primary border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-accent text-lg\"> \r\n <\/div>\r\n \r\n <div>\r\n <label for=\"eventDate\" class=\"block text-lg font-medium mb-3 text-white\">Date de l'evenement<\/label> \r\n <input type=\"date\" id=\"eventDate\" class=\"w-full px-5 py-4 bg-primary border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-accent text-lg\"> \r\n <\/div>\r\n \r\n <div>\r\n <label for=\"eventType\" class=\"block text-lg font-medium mb-3 text-white\">Type d'evenement<\/label> \r\n <input type=\"text\" id=\"eventType\" class=\"w-full px-5 py-4 bg-primary border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-accent text-lg\" placeholder=\"Concert, fete, mariage...\"> \r\n <\/div>\r\n \r\n <div>\r\n <label for=\"message\" class=\"block text-lg font-medium mb-3 text-white\">Message ou Besoins specifiques<\/label> \r\n <textarea id=\"message\" rows=\"4\" class=\"w-full px-5 py-4 bg-primary border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-accent text-lg\"><\/textarea> \r\n <\/div>\r\n \r\n <button type=\"submit\" class=\"w-full bg-black text-white py-5 px-6 rounded-lg font-semibold hover:bg-gray-800 transition-colors border border-gray-600 text-xl\"> \r\n Envoyer la demande\r\n <\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n\r\n \r\n <div id=\"cartModal\" class=\"fixed inset-0 bg-black bg-opacity-50 z-50 hidden\">\r\n <div class=\"absolute top-1\/2 left-1\/2 transform -translate-x-1\/2 -translate-y-1\/2 bg-primary rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] overflow-hidden border border-gray-700\">\r\n <div class=\"p-6\">\r\n <div class=\"flex justify-between items-center mb-6\">\r\n <h3 class=\"text-4xl font-bold text-white\">Panier<\/h3> \r\n <button id=\"closeCart\" class=\"text-white hover:text-accent\">\r\n <i class=\"fas fa-times text-2xl\"><\/i> \r\n <\/button>\r\n <\/div>\r\n \r\n <div id=\"cartItems\" class=\"space-y-4 max-h-96 overflow-y-auto\">\r\n \r\n <\/div>\r\n \r\n <div class=\"mt-6 pt-6 border-t border-gray-600\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <span class=\"text-xl font-semibold text-white\">Total:<\/span> \r\n <span id=\"cartTotal\" class=\"text-xl font-bold text-accent\">0.00\u20ac<\/span> \r\n <\/div>\r\n \r\n <button id=\"checkoutButton\" class=\"w-full bg-accent text-white py-3 px-6 rounded-lg font-semibold hover:bg-red-700 transition-colors text-lg\"> \r\n Proc\u00e9der au paiement\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Cart state\r\n let cart = [];\r\n\r\n \/\/ Initialize the application\r\n document.addEventListener(\"DOMContentLoaded\", function() {\r\n initializeNavigation();\r\n initializeCart();\r\n initializeRentalForm();\r\n \r\n \/\/ Forcer l'affichage du coeur\r\n const cartIcon = document.getElementById('cartIcon');\r\n if (cartIcon) {\r\n cartIcon.style.display = 'block';\r\n cartIcon.style.visibility = 'visible';\r\n cartIcon.style.opacity = '1';\r\n }\r\n });\r\n\r\n function initializeNavigation() {\r\n \/\/ Menu toggle button\r\n const menuToggle = document.getElementById(\"menuToggle\");\r\n if (menuToggle) {\r\n menuToggle.addEventListener(\"click\", function(e) {\r\n e.preventDefault();\r\n toggleSidebar();\r\n });\r\n }\r\n\r\n \/\/ Overlay click to close sidebar\r\n const overlay = document.getElementById(\"overlay\");\r\n if (overlay) {\r\n overlay.addEventListener(\"click\", function() {\r\n closeSidebar();\r\n });\r\n }\r\n }\r\n\r\n function toggleSidebar() {\r\n const sidebar = document.getElementById(\"sidebar\");\r\n const overlay = document.getElementById(\"overlay\");\r\n\r\n if (sidebar && overlay) {\r\n if (sidebar.classList.contains(\"-translate-x-full\")) {\r\n sidebar.classList.remove(\"-translate-x-full\");\r\n overlay.classList.remove(\"hidden\");\r\n } else {\r\n closeSidebar();\r\n }\r\n }\r\n }\r\n\r\n function closeSidebar() {\r\n const sidebar = document.getElementById(\"sidebar\");\r\n const overlay = document.getElementById(\"overlay\");\r\n \r\n if (sidebar && overlay) {\r\n sidebar.classList.add(\"-translate-x-full\");\r\n overlay.classList.add(\"hidden\");\r\n }\r\n }\r\n\r\n function initializeCart() {\r\n \/\/ Cart button\r\n const cartButton = document.getElementById(\"cartButton\");\r\n if (cartButton) {\r\n cartButton.addEventListener(\"click\", function(e) {\r\n e.preventDefault();\r\n openCart();\r\n });\r\n }\r\n\r\n \/\/ Close cart button\r\n const closeCart = document.getElementById(\"closeCart\");\r\n if (closeCart) {\r\n closeCart.addEventListener(\"click\", function(e) {\r\n e.preventDefault();\r\n closeCartModal();\r\n });\r\n }\r\n\r\n \/\/ Checkout button\r\n const checkoutButton = document.getElementById(\"checkoutButton\");\r\n if (checkoutButton) {\r\n checkoutButton.addEventListener(\"click\", function(e) {\r\n e.preventDefault();\r\n processCheckout();\r\n });\r\n }\r\n }\r\n\r\n function initializeRentalForm() {\r\n \/\/ Rental form\r\n const rentalForm = document.getElementById(\"rentalForm\");\r\n if (rentalForm) {\r\n rentalForm.addEventListener(\"submit\", function(e) {\r\n e.preventDefault();\r\n const name = document.getElementById(\"rentalName\").value;\r\n const email = document.getElementById(\"rentalEmail\").value;\r\n const eventDate = document.getElementById(\"eventDate\").value;\r\n const eventType = document.getElementById(\"eventType\").value;\r\n const message = document.getElementById(\"message\").value;\r\n\r\n const to = \"la.subvision@gmail.com\";\r\n const subject = encodeURIComponent(\"Demande de location Sound System - \" + name);\r\n const body = encodeURIComponent(\r\n \"Nom \/ Pr\u00e9nom : \" + name + \"\\n\" +\r\n \"Email : \" + email + \"\\n\" +\r\n \"Date de l'\u00e9v\u00e9nement : \" + (eventDate || \"Non pr\u00e9cis\u00e9\") + \"\\n\" +\r\n \"Type d'\u00e9v\u00e9nement : \" + (eventType || \"Non pr\u00e9cis\u00e9\") + \"\\n\\n\" +\r\n \"Message \/ Besoins sp\u00e9cifiques :\\n\" + (message || \"Aucun message renseign\u00e9.\")\r\n );\r\n\r\n \/\/ Ouvre le client mail avec le mail pr\u00eat \u00e0 \u00eatre envoy\u00e9\r\n window.location.href = \"mailto:\" + to + \"?subject=\" + subject + \"&body=\" + body;\r\n\r\n alert(\"Merci \" + name + \" ! Un email de demande de location vient d'\u00eatre pr\u00e9par\u00e9 pour \u00eatre envoy\u00e9 \u00e0 la.subvision@gmail.com.\");\r\n this.reset();\r\n });\r\n }\r\n }\r\n\r\n function updateCartDisplay() {\r\n const cartCount = document.getElementById(\"cartCount\");\r\n const cartItems = document.getElementById(\"cartItems\");\r\n const cartTotal = document.getElementById(\"cartTotal\");\r\n\r\n \/\/ Update cart count\r\n if (cart.length > 0 && cartCount) {\r\n cartCount.textContent = cart.length;\r\n cartCount.classList.remove(\"hidden\");\r\n } else if (cartCount) {\r\n cartCount.classList.add(\"hidden\");\r\n }\r\n\r\n \/\/ Update cart items\r\n if (cartItems) {\r\n cartItems.innerHTML = \"\";\r\n let total = 0;\r\n\r\n cart.forEach((item, index) => {\r\n total += item.price;\r\n \r\n const itemElement = document.createElement(\"div\");\r\n itemElement.className = \"flex justify-between items-center py-2 border-b border-gray-600\";\r\n itemElement.innerHTML = `\r\n <div>\r\n <h4 class=\"font-semibold text-white\">${item.title}<\/h4>\r\n <p class=\"text-sm text-white\">${item.category}<\/p>\r\n <\/div>\r\n <div class=\"flex items-center space-x-4\">\r\n <span class=\"font-bold text-white\">${item.price.toFixed(2)}\u20ac<\/span>\r\n <button onclick=\"removeFromCart(${index})\" class=\"text-white hover:text-accent\">\r\n <i class=\"fas fa-times\"><\/i>\r\n <\/button>\r\n <\/div>\r\n `;\r\n cartItems.appendChild(itemElement);\r\n });\r\n\r\n \/\/ Update total\r\n if (cartTotal) {\r\n cartTotal.textContent = total.toFixed(2) + \"\u20ac\";\r\n }\r\n }\r\n }\r\n\r\n function removeFromCart(index) {\r\n cart.splice(index, 1);\r\n updateCartDisplay();\r\n }\r\n\r\n function openCart() {\r\n const cartModal = document.getElementById(\"cartModal\");\r\n if (cartModal) {\r\n cartModal.classList.remove(\"hidden\");\r\n }\r\n }\r\n\r\n function closeCartModal() {\r\n const cartModal = document.getElementById(\"cartModal\");\r\n if (cartModal) {\r\n cartModal.classList.add(\"hidden\");\r\n }\r\n }\r\n\r\n function processCheckout() {\r\n if (cart.length === 0) {\r\n alert(\"Votre panier est vide !\");\r\n return;\r\n }\r\n\r\n alert(\"Fonctionnalit\u00e9 de paiement a impl\u00e9menter. Articles dans le panier : \" + cart.length);\r\n \/\/ Here you would integrate with a payment processor\r\n }\r\n\r\n \/\/ Exposer les fonctions globalement pour les boutons onclick\r\n window.removeFromCart = removeFromCart;\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Sound System – La Subvision Navigation Accueil Tracks Merch Le Collectif Adh\u00e9rer Sound System 0 Sound System Notre Materiel Notre Soundsystem Demande de Location Personnalisee Nom et Prenom * Email * Date de l’evenement Type d’evenement Message ou Besoins specifiques Envoyer la demande Panier Total: 0.00\u20ac Proc\u00e9der au paiement<\/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-24","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\/24","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=24"}],"version-history":[{"count":7,"href":"https:\/\/lasubvision.com\/index.php?rest_route=\/wp\/v2\/pages\/24\/revisions"}],"predecessor-version":[{"id":105,"href":"https:\/\/lasubvision.com\/index.php?rest_route=\/wp\/v2\/pages\/24\/revisions\/105"}],"wp:attachment":[{"href":"https:\/\/lasubvision.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}