{"id":45,"date":"2025-11-17T11:44:20","date_gmt":"2025-11-17T10:44:20","guid":{"rendered":"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/?page_id=45"},"modified":"2026-02-10T12:15:35","modified_gmt":"2026-02-10T11:15:35","slug":"mes-experiences","status":"publish","type":"page","link":"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/mes-experiences\/","title":{"rendered":"Mes exp\u00e9riences"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"45\" class=\"elementor elementor-45\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2861c00 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"2861c00\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-dc39eab e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"dc39eab\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-e452a10 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"e452a10\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-6804bf0 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"6804bf0\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c9f86f9 wpr-logo-position-center elementor-widget elementor-widget-wpr-logo\" data-id=\"c9f86f9\" data-element_type=\"widget\" data-widget_type=\"wpr-logo.default\">\n\t\t\t\t\t\t\t\t\n\t\t\t<div class=\"wpr-logo elementor-clearfix\">\n\n\t\t\t\t\t\t\t\t<picture class=\"wpr-logo-image\">\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<source srcset=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/wp-content\/uploads\/2025\/11\/m3-removebg-preview.png 1x, https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/wp-content\/uploads\/2025\/11\/m3-removebg-preview.png 2x\">\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/wp-content\/uploads\/2025\/11\/m3-removebg-preview.png\" alt=\"\">\n\n\t\t\t\t\t\t\t\t\t\t\t<a class=\"wpr-logo-url\" rel=\"home\" aria-label=\"\" href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/\"><\/a>\n\t\t\t\t\t\t\t\t\t<\/picture>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<a class=\"wpr-logo-url\" rel=\"home\" aria-label=\"\" href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/\"><\/a>\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-23c6278 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"23c6278\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-66445ff wpr-main-menu-align-center wpr-main-menu-align--mobilecenter wpr-mobile-toggle-v4 wpr-main-menu-align--tabletleft wpr-pointer-underline wpr-pointer-line-fx wpr-pointer-fx-fade wpr-sub-icon-caret-down wpr-sub-menu-fx-fade wpr-nav-menu-bp-tablet wpr-mobile-menu-display-dropdown wpr-mobile-menu-full-width wpr-sub-divider-yes elementor-widget elementor-widget-wpr-mega-menu\" data-id=\"66445ff\" data-element_type=\"widget\" data-settings=\"{&quot;menu_layout&quot;:&quot;horizontal&quot;}\" data-widget_type=\"wpr-mega-menu.default\">\n\t\t\t\t\t<nav class=\"wpr-nav-menu-container wpr-mega-menu-container wpr-nav-menu-horizontal\" data-trigger=\"hover\"><ul id=\"menu-1-66445ff\" class=\"wpr-nav-menu wpr-mega-menu\"><li class=\"nav-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-48\"><a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/\" class=\"wpr-menu-item wpr-pointer-item\"><span>Accueil<\/span><\/a><\/li>\n<li class=\"nav-2 menu-item menu-item-type-post_type menu-item-object-page menu-item-51\"><a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/qui-suis-je\/\" class=\"wpr-menu-item wpr-pointer-item\"><span>A propos de moi !<\/span><\/a><\/li>\n<li class=\"nav-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-50\"><a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/mes-experiences\/\" class=\"wpr-menu-item wpr-pointer-item\"><span>Mes exp\u00e9riences<\/span><\/a><\/li>\n<li class=\"nav-4 menu-item menu-item-type-post_type menu-item-object-page menu-item-1399\"><a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/mes-competences\/\" class=\"wpr-menu-item wpr-pointer-item\"><span>Mes comp\u00e9tences<\/span><\/a><\/li>\n<li class=\"nav-6 menu-item menu-item-type-post_type menu-item-object-page menu-item-1441\"><a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/mes-actualites\/\" class=\"wpr-menu-item wpr-pointer-item\"><span>Mes Projets<\/span><\/a><\/li>\n<li class=\"nav-5 menu-item menu-item-type-post_type menu-item-object-page menu-item-49\"><a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/contacts\/\" class=\"wpr-menu-item wpr-pointer-item\"><span>Contacts<\/span><\/a><\/li>\n<\/ul><\/nav><nav class=\"wpr-mobile-nav-menu-container\"><div class=\"wpr-mobile-toggle-wrap\"><div class=\"wpr-mobile-toggle\"><span class=\"wpr-mobile-toggle-line\"><\/span><span class=\"wpr-mobile-toggle-line\"><\/span><span class=\"wpr-mobile-toggle-line\"><\/span><\/div><\/div><div class=\"wpr-mobile-mega-menu-wrap \" toggle-backface=\"\"><ul id=\"mobile-menu-2-66445ff\" class=\"wpr-mobile-nav-menu wpr-mobile-mega-menu\"><li class=\"nav-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-48\"><a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/\" class=\"wpr-mobile-menu-item\">Accueil<\/a><\/li>\n<li class=\"nav-2 menu-item menu-item-type-post_type menu-item-object-page menu-item-51\"><a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/qui-suis-je\/\" class=\"wpr-mobile-menu-item\">A propos de moi !<\/a><\/li>\n<li class=\"nav-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-50\"><a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/mes-experiences\/\" class=\"wpr-mobile-menu-item\">Mes exp\u00e9riences<\/a><\/li>\n<li class=\"nav-4 menu-item menu-item-type-post_type menu-item-object-page menu-item-1399\"><a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/mes-competences\/\" class=\"wpr-mobile-menu-item\">Mes comp\u00e9tences<\/a><\/li>\n<li class=\"nav-6 menu-item menu-item-type-post_type menu-item-object-page menu-item-1441\"><a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/mes-actualites\/\" class=\"wpr-mobile-menu-item\">Mes Projets<\/a><\/li>\n<li class=\"nav-5 menu-item menu-item-type-post_type menu-item-object-page menu-item-49\"><a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/contacts\/\" class=\"wpr-mobile-menu-item\">Contacts<\/a><\/li>\n<\/ul><\/div><\/nav>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ea57b82 elementor-widget elementor-widget-html\" data-id=\"ea57b82\" 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<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Portfolio Experience Xbox<\/title>\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Orbitron:wght@400;500;700&family=VT323&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n    \/* =========================================\r\n       CONFIG POLICES & BASES\r\n       ========================================= *\/\r\n    body { \r\n        margin: 0; padding: 0; overflow: hidden; background: #111; \r\n        font-family: 'Orbitron', sans-serif; \r\n    }\r\n\r\n    \/* --- SUPPRESSION DES TITRES WORDPRESS --- *\/\r\n    .entry-title, .page-title, .entry-header, header#masthead, .site-header { display: none !important; }\r\n\r\n    \/* =========================================\r\n       1. LE LOGO ANIM\u00c9\r\n       ========================================= *\/\r\n    #intro-moving-logo {\r\n        position: fixed !important; \r\n        top: calc(50% - 150px) !important; \r\n        left: 50% !important;\r\n        transform: translate(-50%, -50%) !important;\r\n        width: 225px !important; \r\n        height: auto;\r\n        z-index: 1000000 !important;\r\n        display: block !important; opacity: 1 !important;\r\n        transition: all 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);\r\n        pointer-events: none;\r\n        filter: drop-shadow(0 0 20px rgba(16, 124, 16, 0.8));\r\n    }\r\n\r\n    body.intro-finished #intro-moving-logo {\r\n        top: 65px !important;      \r\n        left: calc(50% - 350px) !important;     \r\n        width: 32px !important;    \r\n        transform: translate(-50%, -50%) !important;\r\n        filter: drop-shadow(0 0 5px rgba(255,255,255,0.2));\r\n    }\r\n\r\n    \/* =========================================\r\n       2. ECRAN DE CHARGEMENT\r\n       ========================================= *\/\r\n    #boot-screen-overlay {\r\n        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;\r\n        background-color: #0d110d;\r\n        z-index: 99999; \r\n        display: flex; flex-direction: column; justify-content: flex-end; align-items: center;\r\n        cursor: pointer;\r\n        transition: opacity 0.8s ease 0.8s;\r\n    }\r\n    #boot-screen-overlay::after {\r\n        content: \" \"; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0;\r\n        background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));\r\n        z-index: 2; background-size: 100% 2px, 3px 100%; pointer-events: none;\r\n    }\r\n    .boot-text-container { margin-bottom: 15%; color: #107C10; text-align: center; z-index: 10; }\r\n    \r\n    .boot-loader {\r\n        width: 40px; height: 40px; border: 4px solid rgba(16, 124, 16, 0.3);\r\n        border-top: 4px solid #107C10; border-radius: 50%; margin: 0 auto 20px auto;\r\n        animation: spin 1s linear infinite;\r\n    }\r\n\r\n    .boot-title {\r\n        font-family: 'VT323', monospace;\r\n        font-weight: 400; \r\n        letter-spacing: 2px; \r\n        text-transform: uppercase; \r\n        font-size: 2.2rem; \r\n        margin-bottom: 5px;\r\n    }\r\n    .boot-subtitle {\r\n        font-family: 'Orbitron', sans-serif;\r\n        font-weight: 700; \r\n        font-size: 1rem; \r\n        margin: 0;\r\n        letter-spacing: 1px;\r\n    }\r\n\r\n    .boot-hint { \r\n        margin-top: 15px; \r\n        font-family: 'Orbitron', sans-serif;\r\n        font-size: 0.8rem; \r\n        opacity: 0.7; color: white; \r\n        animation: blink 2s infinite; \r\n    }\r\n    \r\n    body.intro-finished #boot-screen-overlay { opacity: 0; pointer-events: none; }\r\n    body.intro-finished .boot-text-container { display: none; }\r\n\r\n    \/* =========================================\r\n       3. INTERFACE PRINCIPALE\r\n       ========================================= *\/\r\n\r\n    .xbox-top-bar {\r\n        position: fixed; \r\n        top: 25px; \r\n        left: 50%; transform: translateX(-50%);\r\n        width: 1145px; max-width: 95%;\r\n        height: 80px;\r\n        background: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.8) 100%);\r\n        border-bottom: 3px solid #107C10; \r\n        border-radius: 0 0 8px 8px; \r\n        box-shadow: 0 10px 30px rgba(0,0,0,0.5);\r\n        z-index: 1000; \r\n        display: flex; align-items: center; justify-content: space-between;\r\n        padding: 0 40px; box-sizing: border-box;\r\n    }\r\n    \r\n    .logo-spacer { width: 32px; height: 32px; display: block; flex-shrink: 0; }\r\n\r\n    .xbox-menu, .ps4-clock { opacity: 0; transition: opacity 1s ease 1.5s; }\r\n    body.intro-finished .xbox-menu, \r\n    body.intro-finished .ps4-clock { opacity: 1; }\r\n\r\n    .xbox-menu {\r\n        flex-grow: 1; \r\n        display: flex; align-items: center; justify-content: center; height: 100%;\r\n        margin: 0 20px;\r\n    }\r\n    .xbox-menu-item {\r\n        font-family: 'VT323', monospace;\r\n        font-size: 1.8rem; \r\n        font-weight: 400; color: #b0b0b0; \r\n        margin: 0 15px; text-decoration: none; text-transform: uppercase;\r\n        letter-spacing: 1px; transition: all 0.3s ease; position: relative; white-space: nowrap;\r\n    }\r\n    .xbox-menu-item:hover { color: #39ff14; text-shadow: 0 0 10px #39ff14, 0 0 20px #107C10; }\r\n    \r\n    .xbox-menu-item.active { color: white; text-shadow: 0 0 10px rgba(255,255,255,0.5); }\r\n    .xbox-menu-item.active::after {\r\n        content: ''; position: absolute; bottom: -20px; left: 0; width: 100%; height: 4px;\r\n        background: #107C10; box-shadow: 0 0 10px #107C10;\r\n    }\r\n\r\n    .ps4-clock { \r\n        font-family: 'VT323', monospace;\r\n        font-size: 2rem; \r\n        font-weight: 400; color: #fff; opacity: 0.9; white-space: nowrap; \r\n    }\r\n\r\n    .ps4-ui-container {\r\n        position: relative; width: 100%; height: 100vh; min-height: 600px;\r\n        background-color: #111; \r\n        background-position: center center; background-repeat: no-repeat; background-size: cover; \r\n        transition: background-image 0.5s ease-in-out;\r\n        overflow: hidden; color: white; user-select: none; perspective: 1000px;\r\n        opacity: 0; transition: opacity 1s ease 1.2s;\r\n    }\r\n    body.intro-finished .ps4-ui-container { opacity: 1; }\r\n\r\n    .ps4-ui-container::before {\r\n        content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;\r\n        background: radial-gradient(circle at center, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.7) 100%);\r\n        z-index: 0;\r\n    }\r\n\r\n    .ps4-list-wrapper {\r\n        position: absolute; top: 58%; left: 50%; transform: translateY(-50%); \r\n        width: 0; height: 380px; display: flex; align-items: center; z-index: 10; overflow: visible; \r\n    }\r\n    .ps4-list {\r\n        display: flex; align-items: center;\r\n        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);\r\n        transform-style: preserve-3d; position: absolute; left: 0; \r\n    }\r\n    \r\n    .ps4-item {\r\n        width: 250px; height: 250px; margin-right: 25px; \r\n        flex-shrink: 0; position: relative; cursor: pointer;\r\n        transform: scale(0.9); opacity: 0.9; filter: brightness(90%);\r\n        transition: all 0.3s ease; transform-origin: center center; \r\n    }\r\n    .ps4-item-image {\r\n        width: 100%; height: 100%;\r\n        background-size: cover; background-position: center;\r\n        border-radius: 2px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); transition: border 0.2s;\r\n    }\r\n    \r\n    \/* === MODIFICATION ICI : TAILLE ET POSITION TITRES === *\/\r\n    .ps4-item-title {\r\n        font-family: 'VT323', monospace;\r\n        position: absolute; \r\n        bottom: -50px; \/* Position standard *\/\r\n        left: -10%; width: 120%; text-align: center;\r\n        font-size: 1.8rem; \/* TAILLE REDUITE (c'\u00e9tait 2.5rem) *\/\r\n        font-weight: 400; opacity: 0; transition: opacity 0.2s ease;\r\n        text-shadow: 2px 2px 4px rgba(0,0,0,0.8); pointer-events: none; \r\n        text-transform: uppercase;\r\n    }\r\n    \r\n    \/* NOUVELLE CLASSE POUR DESCENDRE LES TEXTES LONGS *\/\r\n    .push-down {\r\n        bottom: -70px !important; \/* Descend plus bas pour les textes sur 2 lignes ou longs *\/\r\n    }\r\n    \r\n    .ps4-item.active {\r\n        transform: scale(1.35); opacity: 1; filter: brightness(100%);\r\n        z-index: 50; margin-right: 60px; margin-left: 60px; \r\n        box-shadow: 0 10px 30px rgba(0,0,0,0.5);\r\n    }\r\n    .ps4-item.active .ps4-item-image { border: 4px solid white; outline: 2px solid #107C10; }\r\n    .ps4-item.active .ps4-item-title { opacity: 1; }\r\n\r\n    .white-flash-overlay {\r\n        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;\r\n        background: white; z-index: 99998; opacity: 0; pointer-events: none;\r\n        transition: opacity 0.5s ease-in;\r\n    }\r\n    .flash-active { opacity: 1 !important; }\r\n\r\n    .launching-mode .ps4-item.active {\r\n        transition: transform 0.8s ease-in, opacity 0.3s;\r\n        transform: scale(25) !important; z-index: 9999 !important;\r\n    }\r\n    .launching-mode .ps4-item:not(.active),\r\n    .launching-mode .nav-arrow,\r\n    .launching-mode .xbox-top-bar { \r\n        opacity: 0 !important; transition: opacity 0.3s;\r\n    }\r\n\r\n    .nav-arrow { position: absolute; top: 58%; transform: translateY(-50%); font-size: 3rem; color: rgba(255,255,255,0.2); cursor: pointer; z-index: 90; padding: 20px; transition: all 0.3s; }\r\n    .nav-arrow:hover { color: white; text-shadow: 0 0 15px #107C10; transform: translateY(-50%) scale(1.1); }\r\n    .nav-left { left: 10px; }\r\n    .nav-right { right: 10px; }\r\n\r\n    @media (max-width: 768px) {\r\n        .xbox-top-bar { padding: 0 15px; height: 60px; width: 95%; top: 25px; }\r\n        body.intro-finished #intro-moving-logo { \r\n            top: 55px !important; \r\n            left: calc(50% - 40%) !important; \r\n            width: 26px !important; \r\n        }\r\n        .logo-spacer { width: 26px; }\r\n        .xbox-menu { justify-content: flex-start; overflow-x: scroll; }\r\n        .xbox-menu-item { margin: 0 8px; font-size: 1.4rem; } \r\n        .ps4-clock { display: none; }\r\n        .ps4-item { width: 180px; height: 180px; }\r\n        .ps4-item.active { margin-right: 30px; margin-left: 30px; }\r\n        #intro-moving-logo { width: 180px !important; } \r\n        .ps4-item-title { font-size: 1.5rem; bottom: -45px; }\r\n    }\r\n    \r\n    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\r\n    @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<audio id=\"boot-sound\">\r\n    <source src=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/wp-content\/uploads\/2025\/12\/xboxone.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n\r\n<img decoding=\"async\" src=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/wp-content\/uploads\/2025\/12\/mbox-removebg-preview.png\" alt=\"Logo\" id=\"intro-moving-logo\">\r\n\r\n<div id=\"boot-screen-overlay\" onclick=\"startExperience()\">\r\n    <div class=\"boot-text-container\">\r\n        <div class=\"boot-loader\"><\/div>\r\n        <div class=\"boot-title\">Chargement du profil<\/div>\r\n        <p class=\"boot-subtitle\">EXP\u00c9RIENCES PROFESSIONNELLES<\/p>\r\n        <div class=\"boot-hint\">(Appuyez pour d\u00e9marrer)<\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<div class=\"white-flash-overlay\"><\/div>\r\n\r\n<audio id=\"audioScroll\"><source src=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/wp-content\/uploads\/2025\/12\/xbox-scroll-left-right.mp3\" type=\"audio\/mpeg\"><\/audio>\r\n<audio id=\"audioSelect\"><source src=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/wp-content\/uploads\/2025\/12\/xbox-series-select.mp3\" type=\"audio\/mpeg\"><\/audio>\r\n\r\n<div class=\"xbox-top-bar\">\r\n    <div class=\"logo-spacer\"><\/div>\r\n    <div class=\"xbox-menu\">\r\n        <a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/\" class=\"xbox-menu-item\">Accueil<\/a>\r\n        <a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/qui-suis-je\/\" class=\"xbox-menu-item\">A propos de moi<\/a>\r\n        <a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/contacts\/\" class=\"xbox-menu-item\">Contacts<\/a>\r\n    <\/div>\r\n    <div class=\"ps4-clock\" id=\"liveClock\">00:00:00<\/div>\r\n<\/div>\r\n\r\n<div class=\"ps4-ui-container\" id=\"mainContainer\">\r\n    <div class=\"nav-arrow nav-left\" id=\"btnLeft\">&#10094;<\/div>\r\n    <div class=\"nav-arrow nav-right\" id=\"btnRight\">&#10095;<\/div>\r\n    <div class=\"ps4-list-wrapper\">\r\n        <div class=\"ps4-list\" id=\"ps4Carousel\">\r\n            <div data-link=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/job-etudiants-up2play\/\" data-bg=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/wp-content\/uploads\/2025\/11\/accueil-up2play-pornichet.jpg\" class=\"ps4-item active\">\r\n                <div class=\"ps4-item-image\" style=\"background-image: url('https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/wp-content\/uploads\/2025\/11\/accueil-up2play-pornichet.jpg');\"><\/div>\r\n                <div class=\"ps4-item-title\">Job \u00c9tudiant<\/div>\r\n            <\/div>\r\n            <div data-link=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/stage-parvis\/\" data-bg=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/wp-content\/uploads\/2025\/11\/parvis_0.jpg.webp\" class=\"ps4-item\">\r\n                <div class=\"ps4-item-image\" style=\"background-image: url('https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/wp-content\/uploads\/2025\/11\/parvis_0.jpg.webp');\"><\/div>\r\n                <div class=\"ps4-item-title\">Stage - Parvis<\/div>\r\n            <\/div>\r\n            <div data-link=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/immersion-le-pion-de-fer\/\" data-bg=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/wp-content\/uploads\/2025\/11\/P8-293-PION-DE-FER-01.webp\" class=\"ps4-item\">\r\n                <div class=\"ps4-item-image\" style=\"background-image: url('https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/wp-content\/uploads\/2025\/11\/P8-293-PION-DE-FER-01.webp');\"><\/div>\r\n                <div class=\"ps4-item-title push-down\">Immersion - Pion De Fer<\/div>\r\n            <\/div>\r\n            <div data-link=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/stage-credit-agricole\/\" data-bg=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/wp-content\/uploads\/2025\/11\/telechargement-_1_.png\" class=\"ps4-item\">\r\n                <div class=\"ps4-item-image\" style=\"background-image: url('https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/wp-content\/uploads\/2025\/11\/telechargement-_1_.png');\"><\/div>\r\n                <div class=\"ps4-item-title push-down\">Stage - Cr\u00e9dit Agricole<\/div>\r\n            <\/div>\r\n            <div data-link=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/job-dete-interim\/\" data-bg=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/wp-content\/uploads\/2025\/12\/IMG_1201_retouchee.png\" class=\"ps4-item\">\r\n                <div class=\"ps4-item-image\" style=\"background-image: url('https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/wp-content\/uploads\/2025\/12\/IMG_1201_retouchee.png');\"><\/div>\r\n                <div class=\"ps4-item-title\">Job d'\u00e9t\u00e9 - Int\u00e9rim<\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    function startExperience() {\r\n        const audio = document.getElementById('boot-sound');\r\n        audio.volume = 0.6;\r\n        audio.play().catch(e => console.error(\"Erreur Audio:\", e));\r\n        document.body.classList.add('intro-finished');\r\n    }\r\n\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n        const carousel = document.getElementById('ps4Carousel');\r\n        const items = document.querySelectorAll('.ps4-item');\r\n        const audioScroll = document.getElementById('audioScroll');\r\n        const audioSelect = document.getElementById('audioSelect');\r\n        const mainContainer = document.getElementById('mainContainer');\r\n        const whiteFlash = document.querySelector('.white-flash-overlay');\r\n        const clockEl = document.getElementById('liveClock');\r\n        let activeIndex = 0; \r\n        let isLaunching = false; \r\n\r\n        function updateClock() {\r\n            const now = new Date();\r\n            clockEl.innerText = now.toLocaleTimeString('fr-FR', {hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit'});\r\n        }\r\n        setInterval(updateClock, 1000); updateClock(); \r\n\r\n        function playScrollSound() { if(audioScroll) { audioScroll.currentTime = 0; audioScroll.play().catch(()=>{}); }}\r\n        function playSelectSound() { if(audioSelect) { audioSelect.currentTime = 0; audioSelect.play().catch(()=>{}); }}\r\n\r\n        function updateCarousel() {\r\n            items.forEach(item => item.classList.remove('active'));\r\n            const activeItem = items[activeIndex];\r\n            activeItem.classList.add('active');\r\n            const itemOffsetLeft = activeItem.offsetLeft;\r\n            const itemWidth = activeItem.offsetWidth;\r\n            const centerOfItem = itemOffsetLeft + (itemWidth \/ 2);\r\n            const translateX = -centerOfItem;\r\n            carousel.style.transform = `translateX(${translateX}px)`;\r\n            const newBg = activeItem.getAttribute('data-bg');\r\n            if(newBg) mainContainer.style.backgroundImage = `url('${newBg}')`;\r\n        }\r\n\r\n        function launchGame(index) {\r\n            if(isLaunching) return;\r\n            isLaunching = true;\r\n            const url = items[index].getAttribute('data-link');\r\n            if(!url || url === '#') { isLaunching = false; return; }\r\n            playSelectSound();\r\n            mainContainer.classList.add('launching-mode');\r\n            setTimeout(() => { whiteFlash.classList.add('flash-active'); }, 500);\r\n            setTimeout(() => { window.location.href = url; }, 1100);\r\n        }\r\n\r\n        function moveRight() { if (isLaunching) return; if (activeIndex < items.length - 1) { activeIndex++; playScrollSound(); updateCarousel(); }}\r\n        function moveLeft() { if (isLaunching) return; if (activeIndex > 0) { activeIndex--; playScrollSound(); updateCarousel(); }}\r\n\r\n        document.getElementById('btnRight').addEventListener('click', moveRight);\r\n        document.getElementById('btnLeft').addEventListener('click', moveLeft);\r\n        items.forEach((item, index) => { item.addEventListener('click', function(e) { if(isLaunching) return; if(activeIndex !== index) { activeIndex = index; playScrollSound(); updateCarousel(); } else { launchGame(index); }});});\r\n        document.addEventListener('keydown', function(e) { if(isLaunching) return; if (e.key === 'ArrowRight') moveRight(); if (e.key === 'ArrowLeft') moveLeft(); if (e.key === 'Enter') launchGame(activeIndex); });\r\n        setTimeout(updateCarousel, 50); window.addEventListener('resize', updateCarousel);\r\n    });\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<div class=\"elementor-element elementor-element-be79c8a e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"be79c8a\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b19fd43 wpr-main-menu-align-center wpr-pointer-line-fx wpr-pointer-fx-none wpr-main-menu-align--tabletcenter wpr-mobile-toggle-v4 wpr-pointer-underline wpr-sub-icon-caret-down wpr-sub-menu-fx-fade wpr-nav-menu-bp-mobile wpr-mobile-menu-full-width wpr-mobile-menu-item-align-center wpr-sub-divider-yes elementor-widget elementor-widget-wpr-nav-menu\" data-id=\"b19fd43\" data-element_type=\"widget\" data-settings=\"{&quot;menu_layout&quot;:&quot;horizontal&quot;}\" data-widget_type=\"wpr-nav-menu.default\">\n\t\t\t\t\t<nav class=\"wpr-nav-menu-container wpr-nav-menu-horizontal\" data-trigger=\"hover\"><ul id=\"menu-1-b19fd43\" class=\"wpr-nav-menu\"><li class=\"nav-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-48\"><a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/\" class=\"wpr-menu-item wpr-pointer-item\">Accueil<\/a><\/li>\n<li class=\"nav-2 menu-item menu-item-type-post_type menu-item-object-page menu-item-51\"><a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/qui-suis-je\/\" class=\"wpr-menu-item wpr-pointer-item\">A propos de moi !<\/a><\/li>\n<li class=\"nav-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-50\"><a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/mes-experiences\/\" class=\"wpr-menu-item wpr-pointer-item\">Mes exp\u00e9riences<\/a><\/li>\n<li class=\"nav-4 menu-item menu-item-type-post_type menu-item-object-page menu-item-1399\"><a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/mes-competences\/\" class=\"wpr-menu-item wpr-pointer-item\">Mes comp\u00e9tences<\/a><\/li>\n<li class=\"nav-6 menu-item menu-item-type-post_type menu-item-object-page menu-item-1441\"><a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/mes-actualites\/\" class=\"wpr-menu-item wpr-pointer-item\">Mes Projets<\/a><\/li>\n<li class=\"nav-5 menu-item menu-item-type-post_type menu-item-object-page menu-item-49\"><a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/contacts\/\" class=\"wpr-menu-item wpr-pointer-item\">Contacts<\/a><\/li>\n<\/ul><\/nav><nav class=\"wpr-mobile-nav-menu-container\"><div class=\"wpr-mobile-toggle-wrap\"><div class=\"wpr-mobile-toggle\"><span class=\"wpr-mobile-toggle-line\"><\/span><span class=\"wpr-mobile-toggle-line\"><\/span><span class=\"wpr-mobile-toggle-line\"><\/span><\/div><\/div><ul id=\"mobile-menu-2-b19fd43\" class=\"wpr-mobile-nav-menu\"><li class=\"nav-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-48\"><a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/\" class=\"wpr-mobile-menu-item\">Accueil<\/a><\/li>\n<li class=\"nav-2 menu-item menu-item-type-post_type menu-item-object-page menu-item-51\"><a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/qui-suis-je\/\" class=\"wpr-mobile-menu-item\">A propos de moi !<\/a><\/li>\n<li class=\"nav-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-50\"><a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/mes-experiences\/\" class=\"wpr-mobile-menu-item\">Mes exp\u00e9riences<\/a><\/li>\n<li class=\"nav-4 menu-item menu-item-type-post_type menu-item-object-page menu-item-1399\"><a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/mes-competences\/\" class=\"wpr-mobile-menu-item\">Mes comp\u00e9tences<\/a><\/li>\n<li class=\"nav-6 menu-item menu-item-type-post_type menu-item-object-page menu-item-1441\"><a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/mes-actualites\/\" class=\"wpr-mobile-menu-item\">Mes Projets<\/a><\/li>\n<li class=\"nav-5 menu-item menu-item-type-post_type menu-item-object-page menu-item-49\"><a href=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/contacts\/\" class=\"wpr-mobile-menu-item\">Contacts<\/a><\/li>\n<\/ul><\/nav>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aac5cb4 elementor-widget elementor-widget-text-editor\" data-id=\"aac5cb4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>mathieulecoz32@gmail.com<\/p><p>07-80-31-81-36<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-601d38f elementor-shape-rounded elementor-grid-0 e-grid-align-center elementor-widget elementor-widget-social-icons\" data-id=\"601d38f\" data-element_type=\"widget\" data-widget_type=\"social-icons.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-social-icons-wrapper elementor-grid\" role=\"list\">\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-linkedin elementor-animation-grow elementor-repeater-item-6082cb9\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Linkedin<\/span>\n\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fab-linkedin\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z\"><\/path><\/svg>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-instagram elementor-animation-grow elementor-repeater-item-4662104\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Instagram<\/span>\n\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fab-instagram\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z\"><\/path><\/svg>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-facebook elementor-animation-grow elementor-repeater-item-2f42ee3\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Facebook<\/span>\n\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fab-facebook\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z\"><\/path><\/svg>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3612b9f wpr-stt-btn-align-fixed wpr-stt-btn-align-fixed-right elementor-widget elementor-widget-wpr-back-to-top\" data-id=\"3612b9f\" data-element_type=\"widget\" data-widget_type=\"wpr-back-to-top.default\">\n\t\t\t\t\t<div class=\"wpr-stt-wrapper\"><div class='wpr-stt-btn' data-settings='{&quot;animation&quot;:&quot;fade&quot;,&quot;animationOffset&quot;:&quot;0&quot;,&quot;animationDuration&quot;:&quot;200&quot;,&quot;fixed&quot;:&quot;fixed&quot;,&quot;scrolAnim&quot;:&quot;800&quot;}'><span class=\"wpr-stt-icon\"><svg class=\"e-font-icon-svg e-fas-chevron-up\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z\"><\/path><\/svg><\/span><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-47c75bb e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"47c75bb\" 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-bc75a23 elementor-widget elementor-widget-html\" data-id=\"bc75a23\" 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    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Lecteur Musique N\u00e9on<\/title>\r\n    <style>\r\n        \/* D\u00e9finition de la couleur n\u00e9on principale *\/\r\n        :root {\r\n            --neon-color: #00f7ff; \/* Un cyan \u00e9lectrique *\/\r\n            --neon-glow-soft: rgba(0, 247, 255, 0.3);\r\n        }\r\n\r\n        \/* CSS DU LECTEUR *\/\r\n        \r\n        \/* Conteneur principal *\/\r\n        #music-container {\r\n            position: fixed;\r\n            bottom: 20px;\r\n            left: 20px;\r\n            \/* Fond sombre pour faire ressortir le n\u00e9on *\/\r\n            background-color: rgba(20, 20, 30, 0.9);\r\n            backdrop-filter: blur(10px);\r\n            padding: 15px 25px;\r\n            border-radius: 50px;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 20px;\r\n            color: var(--neon-color);\r\n            font-family: sans-serif;\r\n            z-index: 9999;\r\n            \r\n            \/* EFFET N\u00c9ON SUR LE CONTENEUR (Bordure + \u00c9clat) *\/\r\n            border: 2px solid var(--neon-color);\r\n            box-shadow: \r\n                0 0 10px var(--neon-glow-soft),\r\n                0 0 20px var(--neon-glow-soft),\r\n                inset 0 0 15px var(--neon-glow-soft);\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        \/* Petit effet au survol du conteneur global *\/\r\n        #music-container:hover {\r\n             box-shadow: \r\n                0 0 15px var(--neon-color),\r\n                0 0 30px var(--neon-glow-soft);\r\n        }\r\n\r\n        \/* Le bouton Play\/Pause *\/\r\n        #play-btn {\r\n            background: none;\r\n            border: none;\r\n            color: var(--neon-color);\r\n            font-size: 24px;\r\n            cursor: pointer;\r\n            width: 30px;\r\n            display: flex;\r\n            justify-content: center;\r\n            outline: none;\r\n            text-shadow: 0 0 8px var(--neon-color); \/* \u00c9clat sur le texte *\/\r\n            transition: transform 0.2s;\r\n        }\r\n        \r\n        #play-btn:active {\r\n            transform: scale(0.9);\r\n        }\r\n\r\n        \/* Ic\u00f4ne de volume *\/\r\n        .vol-icon {\r\n            font-size: 18px;\r\n            text-shadow: 0 0 8px var(--neon-color);\r\n        }\r\n\r\n        \/* --- LA BARRE DE SON N\u00c9ON --- *\/\r\n\r\n        \/* Style de base de la piste *\/\r\n        #volume-slider {\r\n            -webkit-appearance: none;\r\n            width: 120px;\r\n            height: 8px;\r\n            \/* Fond de la piste sombre *\/\r\n            background: #1a1a2e;\r\n            border-radius: 4px;\r\n            outline: none;\r\n            cursor: pointer;\r\n            \/* L\u00e9g\u00e8re bordure brillante et \u00e9clat interne sur la piste *\/\r\n            border: 1px solid rgba(0, 247, 255, 0.4);\r\n            box-shadow: inset 0 0 5px #000;\r\n        }\r\n\r\n        \/* --- Style du curseur (la boule) pour Chrome, Safari, Edge --- *\/\r\n        #volume-slider::-webkit-slider-thumb {\r\n            -webkit-appearance: none;\r\n            width: 18px;\r\n            height: 18px;\r\n            border-radius: 50%;\r\n            background: var(--neon-color);\r\n            cursor: pointer;\r\n            margin-top: -6px; \/* N\u00e9cessaire pour centrer sur Chrome *\/\r\n            \r\n            \/* L'EFFET N\u00c9ON CL\u00c9 : Multiples ombres pour l'\u00e9clat *\/\r\n            box-shadow: \r\n                0 0 5px var(--neon-color),\r\n                0 0 15px var(--neon-color),\r\n                0 0 30px var(--neon-color);\r\n            transition: background 0.2s, box-shadow 0.2s;\r\n        }\r\n\r\n        #volume-slider::-webkit-slider-thumb:hover {\r\n            background: white; \/* Le centre devient blanc au survol pour plus d'intensit\u00e9 *\/\r\n            box-shadow: \r\n                0 0 10px white,\r\n                0 0 20px var(--neon-color),\r\n                0 0 40px var(--neon-color);\r\n        }\r\n\r\n        \/* --- Style du curseur pour Firefox (n\u00e9cessaire car diff\u00e9rent) --- *\/\r\n        #volume-slider::-moz-range-thumb {\r\n            width: 18px;\r\n            height: 18px;\r\n            border: none;\r\n            border-radius: 50%;\r\n            background: var(--neon-color);\r\n            cursor: pointer;\r\n            \/* L'EFFET N\u00c9ON CL\u00c9 POUR FIREFOX *\/\r\n            box-shadow: \r\n                0 0 5px var(--neon-color),\r\n                0 0 15px var(--neon-color),\r\n                0 0 30px var(--neon-color);\r\n             transition: background 0.2s, box-shadow 0.2s;\r\n        }\r\n        \r\n        #volume-slider::-moz-range-track {\r\n             background: #1a1a2e;\r\n             height: 8px;\r\n             border-radius: 4px;\r\n             border: 1px solid rgba(0, 247, 255, 0.4);\r\n             box-shadow: inset 0 0 5px #000;\r\n        }\r\n         #volume-slider::-moz-range-thumb:hover {\r\n            background: white;\r\n            box-shadow: \r\n                0 0 10px white,\r\n                0 0 20px var(--neon-color),\r\n                0 0 40px var(--neon-color);\r\n        }\r\n\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <div id=\"music-container\">\r\n        <audio id=\"bg-music\" loop>\r\n            <source src=\"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/wp-content\/uploads\/2025\/12\/Kronicle-Chill-Noons.mp3\" type=\"audio\/mpeg\">\r\n        <\/audio>\r\n\r\n        <button id=\"play-btn\">\u25b6<\/button>\r\n        <span class=\"vol-icon\">\ud83d\udd0a<\/span>\r\n        <input type=\"range\" id=\"volume-slider\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.1\">\r\n    <\/div>\r\n\r\n    <script>\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            const audio = document.getElementById('bg-music');\r\n            const playBtn = document.getElementById('play-btn');\r\n            const volumeSlider = document.getElementById('volume-slider');\r\n\r\n            \/\/ 1. R\u00e9glage du volume initial\r\n            audio.volume = volumeSlider.value;\r\n\r\n            \/\/ 2. Fonction play\/pause\r\n            playBtn.addEventListener('click', () => {\r\n                if (audio.paused) {\r\n                    audio.play();\r\n                    playBtn.innerHTML = \"\u23f8\";\r\n                } else {\r\n                    audio.pause();\r\n                    playBtn.innerHTML = \"\u25b6\";\r\n                }\r\n            });\r\n\r\n            \/\/ 3. Gestion de la barre de son\r\n            volumeSlider.addEventListener('input', (e) => {\r\n                audio.volume = e.target.value;\r\n            });\r\n\r\n            \/\/ 4. Autoplay attempt\r\n            const playPromise = audio.play();\r\n            if (playPromise !== undefined) {\r\n                playPromise.then(_ => {\r\n                    playBtn.innerHTML = \"\u23f8\";\r\n                })\r\n                .catch(error => {\r\n                    console.log(\"Autoplay bloqu\u00e9. Attente interaction utilisateur.\");\r\n                    playBtn.innerHTML = \"\u25b6\";\r\n                });\r\n            }\r\n        });\r\n    <\/script>\r\n\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>Accueil A propos de moi ! Mes exp\u00e9riences Mes comp\u00e9tences Mes Projets Contacts Accueil A propos de moi ! Mes exp\u00e9riences Mes comp\u00e9tences Mes Projets Contacts Portfolio Experience Xbox Chargement du profil EXP\u00c9RIENCES PROFESSIONNELLES (Appuyez pour d\u00e9marrer) Accueil A propos de moi Contacts 00:00:00 &#10094; &#10095; Job \u00c9tudiant Stage &#8211; Parvis Immersion &#8211; Pion De Fer Stage &#8211; Cr\u00e9dit Agricole Job d&rsquo;\u00e9t\u00e9 &#8211; Int\u00e9rim Accueil A propos de moi ! Mes exp\u00e9riences Mes comp\u00e9tences Mes Projets Contacts Accueil A propos de moi ! Mes exp\u00e9riences Mes comp\u00e9tences Mes Projets Contacts mathieulecoz32@gmail.com 07-80-31-81-36 Linkedin Instagram Facebook Lecteur Musique N\u00e9on \u25b6 \ud83d\udd0a<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-45","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/wp-json\/wp\/v2\/pages\/45","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/wp-json\/wp\/v2\/comments?post=45"}],"version-history":[{"count":181,"href":"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/wp-json\/wp\/v2\/pages\/45\/revisions"}],"predecessor-version":[{"id":1901,"href":"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/wp-json\/wp\/v2\/pages\/45\/revisions\/1901"}],"wp:attachment":[{"href":"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/wp-json\/wp\/v2\/media?parent=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}