{"id":434,"date":"2026-06-23T00:27:40","date_gmt":"2026-06-22T22:27:40","guid":{"rendered":"https:\/\/venomjaxx.serveblog.net\/?page_id=434"},"modified":"2026-08-20T00:40:13","modified_gmt":"2026-08-19T22:40:13","slug":"le-studio","status":"publish","type":"page","link":"https:\/\/venomjaxx.serveblog.net\/index.php\/le-studio\/","title":{"rendered":"GALERIE"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* --- CONFIGURATION GLOBALE DE LA GALERIE --- *\/\n.future-gallery {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n  gap: 25px;\n  padding: 20px;\n  background-color: #0a0a0c; \/* Fond sombre pour faire ressortir les n\u00e9ons *\/\n}\n\n\/* --- LE STYLE CYBERPUNK DES CARTES --- *\/\n.gallery-card {\n  position: relative;\n  display: block;\n  overflow: hidden;\n  background: #121214;\n  border: 1px solid #26262b;\n  text-decoration: none;\n  \n  \/* Coupe le coin inf\u00e9rieur droit fa\u00e7on interface de jeu SF *\/\n  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);\n  \n  \/* Animation fluide *\/\n  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), \n              box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), \n              border-color 0.2s ease;\n}\n\n.gallery-card img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  filter: grayscale(40%) contrast(110%);\n  transition: transform 0.3s ease, filter 0.3s ease;\n}\n\n\/* --- L'OVERLAY D'ORIGINE REVU EN MODE CYBER --- *\/\n.card-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(to top, rgba(10, 10, 12, 0.9) 0%, rgba(10, 10, 12, 0.2) 70%);\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  padding: 20px;\n  box-sizing: border-box;\n  z-index: 2;\n}\n\n.card-overlay h3 {\n  color: #ffffff;\n  margin: 0 0 5px 0;\n  font-family: 'Impact', 'Arial Black', sans-serif;\n  text-transform: uppercase;\n  letter-spacing: 2px;\n  font-size: 1.3rem;\n  transition: text-shadow 0.2s ease, color 0.2s ease;\n}\n\n.card-overlay p {\n  color: #00ff64; \/* Vert Venin *\/\n  margin: 0;\n  font-family: monospace;\n  font-size: 0.85rem;\n  text-transform: uppercase;\n  letter-spacing: 1px;\n}\n\n\/* --- LES EFFETS AU SURVOL (HOVER FX) --- *\/\n\n\/* 1. L'effet de double lueur n\u00e9on asym\u00e9trique (Nette, pas floue) *\/\n.gallery-card:hover {\n  border-color: #00ff64;\n  box-shadow: -4px -4px 0px #ff0055, 4px 4px 0px #00ff64;\n  transform: translate(2px, -2px);\n}\n\n\/* 2. Zoom de l'image et r\u00e9activation des couleurs *\/\n.gallery-card:hover img {\n  filter: grayscale(0%) contrast(125%);\n  transform: scale(1.05);\n}\n\n\/* 3. Glitch chromatique discret sur le titre *\/\n.gallery-card:hover .card-overlay h3 {\n  color: #fff;\n  text-shadow: -2px 0 #ff0055, 2px 0 #00ff64;\n  animation: glitch-text 0.4s infinite linear alternate-reverse;\n}\n\n\/* 4. Effet d'interf\u00e9rence \/ Lignes de scan qui apparaissent au survol *\/\n.gallery-card::after {\n  content: '';\n  position: absolute;\n  top: 0; left: 0; width: 100%; height: 100%;\n  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 255, 100, 0.1) 50%);\n  background-size: 100% 4px;\n  opacity: 0;\n  pointer-events: none;\n  z-index: 3;\n  transition: opacity 0.2s ease;\n}\n\n.gallery-card:hover::after {\n  opacity: 1;\n}\n\n\/* --- ANIMATION DU GLITCH (MICRO-VIBRATIONS) --- *\/\n@keyframes glitch-text {\n  0% { text-shadow: -1px 0 #ff0055, 1px 0 #00ff64; }\n  50% { text-shadow: -2px 1px #ff0055, 2px -1px #00ff64; }\n  100% { text-shadow: 1px -1px #ff0055, -1px 2px #00ff64; }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n\/* ==========================================================================\n   GALERIE FUTURISTE - INTERACTIONS JS (LIGHTBOX & EFFET TILT 3D CYBER)\n   ========================================================================== *\/\n\ndocument.addEventListener('DOMContentLoaded', () => {\n    const cards = document.querySelectorAll('.gallery-card');\n\n    \/\/ 1. EFFET TILT 3D SURVOL + FUSION TRANSLATION CYBERPUNK\n    cards.forEach(card => {\n        card.addEventListener('mousemove', (e) => {\n            const cardRect = card.getBoundingClientRect();\n            \n            \/\/ Calcul de la position de la souris relative \u00e0 la carte (-0.5 \u00e0 0.5)\n            const x = (e.clientX - cardRect.left) \/ cardRect.width - 0.5;\n            const y = (e.clientY - cardRect.top) \/ cardRect.height - 0.5;\n            \n            \/\/ Angle maximal d'inclinaison (en degr\u00e9s)\n            const maxTilt = 8; \n            \n            \/\/ FUSION DU TILT ET DU D\u00c9CALAGE CYBERPUNK (On garde le translate(2px, -2px) du CSS !)\n            card.style.transform = `perspective(1000px) rotateX(${-y * maxTilt}deg) rotateY(${x * maxTilt}deg) translate(2px, -2px)`;\n        });\n\n        \/\/ R\u00e9initialisation propre \u00e0 la sortie de la souris\n        card.addEventListener('mouseleave', () => {\n            card.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg) translate(0, 0)';\n        });\n    });\n\n    \/\/ 2. CR\u00c9ATION DE LA LIGHTBOX CYBERPUNK\n    const lightbox = document.createElement('div');\n    lightbox.id = 'future-lightbox';\n    document.body.appendChild(lightbox);\n\n    \/\/ Style de la Lightbox (Fond ultra sombre)\n    Object.assign(lightbox.style, {\n        position: 'fixed',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n        backgroundColor: 'rgba(10, 10, 12, 0.98)',\n        display: 'none',\n        justifyContent: 'center',\n        alignItems: 'center',\n        zIndex: '99999',\n        cursor: 'pointer',\n        opacity: '0',\n        transition: 'opacity 0.4s ease'\n    });\n\n    const lightboxImg = document.createElement('img');\n    Object.assign(lightboxImg.style, {\n        maxWidth: '85%',\n        maxHeight: '85%',\n        border: '2px solid #00ff64', \/\/ Mis \u00e0 jour avec ton Vert Venin\n        boxShadow: '0 0 30px rgba(0, 255, 100, 0.25)', \/\/ Lueur verte assortie\n        transform: 'scale(0.95)',\n        transition: 'transform 0.4s ease',\n        \/\/ On applique aussi la d\u00e9coupe d'angle cyberpunk sur l'image en grand !\n        clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%)'\n    });\n    lightbox.appendChild(lightboxImg);\n\n    \/\/ Intercepter le clic pour ouvrir\n    cards.forEach(card => {\n        card.addEventListener('click', (e) => {\n            e.preventDefault();\n            const imageURL = card.getAttribute('href');\n            lightboxImg.src = imageURL;\n            \n            lightbox.style.display = 'flex';\n            setTimeout(() => {\n                lightbox.style.opacity = '1';\n                lightboxImg.style.transform = 'scale(1)';\n            }, 10);\n        });\n    });\n\n    \/\/ Fermeture au clic\n    lightbox.addEventListener('click', () => {\n        lightbox.style.opacity = '0';\n        lightboxImg.style.transform = 'scale(0.95)';\n        setTimeout(() => {\n            lightbox.style.display = 'none';\n        }, 400);\n    });\n});\n<\/script>\n\n<div class=\"future-gallery\">\n  \n  <a href=\"https:\/\/venomjaxx.serveblog.net\/wp-content\/uploads\/2026\/07\/IMG_20260604_155218.jpg\" class=\"gallery-card lightbox-link\">\n    <img decoding=\"async\" src=\"https:\/\/venomjaxx.serveblog.net\/wp-content\/uploads\/2026\/07\/IMG_20260604_155218.jpg\" alt=\"Projet 01\">\n    <div class=\"card-overlay\">\n      <h3>traitement acoustique<\/h3>\n      <p>Syst\u00e8me Actif<\/p>\n    <\/div>\n  <\/a>\n\n  <a href=\"https:\/\/venomjaxx.serveblog.net\/wp-content\/uploads\/2026\/06\/studioschema.png\" class=\"gallery-card lightbox-link\">\n    <img decoding=\"async\" src=\"https:\/\/venomjaxx.serveblog.net\/wp-content\/uploads\/2026\/06\/studioschema.png\" alt=\"Projet 02\">\n    <div class=\"card-overlay\">\n      <h3>circuit<\/h3>\n      <p>Data Stream<\/p>\n    <\/div>\n  <\/a>\n\n  <a href=\"https:\/\/venomjaxx.serveblog.net\/wp-content\/uploads\/2026\/07\/onboard-1.jpg\" class=\"gallery-card lightbox-link\">\n    <img decoding=\"async\" src=\"https:\/\/venomjaxx.serveblog.net\/wp-content\/uploads\/2026\/07\/onboard-1.jpg\" alt=\"Projet 03\">\n    <div class=\"card-overlay\">\n      <h3>Pedalboard<\/h3>\n      <p>Fr\u00e9quence \/ Signal<\/p>\n    <\/div>\n  <\/a>\n\n  <a href=\"https:\/\/venomjaxx.serveblog.net\/wp-content\/uploads\/2026\/07\/IMG_20260604_155724.jpg\" class=\"gallery-card lightbox-link\">\n    <img decoding=\"async\" src=\"https:\/\/venomjaxx.serveblog.net\/wp-content\/uploads\/2026\/07\/IMG_20260604_155724.jpg\" alt=\"Projet 04\">\n    <div class=\"card-overlay\">\n      <h3>guitars<\/h3>\n      <p>collection<\/p>\n    <\/div>\n  <\/a>\n\n  <a href=\"https:\/\/venomjaxx.serveblog.net\/wp-content\/uploads\/2026\/07\/IMG_20260604_155952.jpg\" class=\"gallery-card lightbox-link\">\n    <img decoding=\"async\" src=\"https:\/\/venomjaxx.serveblog.net\/wp-content\/uploads\/2026\/07\/IMG_20260604_155952.jpg\" alt=\"Projet 05\">\n    <div class=\"card-overlay\">\n      <h3>Amps<\/h3>\n      <p>for lives<\/p>\n    <\/div>\n  <\/a>\n\n  <a href=\"https:\/\/venomjaxx.serveblog.net\/wp-content\/uploads\/2026\/07\/1740419828547.jpg\" class=\"gallery-card lightbox-link\">\n    <img decoding=\"async\" src=\"https:\/\/venomjaxx.serveblog.net\/wp-content\/uploads\/2026\/07\/1740419828547.jpg\" alt=\"Projet 06\">\n    <div class=\"card-overlay\">\n      <h3>my microphone<\/h3>\n      <p><\/p>\n    <\/div>\n  <\/a>\n\n  <a href=\"https:\/\/venomjaxx.serveblog.net\/wp-content\/uploads\/2026\/08\/mef.jpeg\" class=\"gallery-card lightbox-link\">\n    <img decoding=\"async\" src=\"https:\/\/venomjaxx.serveblog.net\/wp-content\/uploads\/2026\/08\/mef.jpeg\" alt=\"Projet 07\">\n    <div class=\"card-overlay\">\n      <h3>me<\/h3>\n      <p><\/p>\n    <\/div>\n  <\/a>\n\n  <a href=\"https:\/\/venomjaxx.serveblog.net\/wp-content\/uploads\/2026\/08\/Gemini_Generated_Image_e4ees9e4ees9e4ee.png\" class=\"gallery-card lightbox-link\">\n    <img decoding=\"async\" src=\"https:\/\/venomjaxx.serveblog.net\/wp-content\/uploads\/2026\/08\/Gemini_Generated_Image_e4ees9e4ees9e4ee.png\" alt=\"Projet 08\">\n    <div class=\"card-overlay\">\n      <h3>my space<\/h3>\n      <p><\/p>\n    <\/div>\n  <\/a>\n\n<\/div>\n\n\n\n<script data-wp-block-html=\"js\">\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    \/\/ On va chercher toutes les balises h1 de la page\n    var titres = document.querySelectorAll('h1');\n    \n    titres.forEach(function(titre) {\n        \/\/ On force la couleur directement dans le style HTML de l'\u00e9l\u00e9ment\n        titre.style.setProperty('color', '#ff0000', 'important');\n        titre.style.setProperty('-webkit-text-fill-color', '#0EE827', 'important');\n    });\n});\n<\/script>\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>traitement acoustique Syst\u00e8me Actif circuit Data Stream Pedalboard Fr\u00e9quence \/ Signal guitars collection Amps for lives my microphone me my space<\/p>\n","protected":false},"author":1,"featured_media":110,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"0","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"","_seopress_redirections_param":"","_seopress_redirections_type":0,"_seopress_analysis_target_kw":"","footnotes":""},"class_list":["post-434","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/venomjaxx.serveblog.net\/index.php\/wp-json\/wp\/v2\/pages\/434","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/venomjaxx.serveblog.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/venomjaxx.serveblog.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/venomjaxx.serveblog.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/venomjaxx.serveblog.net\/index.php\/wp-json\/wp\/v2\/comments?post=434"}],"version-history":[{"count":43,"href":"https:\/\/venomjaxx.serveblog.net\/index.php\/wp-json\/wp\/v2\/pages\/434\/revisions"}],"predecessor-version":[{"id":999,"href":"https:\/\/venomjaxx.serveblog.net\/index.php\/wp-json\/wp\/v2\/pages\/434\/revisions\/999"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/venomjaxx.serveblog.net\/index.php\/wp-json\/wp\/v2\/media\/110"}],"wp:attachment":[{"href":"https:\/\/venomjaxx.serveblog.net\/index.php\/wp-json\/wp\/v2\/media?parent=434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}