{"id":1397,"date":"2026-01-16T08:20:32","date_gmt":"2026-01-16T07:20:32","guid":{"rendered":"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/?page_id=1397"},"modified":"2026-02-09T10:38:41","modified_gmt":"2026-02-09T09:38:41","slug":"mes-competences","status":"publish","type":"page","link":"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/mes-competences\/","title":{"rendered":"Mes comp\u00e9tences"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1397\" class=\"elementor elementor-1397\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1c420d5 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"1c420d5\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-a78b205 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"a78b205\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dc272ac wpr-logo-position-center elementor-widget elementor-widget-wpr-logo\" data-id=\"dc272ac\" 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-ede6652 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"ede6652\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c4f9dde 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=\"c4f9dde\" 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-c4f9dde\" 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-c4f9dde\" 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\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0357589 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"0357589\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;slideshow&quot;,&quot;background_slideshow_gallery&quot;:[{&quot;id&quot;:1426,&quot;url&quot;:&quot;https:\\\/\\\/techdeco-tarbes.fr\\\/2025\\\/LE%20COZ\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/map-baniere-3-scaled.png&quot;}],&quot;background_slideshow_slide_duration&quot;:150000000,&quot;background_slideshow_loop&quot;:&quot;yes&quot;,&quot;background_slideshow_slide_transition&quot;:&quot;fade&quot;,&quot;background_slideshow_transition_duration&quot;:500}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-5e649fa e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"5e649fa\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cb41b52 wpr-advanced-text-style-animated wpr-fancy-text-typing wpr-animated-text-infinite-yes elementor-widget elementor-widget-wpr-advanced-text\" data-id=\"cb41b52\" data-element_type=\"widget\" data-settings=\"{&quot;anim_loop&quot;:&quot;yes&quot;}\" data-widget_type=\"wpr-advanced-text.default\">\n\t\t\t\t\t\n\t\t<h3 class=\"wpr-advanced-text\">\n\n\t\t\t\t\t\n\t\t\t\t\t\t\t<span class=\"wpr-advanced-text-preffix\">Mes<\/span>\n\t\t\t\n\t\t<span class=\"wpr-anim-text wpr-anim-text-type-typing wpr-anim-text-letters\" data-anim-duration=\"200,2000\" data-anim-loop=\"yes\">\n\t\t\t<span class=\"wpr-anim-text-inner\">\n\t\t\t\t\t\t\t\t\t<b>Comp\u00e9tences <\/b>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/span>\n\n\t\t\t\t\n\t\t<\/h3>\n\t\t\n\t\t\t\t\t\t<\/div>\n\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-69f1f53 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"69f1f53\" 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-57ad39b elementor-widget elementor-widget-html\" data-id=\"57ad39b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Rajdhani:wght@500;600;700&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\r\n\r\n<div id=\"hero-skill-tree\">\r\n    \r\n    <div class=\"hst-headers\">\r\n        <div class=\"hst-col-header\">\r\n            <h2 class=\"hst-neon-title\">Marketing<\/h2>\r\n            <div class=\"hst-neon-line\"><\/div>\r\n        <\/div>\r\n        <div class=\"hst-col-header\">\r\n            <h2 class=\"hst-neon-title\">Communication<\/h2>\r\n            <div class=\"hst-neon-line\"><\/div>\r\n        <\/div>\r\n        <div class=\"hst-col-header\">\r\n            <h2 class=\"hst-neon-title\">Vente<\/h2>\r\n            <div class=\"hst-neon-line\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"hst-scroll-container\">\r\n        <div class=\"hst-canvas\" id=\"hst-canvas\">\r\n            <svg class=\"hst-svg-layer\" id=\"hst-svg-layer\" width=\"100%\" height=\"100%\"><\/svg>\r\n            <div id=\"hst-nodes-container\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"hst-side-panel\" id=\"hst-panel\">\r\n        <button class=\"hst-close-btn\" id=\"hst-close-panel\">&times;<\/button>\r\n        \r\n        <div class=\"hst-panel-inner\">\r\n            <div class=\"hst-panel-header\">\r\n                <div class=\"hst-icon-box\" id=\"hst-panel-icon\"><\/div>\r\n                <h3 id=\"hst-panel-title\">Titre<\/h3>\r\n            <\/div>\r\n\r\n            <div class=\"hst-preview-zone\" id=\"hst-preview-zone\"><\/div>\r\n\r\n            <div class=\"hst-panel-body\">\r\n                <p id=\"hst-panel-desc\">Description...<\/p>\r\n                <div class=\"hst-tags-container\" id=\"hst-panel-tags\">\r\n                    <\/div>\r\n                <a href=\"#\" id=\"hst-panel-link\" class=\"hst-action-btn\" target=\"_blank\">\r\n                    Voir la preuve <i class=\"fas fa-arrow-right\"><\/i>\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n    \/* --- 1. VARIABLES & BASE --- *\/\r\n    #hero-skill-tree {\r\n        \/* Th\u00e8me Jaune #FFE600 *\/\r\n        --hst-bg: #0f172a;\r\n        --hst-line-color: #334155;\r\n        --hst-accent: #FFE600; \r\n        --hst-line-active: var(--hst-accent);\r\n        --hst-node-bg: #1e293b;\r\n        --hst-node-border: #475569;\r\n        --hst-accent-bright: #FFFACD; \r\n        --hst-active-glow: rgba(255, 230, 0, 0.6); \r\n        --hst-text: #f1f5f9;\r\n        --hst-panel-bg: rgba(15, 23, 42, 0.96);\r\n        --hst-font: 'Rajdhani', sans-serif;\r\n\r\n        position: relative;\r\n        width: 100%;\r\n        height: 900px; \/* Hauteur augment\u00e9e pour faire tenir les 8 noeuds *\/\r\n        \r\n        \/* Image de fond *\/\r\n        background-color: var(--hst-bg);\r\n        background-image: url('https:\/\/replicate.delivery\/xezq\/5f7849e0-2971-484e-b536-8e18c8150a91\/out-0.png');\r\n        background-size: 100% 100%;\r\n        background-position: center;\r\n        background-repeat: no-repeat;\r\n        \r\n        \/* Padding pour ne pas toucher le d\u00e9cor *\/\r\n        padding: 60px 80px 40px 80px; \r\n        box-sizing: border-box;\r\n\r\n        border-radius: 12px;\r\n        font-family: var(--hst-font);\r\n        overflow: hidden;\r\n        color: var(--hst-text);\r\n        box-shadow: inset 0 0 100px rgba(0,0,0,0.5); \r\n    }\r\n\r\n    \/* --- 2. HEADERS --- *\/\r\n    #hero-skill-tree .hst-headers {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr 1fr;\r\n        padding: 0 0 20px 0; \r\n        position: relative;\r\n        width: 100%;\r\n        z-index: 5;\r\n        pointer-events: none;\r\n    }\r\n\r\n    #hero-skill-tree .hst-col-header {\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n\r\n    #hero-skill-tree .hst-neon-title {\r\n        margin: 0;\r\n        font-family: var(--hst-font);\r\n        font-weight: 700;\r\n        font-size: 22px;\r\n        text-transform: uppercase;\r\n        letter-spacing: 3px;\r\n        color: #fff;\r\n        text-shadow: 0 0 10px var(--hst-accent), 0 0 20px var(--hst-accent);\r\n        margin-bottom: 8px;\r\n    }\r\n\r\n    #hero-skill-tree .hst-neon-line {\r\n        width: 50px;\r\n        height: 3px;\r\n        background: var(--hst-accent);\r\n        box-shadow: 0 0 10px var(--hst-accent);\r\n        border-radius: 2px;\r\n    }\r\n\r\n    \/* --- 3. CANVAS --- *\/\r\n    #hero-skill-tree .hst-scroll-container {\r\n        width: 100%;\r\n        height: calc(100% - 50px);\r\n        overflow: auto;\r\n        \/* Scrollbar styling *\/\r\n        scrollbar-width: thin;\r\n        scrollbar-color: var(--hst-accent) #1e293b;\r\n    }\r\n    \r\n    #hero-skill-tree .hst-scroll-container::-webkit-scrollbar { width: 6px; }\r\n    #hero-skill-tree .hst-scroll-container::-webkit-scrollbar-thumb { background: var(--hst-accent); border-radius: 3px; }\r\n\r\n    #hero-skill-tree .hst-canvas {\r\n        position: relative;\r\n        min-width: 600px;\r\n        height: 100%;\r\n        min-height: 800px; \r\n    }\r\n\r\n    \/* SVG Lines *\/\r\n    #hero-skill-tree .hst-svg-layer {\r\n        position: absolute; top: 0; left: 0; width: 100%; height: 100%;\r\n        pointer-events: none; z-index: 0;\r\n    }\r\n    #hero-skill-tree .hst-line {\r\n        stroke: var(--hst-line-color); stroke-width: 2; transition: all 0.4s ease; stroke-linecap: round;\r\n    }\r\n    #hero-skill-tree .hst-line.active {\r\n        stroke: var(--hst-line-active); stroke-width: 3; filter: drop-shadow(0 0 6px var(--hst-line-active));\r\n    }\r\n\r\n    \/* Nodes *\/\r\n    #hero-skill-tree .hst-node {\r\n        position: absolute;\r\n        width: 50px; height: 50px;\r\n        background: var(--hst-node-bg);\r\n        border: 2px solid var(--hst-node-border);\r\n        border-radius: 10px;\r\n        transform: translate(-50%, -50%);\r\n        display: flex; align-items: center; justify-content: center;\r\n        cursor: pointer; z-index: 1;\r\n        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n    }\r\n    #hero-skill-tree .hst-node i {\r\n        font-size: 20px; color: #64748b; transition: all 0.3s;\r\n    }\r\n\r\n    \/* Node Colors based on Type (Optionnel pour diff\u00e9rencier Tech\/Soft) *\/\r\n    #hero-skill-tree .hst-node[data-type=\"soft\"] { border-radius: 50%; } \/* Soft skills ronds *\/\r\n\r\n    \/* Interaction *\/\r\n    #hero-skill-tree .hst-node:hover {\r\n        border-color: var(--hst-accent);\r\n        transform: translate(-50%, -50%) scale(1.15) rotate(5deg);\r\n        z-index: 5;\r\n        box-shadow: 0 0 20px rgba(255, 230, 0, 0.4); \r\n    }\r\n    #hero-skill-tree .hst-node:hover i { color: var(--hst-accent); }\r\n    \r\n    \/* Active State *\/\r\n    #hero-skill-tree .hst-node.active {\r\n        background: rgba(255, 230, 0, 0.15); \r\n        border-color: var(--hst-accent);\r\n        box-shadow: 0 0 25px var(--hst-active-glow);\r\n    }\r\n    #hero-skill-tree .hst-node.active i { color: #fff; filter: drop-shadow(0 0 5px var(--hst-accent)); }\r\n    #hero-skill-tree .hst-node.selected { border-color: #fff; box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px #fff, 0 0 35px var(--hst-accent); }\r\n\r\n    \/* --- 4. SIDE PANEL --- *\/\r\n    #hero-skill-tree .hst-side-panel {\r\n        position: absolute;\r\n        top: 60px; right: 80px; bottom: 40px; \r\n        width: 320px;\r\n        background: var(--hst-panel-bg);\r\n        border-left: 1px solid rgba(255, 230, 0, 0.3);\r\n        border-radius: 8px;\r\n        z-index: 20;\r\n        transform: translateX(130%);\r\n        transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);\r\n        display: flex; flex-direction: column;\r\n        backdrop-filter: blur(10px);\r\n        box-shadow: -10px 0 50px rgba(0,0,0,0.8);\r\n    }\r\n    #hero-skill-tree .hst-side-panel.visible { transform: translateX(0); }\r\n\r\n    #hero-skill-tree .hst-panel-inner { padding: 25px; height: 100%; overflow-y: auto; }\r\n    \r\n    #hero-skill-tree .hst-close-btn {\r\n        position: absolute; top: 15px; right: 15px;\r\n        background: rgba(255,255,255,0.05); border: none;\r\n        width: 30px; height: 30px; border-radius: 50%;\r\n        color: #fff; cursor: pointer; z-index: 21;\r\n        display: flex; align-items: center; justify-content: center;\r\n        transition: 0.2s;\r\n    }\r\n    #hero-skill-tree .hst-close-btn:hover { background: var(--hst-accent); color: #000; }\r\n\r\n    #hero-skill-tree .hst-panel-header {\r\n        display: flex; align-items: center; gap: 15px;\r\n        border-bottom: 1px solid rgba(255, 230, 0, 0.2);\r\n        padding-bottom: 15px; margin-bottom: 20px;\r\n    }\r\n    #hero-skill-tree .hst-icon-box {\r\n        font-size: 24px; color: var(--hst-accent);\r\n        background: rgba(255, 230, 0, 0.1);\r\n        width: 45px; height: 45px;\r\n        display: flex; align-items: center; justify-content: center;\r\n        border-radius: 8px; border: 1px solid rgba(255, 230, 0, 0.3);\r\n    }\r\n    #hero-skill-tree h3 { margin: 0; font-size: 20px; color: #fff; text-transform: uppercase; }\r\n\r\n    #hero-skill-tree .hst-preview-zone {\r\n        width: 100%; aspect-ratio: 16 \/ 9;\r\n        background: #020617; border: 1px solid #334155;\r\n        border-radius: 6px; margin-bottom: 20px;\r\n        overflow: hidden; display: flex; align-items: center; justify-content: center;\r\n    }\r\n    #hero-skill-tree .hst-preview-zone iframe, \r\n    #hero-skill-tree .hst-preview-zone video, \r\n    #hero-skill-tree .hst-preview-zone img { width: 100%; height: 100%; object-fit: cover; }\r\n\r\n    #hero-skill-tree p { font-size: 15px; color: #cbd5e1; line-height: 1.5; margin-bottom: 20px; }\r\n\r\n    #hero-skill-tree .hst-tags-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }\r\n    .hst-tag {\r\n        font-size: 11px; padding: 4px 8px; border-radius: 4px;\r\n        background: rgba(255,255,255,0.05); color: var(--hst-accent);\r\n        border: 1px solid rgba(255,230,0,0.2); text-transform: uppercase;\r\n    }\r\n\r\n    #hero-skill-tree .hst-action-btn {\r\n        display: flex; align-items: center; justify-content: center;\r\n        width: 100%; padding: 14px;\r\n        background: linear-gradient(45deg, var(--hst-accent), #FFAA00);\r\n        color: #000; text-decoration: none;\r\n        font-weight: 800; text-transform: uppercase; letter-spacing: 1px;\r\n        border-radius: 6px; transition: all 0.3s; gap: 10px;\r\n    }\r\n    #hero-skill-tree .hst-action-btn:hover { filter: brightness(1.1); box-shadow: 0 0 20px rgba(255, 230, 0, 0.5); }\r\n\r\n    @media (max-width: 768px) {\r\n        #hero-skill-tree { padding: 40px 20px; height: 700px; }\r\n        #hero-skill-tree .hst-side-panel { width: auto; left: 10px; right: 10px; top: 10px; bottom: 10px; transform: translateY(120%); }\r\n        #hero-skill-tree .hst-side-panel.visible { transform: translateY(0); }\r\n    }\r\n<\/style>\r\n\r\n<script>\r\n(function() {\r\n    \/\/ --- DONN\u00c9ES COMPL\u00c8TES (8 items par colonne) ---\r\n    \/\/ Type: 'tech' (carr\u00e9) | 'action' (losange\/arrondi) | 'soft' (rond)\r\n    \/\/ Structure: Tech -> Action -> Soft (Branches finales)\r\n    \r\n    const skillsData = [\r\n        \/* ================= MARKETING (Gauche) ================= *\/\r\n        \/\/ 4 Comp\u00e9tences Techniques (1-4)\r\n        { \r\n            id: 'm-1', x: 20, y: 5, type: 'tech', icon: 'fas fa-bullseye', \r\n            title: 'Strat\u00e9gie Digitale', desc: 'Approche omnicanale et vision long terme.', \r\n            tags: ['Technique'], connections: ['m-2'] \r\n        },\r\n        { \r\n            id: 'm-2', x: 12, y: 15, type: 'tech', icon: 'fas fa-chart-pie', \r\n            title: 'Data Analytics', desc: 'Pilotage par la data et les KPIs (ROI, ROAS).', \r\n            tags: ['Technique'], connections: ['m-3'] \r\n        },\r\n        { \r\n            id: 'm-3', x: 20, y: 25, type: 'tech', icon: 'fas fa-pen-nib', \r\n            title: 'Content Marketing', desc: 'Strat\u00e9gie \u00e9ditoriale Inbound & Brand Content.', \r\n            tags: ['Technique'], connections: ['m-4'] \r\n        },\r\n        { \r\n            id: 'm-4', x: 12, y: 35, type: 'tech', icon: 'fas fa-users', \r\n            title: 'Connaissance Client', desc: 'Cr\u00e9ation de Personas et parcours UX.', \r\n            tags: ['Technique'], connections: ['m-5', 'm-6'] \/\/ Branchement vers les 2 savoir-faire\r\n        },\r\n        \/\/ 2 Savoir-faire (5-6)\r\n        { \r\n            id: 'm-5', x: 8, y: 50, type: 'action', icon: 'fas fa-ad', \r\n            title: 'Campagnes Ads', desc: 'Pilotage Google Ads & Meta Business Suite.', \r\n            tags: ['Savoir-faire'], connections: ['m-7'] \r\n        },\r\n        { \r\n            id: 'm-6', x: 24, y: 50, type: 'action', icon: 'fas fa-robot', \r\n            title: 'Automation CRM', desc: 'Workflows et Nurturing (HubSpot\/Salesforce).', \r\n            tags: ['Savoir-faire'], connections: ['m-8'] \r\n        },\r\n        \/\/ 2 Savoir-\u00eatre (7-8) - Fin de branches\r\n        { \r\n            id: 'm-7', x: 10, y: 70, type: 'soft', icon: 'fas fa-lightbulb', \r\n            title: 'Cr\u00e9ativit\u00e9', desc: 'Innovation et pens\u00e9e \"Out of the box\".', \r\n            tags: ['Savoir-\u00eatre'], connections: [] \r\n        },\r\n        { \r\n            id: 'm-8', x: 22, y: 70, type: 'soft', icon: 'fas fa-binoculars', \r\n            title: 'Curiosit\u00e9 \/ Veille', desc: 'Toujours \u00e0 l\\'aff\u00fbt des tendances.', \r\n            tags: ['Savoir-\u00eatre'], connections: [] \r\n        },\r\n\r\n\r\n        \/* ================= COMMUNICATION (Centre) ================= *\/\r\n        \/\/ 4 Tech\r\n        { \r\n            id: 'c-1', x: 50, y: 5, type: 'tech', icon: 'fas fa-hashtag', \r\n            title: 'Social Media', desc: 'Gestion de communaut\u00e9s et e-r\u00e9putation.', \r\n            tags: ['Technique'], connections: ['c-2'] \r\n        },\r\n        { \r\n            id: 'c-2', x: 58, y: 15, type: 'tech', icon: 'fas fa-feather-alt', \r\n            title: 'Copywriting', desc: 'R\u00e9daction persuasive et storytelling.', \r\n            tags: ['Technique'], connections: ['c-3'] \r\n        },\r\n        { \r\n            id: 'c-3', x: 42, y: 25, type: 'tech', icon: 'fas fa-paint-brush', \r\n            title: 'Cr\u00e9ation Visuelle', desc: 'Ma\u00eetrise PAO (Adobe\/Canva) pour visuels impactants.', \r\n            tags: ['Technique'], connections: ['c-4'] \r\n        },\r\n        { \r\n            id: 'c-4', x: 50, y: 35, type: 'tech', icon: 'fas fa-tasks', \r\n            title: 'Gestion Projet', desc: 'Coordination \u00e9v\u00e9nementielle et r\u00e9troplanning.', \r\n            tags: ['Technique'], connections: ['c-5', 'c-6'] \r\n        },\r\n        \/\/ 2 Action\r\n        { \r\n            id: 'c-5', x: 40, y: 50, type: 'action', icon: 'fas fa-map-signs', \r\n            title: 'Plan de Com', desc: 'D\u00e9finition des cibles et canaux de diffusion.', \r\n            tags: ['Savoir-faire'], connections: ['c-7'] \r\n        },\r\n        { \r\n            id: 'c-6', x: 60, y: 50, type: 'action', icon: 'fas fa-newspaper', \r\n            title: 'Relations Presse', desc: 'Influence et contacts journalistes.', \r\n            tags: ['Savoir-faire'], connections: ['c-8'] \r\n        },\r\n        \/\/ 2 Soft\r\n        { \r\n            id: 'c-7', x: 45, y: 70, type: 'soft', icon: 'fas fa-heart', \r\n            title: 'Empathie', desc: 'Intelligence \u00e9motionnelle pour toucher la cible.', \r\n            tags: ['Savoir-\u00eatre'], connections: [] \r\n        },\r\n        { \r\n            id: 'c-8', x: 55, y: 70, type: 'soft', icon: 'fas fa-bolt', \r\n            title: 'R\u00e9activit\u00e9', desc: 'Gestion de crise et adaptation rapide.', \r\n            tags: ['Savoir-\u00eatre'], connections: [] \r\n        },\r\n\r\n\r\n        \/* ================= VENTE (Droite) ================= *\/\r\n        \/\/ 4 Tech\r\n        { \r\n            id: 'v-1', x: 80, y: 5, type: 'tech', icon: 'fas fa-handshake', \r\n            title: 'N\u00e9gociation', desc: 'Traitement des objections et closing.', \r\n            tags: ['Technique'], connections: ['v-2'] \r\n        },\r\n        { \r\n            id: 'v-2', x: 88, y: 15, type: 'tech', icon: 'fas fa-phone-alt', \r\n            title: 'Prospection', desc: 'Chasse, Cold calling et Social Selling.', \r\n            tags: ['Technique'], connections: ['v-3'] \r\n        },\r\n        { \r\n            id: 'v-3', x: 80, y: 25, type: 'tech', icon: 'fas fa-database', \r\n            title: 'Outils GRC', desc: 'Gestion de pipeline CRM rigoureuse.', \r\n            tags: ['Technique'], connections: ['v-4'] \r\n        },\r\n        { \r\n            id: 'v-4', x: 88, y: 35, type: 'tech', icon: 'fas fa-box-open', \r\n            title: 'Expertise Produit', desc: 'Connaissance march\u00e9 et concurrence.', \r\n            tags: ['Technique'], connections: ['v-5', 'v-6'] \r\n        },\r\n        \/\/ 2 Action\r\n        { \r\n            id: 'v-5', x: 78, y: 50, type: 'action', icon: 'fas fa-search', \r\n            title: 'Entretien D\u00e9couverte', desc: 'Diagnostic pr\u00e9cis des besoins clients.', \r\n            tags: ['Savoir-faire'], connections: ['v-7'] \r\n        },\r\n        { \r\n            id: 'v-6', x: 92, y: 50, type: 'action', icon: 'fas fa-file-invoice-dollar', \r\n            title: 'Proposition', desc: 'R\u00e9daction d\\'offres commerciales persuasives.', \r\n            tags: ['Savoir-faire'], connections: ['v-8'] \r\n        },\r\n        \/\/ 2 Soft\r\n        { \r\n            id: 'v-7', x: 82, y: 70, type: 'soft', icon: 'fas fa-shield-alt', \r\n            title: 'R\u00e9silience', desc: 'Pers\u00e9v\u00e9rance face aux refus.', \r\n            tags: ['Savoir-\u00eatre'], connections: [] \r\n        },\r\n        { \r\n            id: 'v-8', x: 90, y: 70, type: 'soft', icon: 'fas fa-assistive-listening-systems', \r\n            title: '\u00c9coute Active', desc: 'Compr\u00e9hension profonde du prospect.', \r\n            tags: ['Savoir-\u00eatre'], connections: [] \r\n        }\r\n    ];\r\n\r\n    const container = document.getElementById('hst-nodes-container');\r\n    const svgLayer = document.getElementById('hst-svg-layer');\r\n    const panel = document.getElementById('hst-panel');\r\n    const previewZone = document.getElementById('hst-preview-zone');\r\n    \r\n    \/\/ Panel Elements\r\n    const pTitle = document.getElementById('hst-panel-title');\r\n    const pDesc = document.getElementById('hst-panel-desc');\r\n    const pIcon = document.getElementById('hst-panel-icon');\r\n    const pLink = document.getElementById('hst-panel-link');\r\n    const pTags = document.getElementById('hst-panel-tags');\r\n\r\n    const skillsMap = {};\r\n    skillsData.forEach(s => skillsMap[s.id] = s);\r\n\r\n    let activeSkills = new Set();\r\n    let currentSelection = null;\r\n\r\n    function initTree() {\r\n        container.innerHTML = '';\r\n        svgLayer.innerHTML = '';\r\n\r\n        \/\/ 1. Draw Lines\r\n        skillsData.forEach(parent => {\r\n            if (parent.connections) {\r\n                parent.connections.forEach(childId => {\r\n                    const child = skillsMap[childId];\r\n                    if (child) drawLine(parent, child);\r\n                });\r\n            }\r\n        });\r\n\r\n        \/\/ 2. Draw Nodes\r\n        skillsData.forEach(skill => {\r\n            const node = document.createElement('div');\r\n            node.className = 'hst-node';\r\n            node.style.left = skill.x + '%';\r\n            node.style.top = skill.y + '%';\r\n            node.setAttribute('data-type', skill.type); \/\/ Pour styling sp\u00e9cifique\r\n            node.id = `node-${skill.id}`;\r\n            node.innerHTML = `<i class=\"${skill.icon}\"><\/i>`;\r\n            \r\n            node.addEventListener('click', (e) => {\r\n                e.stopPropagation(); \r\n                toggleSkill(skill, node);\r\n            });\r\n            container.appendChild(node);\r\n        });\r\n    }\r\n\r\n    function drawLine(parent, child) {\r\n        const line = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\r\n        line.setAttribute('x1', parent.x + '%');\r\n        line.setAttribute('y1', parent.y + '%');\r\n        line.setAttribute('x2', child.x + '%');\r\n        line.setAttribute('y2', child.y + '%');\r\n        line.setAttribute('class', 'hst-line');\r\n        line.setAttribute('id', `line-${parent.id}-${child.id}`);\r\n        svgLayer.appendChild(line);\r\n    }\r\n\r\n    function toggleSkill(skill, nodeElement) {\r\n        if (activeSkills.has(skill.id)) {\r\n            activeSkills.delete(skill.id);\r\n            nodeElement.classList.remove('active');\r\n            if (currentSelection === skill.id) {\r\n                 nodeElement.classList.remove('selected');\r\n                 closePanel();\r\n            }\r\n        } else {\r\n            activeSkills.add(skill.id);\r\n            nodeElement.classList.add('active');\r\n            selectNodeForPanel(skill, nodeElement);\r\n        }\r\n        updateConnections();\r\n    }\r\n\r\n    function selectNodeForPanel(skill, nodeElement) {\r\n        document.querySelectorAll('.hst-node').forEach(n => n.classList.remove('selected'));\r\n        nodeElement.classList.add('selected');\r\n        currentSelection = skill.id;\r\n\r\n        pTitle.textContent = skill.title;\r\n        pDesc.textContent = skill.desc;\r\n        pIcon.innerHTML = `<i class=\"${skill.icon}\"><\/i>`;\r\n        pLink.href = skill.link || '#';\r\n        \r\n        \/\/ Tags Management\r\n        pTags.innerHTML = '';\r\n        if(skill.tags) {\r\n            skill.tags.forEach(tag => {\r\n                const span = document.createElement('span');\r\n                span.className = 'hst-tag';\r\n                span.textContent = tag;\r\n                pTags.appendChild(span);\r\n            });\r\n        }\r\n\r\n        previewZone.innerHTML = '';\r\n        if (skill.video) {\r\n            if (skill.video.includes('youtube') || skill.video.includes('vimeo')) {\r\n                previewZone.innerHTML = `<iframe src=\"${skill.video}\" frameborder=\"0\" allowfullscreen><\/iframe>`;\r\n            } else if (skill.video.match(\/\\.(jpeg|jpg|gif|png)$\/)) {\r\n                previewZone.innerHTML = `<img decoding=\"async\" src=\"${skill.video}\" alt=\"Preview\">`;\r\n            } else {\r\n                previewZone.innerHTML = `<video src=\"${skill.video}\" autoplay loop muted playsinline><\/video>`;\r\n            }\r\n        } else {\r\n            \/\/ Icone g\u00e9ante si pas de vid\u00e9o\r\n            previewZone.innerHTML = `<div style=\"color:#334155; font-size:40px;\"><i class=\"fas fa-play-circle\"><\/i><\/div>`;\r\n        }\r\n\r\n        panel.classList.add('visible');\r\n    }\r\n\r\n    function updateConnections() {\r\n        skillsData.forEach(parent => {\r\n            if(parent.connections) {\r\n                parent.connections.forEach(childId => {\r\n                    const line = document.getElementById(`line-${parent.id}-${childId}`);\r\n                    \/\/ Ligne active si Parent ET Enfant sont actifs\r\n                    if (activeSkills.has(parent.id) && activeSkills.has(childId)) {\r\n                        line.classList.add('active');\r\n                    } else {\r\n                        line.classList.remove('active');\r\n                    }\r\n                });\r\n            }\r\n        });\r\n    }\r\n\r\n    function closePanel() {\r\n        panel.classList.remove('visible');\r\n        if (currentSelection) {\r\n            const el = document.getElementById(`node-${currentSelection}`);\r\n            if(el) el.classList.remove('selected');\r\n            currentSelection = null;\r\n        }\r\n    }\r\n\r\n    document.getElementById('hst-close-panel').addEventListener('click', closePanel);\r\n\r\n    initTree();\r\n})();\r\n<\/script>\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 Mes Comp\u00e9tences Marketing Communication Vente &times; Titre Description&#8230; Voir la preuve<\/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-1397","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/wp-json\/wp\/v2\/pages\/1397","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=1397"}],"version-history":[{"count":20,"href":"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/wp-json\/wp\/v2\/pages\/1397\/revisions"}],"predecessor-version":[{"id":1903,"href":"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/wp-json\/wp\/v2\/pages\/1397\/revisions\/1903"}],"wp:attachment":[{"href":"https:\/\/techdeco-tarbes.fr\/2025\/LE%20COZ\/index.php\/wp-json\/wp\/v2\/media?parent=1397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}