{"id":13,"date":"2025-11-25T13:50:59","date_gmt":"2025-11-25T13:50:59","guid":{"rendered":"https:\/\/lasubvision.com\/?page_id=13"},"modified":"2025-11-29T13:25:33","modified_gmt":"2025-11-29T13:25:33","slug":"tracks","status":"publish","type":"page","link":"https:\/\/lasubvision.com\/?page_id=13","title":{"rendered":"Tracks"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"13\" class=\"elementor elementor-13\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7cd50ec e-flex e-con-boxed e-con e-parent\" data-id=\"7cd50ec\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4fef1f8 elementor-widget elementor-widget-html\" data-id=\"4fef1f8\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n    <base target=\"_self\">\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Tracks - La Subvision<\/title>\r\n    <meta name=\"description\" content=\"Tracks de 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        @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\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        .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       \r\n        .track-link {\r\n            color: #ffffff !important;\r\n        }\r\n\r\n        .track-link:hover {\r\n            color: #dc2626 !important;\r\n        }\r\n\r\n        \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; \/* 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; \/* 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    <!-- Logo centr\u00e9 au milieu en fond - AGRANDI -->\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\u00e9sion<\/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\">Tracks<\/h2>\r\n            <\/div>\r\n            \r\n           \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                <!-- Track 1 -->\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=\"http:\/\/lasubvision.com\/wp-content\/uploads\/2025\/11\/Plan-de-travail-1-1-scaled.jpg\" alt=\"SVVABPM001 - 13 tracks\" class=\"w-full h-48 object-cover\" loading=\"lazy\">\r\n                    <div class=\"p-6 flex flex-col\">\r\n                        <h3 class=\"text-2xl font-semibold mb-4 flex-grow text-white\">SVVABPM001 - 13 tracks<\/h3>\r\n                        <div class=\"flex justify-between items-center mt-auto\">\r\n                            <div class=\"flex items-center min-h-[28px]\">\r\n                                <span class=\"text-accent font-bold text-lg\">13.00\u20ac<\/span>\r\n                            <\/div>\r\n                            <div class=\"flex items-center min-h-[28px]\">\r\n                                <a href=\"https:\/\/subvisionsound.bandcamp.com\/album\/bpm-vol1\" target=\"_blank\" rel=\"noopener\" class=\"track-link transition-colors\">\r\n                                    <i class=\"fas fa-arrow-right text-2xl\"><\/i>\r\n                                <\/a>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <!-- Track 2 -->\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=\"http:\/\/lasubvision.com\/wp-content\/uploads\/2025\/11\/are-you-gonna-be-my-girl.jpg\" alt=\"Jet \/ Are you gonna be my girl (Wasup DNB edit)\" class=\"w-full h-48 object-cover\" loading=\"lazy\">\r\n                    <div class=\"p-6 flex flex-col\">\r\n                        <h3 class=\"text-2xl font-semibold mb-4 flex-grow text-white\">Jet \/ Are you gonna be my girl (Wasup DNB edit)<\/h3>\r\n                        <div class=\"flex justify-between items-center mt-auto\">\r\n                            <div class=\"flex items-center min-h-[28px]\">\r\n                                <span class=\"text-accent font-bold text-lg\">FREE<\/span>\r\n                            <\/div>\r\n                            <div class=\"flex items-center min-h-[28px]\">\r\n                                <a href=\"sound\/master BE MY GIRL 172bpm.wav\" download target=\"_blank\" rel=\"noopener\" class=\"track-link transition-colors\">\r\n                                    <i class=\"fas fa-arrow-right text-2xl\"><\/i>\r\n                                <\/a>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <!-- Track 3 -->\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=\"http:\/\/lasubvision.com\/wp-content\/uploads\/2025\/11\/1st-may.png\" alt=\"1st May EP\" class=\"w-full h-48 object-cover\" loading=\"lazy\">\r\n                    <div class=\"p-6 flex flex-col\">\r\n                        <h3 class=\"text-2xl font-semibold mb-4 flex-grow text-white\">1st May EP<\/h3>\r\n                        <div class=\"flex justify-between items-center mt-auto\">\r\n                            <div class=\"flex items-center min-h-[28px]\">\r\n                                <span class=\"text-accent font-bold text-lg\">5.00\u20ac<\/span>\r\n                            <\/div>\r\n                            <div class=\"flex items-center min-h-[28px]\">\r\n                                <a href=\"https:\/\/subvisionsound.bandcamp.com\/album\/1st-may\" target=\"_blank\" rel=\"noopener\" class=\"track-link transition-colors\">\r\n                                    <i class=\"fas fa-arrow-right text-2xl\"><\/i>\r\n                                <\/a>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\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        \r\n        let cart = [];\r\n\r\n        \r\n        document.addEventListener(\"DOMContentLoaded\", function() {\r\n            initializeNavigation();\r\n            initializeCart();\r\n            \r\n           \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          \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            \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            \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          \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            \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 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            \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            \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              \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            \r\n        }\r\n\r\n        \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>Tracks &#8211; La Subvision Navigation Accueil Tracks Merch Le Collectif Adh\u00e9sion Sound System 0 Tracks SVVABPM001 &#8211; 13 tracks 13.00\u20ac Jet \/ Are you gonna be my girl (Wasup DNB edit) FREE 1st May EP 5.00\u20ac 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-13","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\/13","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=13"}],"version-history":[{"count":14,"href":"https:\/\/lasubvision.com\/index.php?rest_route=\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":162,"href":"https:\/\/lasubvision.com\/index.php?rest_route=\/wp\/v2\/pages\/13\/revisions\/162"}],"wp:attachment":[{"href":"https:\/\/lasubvision.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}