{"id":51,"date":"2026-04-30T11:28:08","date_gmt":"2026-04-30T11:28:08","guid":{"rendered":"https:\/\/\u00e9milienplisson.fr\/?page_id=51"},"modified":"2026-06-03T19:28:53","modified_gmt":"2026-06-03T19:28:53","slug":"home","status":"publish","type":"page","link":"https:\/\/\u00e9milienplisson.fr\/","title":{"rendered":"HOME"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"51\" class=\"elementor elementor-51\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4eb967e e-con-full e-flex e-con e-parent\" data-id=\"4eb967e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6aef7a4 elementor-widget elementor-widget-shortcode\" data-id=\"6aef7a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n            <!-- La structure de ton Hero avec les donn\u00e9es WordPress inject\u00e9es -->\n            <div id=\"experience-ep\" \n                 class=\"js-hero-interactive-trigger\"\n                 data-video-default=\"https:\/\/\u00e9milienplisson.fr\/wp-content\/uploads\/2026\/06\/TEASER-Taxi-Moira_alauneeee.mp4\" \n                 data-video-menu=\"https:\/\/\u00e9milienplisson.fr\/wp-content\/uploads\/2026\/06\/TEASER-Taxi-Moira_alauneeee.mp4\"\n                 data-video-full=\"https:\/\/\u00e9milienplisson.fr\/wp-content\/uploads\/2026\/05\/TEASER-Taxi-Moira.mp4\"\n                 style=\"cursor: none !important;\">\n                \n                <div class=\"sticky-wrapper\">\n\n                    <div class=\"header-title\">\n                        <h1>\u00c9milien Plisson <span>Vid\u00e9aste<\/span><\/h1>\n                    <\/div>\n\n                    <!-- La vid\u00e9o principale de 10Mo dynamique -->\n                    <video id=\"video-fond\" autoplay muted loop playsinline preload=\"auto\">\n                        <source id=\"hero-video-source\" src=\"https:\/\/\u00e9milienplisson.fr\/wp-content\/uploads\/2026\/06\/TEASER-Taxi-Moira_alauneeee.mp4\" type=\"video\/mp4\">\n                    <\/video>\n\n                    <!-- Ton masque SVG d'origine -->\n                    <svg id=\"svg-mask\" viewBox=\"0 0 841.89 595.28\" preserveAspectRatio=\"xMidYMid slice\">\n                        <defs>\n                            <mask id=\"logoMaskComplex\">\n                                <rect width=\"100%\" height=\"100%\" fill=\"white\" \/>\n                                <g id=\"logo-group-anim\" fill=\"black\" stroke=\"black\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"transform: scale(0.5); transform-origin: center; transform-box: fill-box;\">\n                                    <path d=\"M350.21,222.8c-21.45,15.81-48.72,16.79-75.09,17.74-4.06.14-8.26.29-12.31.49-22.15.84-52.49,1.98-77.73,9.65-2.78.69-5.95,1.59-9.31,2.54-9.91,2.81-22.24,6.31-30.56,5.92h-.11c-12.37-.02-25.41-4.58-35.77-12.54-10.82-8.29-17.71-19.41-19.45-31.31v-4.04c2-12.61,9-23.44,20.25-31.31,15.45-10.82,38.21-15.27,57.97-11.35,9.66,2.01,19.4,5.47,28.81,8.82,13.22,4.71,26.89,9.58,41.09,10.78h.12c14.63.56,29.69-2.75,44.27-5.95,15-3.29,30.51-6.69,45.39-5.82,15.03.63,28.68,9.44,32.46,20.96,2.91,8.85-.65,17.88-10.03,25.42Z\"\/>\n                                    <path d=\"M336.82,113.16l-.12.06c-1.77.93-3.67,1.91-5.66,2.94-8.53,4.41-18.2,9.41-25.34,14.02-.92.54-1.85,1.07-2.78,1.61-12.12,7.05-24.65,14.34-38.33,14.46-13.74.49-21.45-9.08-23.9-17.4-2.54-8.65-1.19-21.33,10.99-28.58l.1-.06c8.86-5.83,16.54-7.79,26.4-9.92,10.98-1.64,21.68-5.27,32.03-8.77,5.67-1.92,11.52-3.91,17.26-5.5h9.42c10.38,2.24,12.74,9.68,13.23,13.93,1.05,9.29-4.66,19.27-13.3,23.21Z\"\/>\n                                    <path d=\"M640.36,365.14c-29.5,12.62-55.82,18.69-78.27,18.04-13.96-.09-27.96-8.02-35.65-20.22-6.63-10.52-7.52-22.2-2.51-32.89,9.65-20.17,37.87-25.62,62.76-30.42,7.29-1.41,14.18-2.74,20.12-4.35,22.35-5.11,41.59-19.5,50.2-37.55l.12-.29c4.73-14.37,4.1-25.58-1.87-33.32-11.97-15.51-41.73-13.68-65.64-12.22-3.16.2-6.17.38-8.98.51-2.03.10-4.15.22-6.32.34-13.24.76-28.25,1.62-39.37-3.18-10.71-4.99-16.19-12.59-15.43-21.4.94-10.88,11.11-21.06,24.75-24.75l.11-.04c9.53-3.05,20.13-4.04,30.39-5.01l1.02-.1c9.78-1.38,19.87-.85,29.62-.33,6.28.33,12.76.67,19.14.52,1.77-.01,3.56-.03,5.37-.05,7.9-.08,16.08-.17,23.68.66,17.9,1.79,43.69,6.9,64.9,21.12,20.23,13.57,31.37,32.21,33.1,55.42,1.65,54.66-56.37,102.74-111.24,129.51Z\"\/>\n                                    <path d=\"M506.28,469.66c0,12.91-5.47,24.77-16.29,34.48-9.8,8.8-21.63,10.67-33.3,5.27-15.19-7.03-25.88-24.22-25.42-40.88v-.17c-.6-14.34,1.14-31.94,2.68-47.47.39-3.95.77-7.78,1.10-11.44.7-8.79.42-18.24.15-27.38-.33-11.27-.67-22.91.82-33.39.57-2.95,1.29-5.91,2.06-9.05,1.57-6.40,3.19-13.01,3.37-19.61.01-5.72.11-10.68.2-15.06.5-24.89.66-32.42-18.94-60.24-5.79-10.46-6.2-23.96-1.12-37.05,5.63-14.52,17.12-26.2,29.98-30.49,12.61-4.17,26.2-1.73,36.35,6.52,10.08,8.2,15.01,20.42,13.51,33.53l-.02.19c-.13,3.76-1.79,13.16-4.68,26.50-2.35,10.88-2.41,22.19-2.46,33.13-.06,10.48-.11,21.32-2.23,31.54l-.02.10c-2.45,14.95-1.72,30.53-.67,43.84.28,2.86-1.08,24.7-1.73,35.19-.21,3.26-.36,5.76-.42,6.87-1.49,14.83,1.01,30.24,7.03,43.4l.14.26c6.62,10.76,9.91,21.4,9.91,31.41Z\"\/>\n                                    <path d=\"M342.63,378.45c-18.85,13.45-44.27,11.06-62.34,6.68-16.31-3.56-33.31-6.89-49.56-6.89-5.34,0-10.61.36-15.74,1.19-5.49.89-11.58,1.48-18.03,2.11-8.80.85-17.89,1.74-25.64,3.45-22.73,4.51-54.57,4.20-69.53-11.52-3.77-3.88-5.56-8.61-5.32-14.06.34-7.51,4.66-15.70,11.28-21.38l.16-.15c5.95-6.06,23.66-19.59,59.36-14.31,12.91,2.43,26.73,3.35,38.91,2.58,11.48-.14,24.73-3.37,39.39-9.61,27.87-9.52,56.72-12.15,79.19-7.23,19.89,5.29,34.44,18.24,37.08,33,2.32,12.93-4.5,25.77-19.21,36.14Z\"\/>\n                                    <path d=\"M332.89,519.01c-10.32.16-21.96-1.45-33.21-3.03-5.04-.70-9.79-1.37-14.45-1.88-10.05-.83-22.21-1.22-33.96-1.59-7.84-.25-15.24-.49-21.77-.84-5.44-.37-11.69-.86-18.30-1.38-7.71-.60-15.68-1.22-22.26-1.64-10.61-.74-24.24-1.11-35.53,2.60-1.23.40-2.52.83-3.86,1.28-5.02,1.69-10.71,3.60-15.48,4.08h-.11c-9.67,1.39-19.62-1.97-25.96-8.77-5.66-6.08-7.80-14.01-6.03-22.33,6.80-23.49,26.69-22.82,47.74-22.11,2.26.07,4.52.15,6.75.19l1.35.03.12-.18c3.51-.42,14.10-1.70,14.10-1.70l.13-.02c2.67-.46,5.42-.95,8.21-1.44,25.74-4.57,54.90-9.75,78.91-6.83,19.08,3.85,39.69,3.44,56.53-1.14,14.44-3.64,36.30-4.55,50.40,4.89,6.89,4.61,11.02,11.25,12.28,19.72,1.03,23.18-22.71,40.45-45.60,42.09Z\"\/>\n                                <\/g>\n                                <circle class=\"rond-anim\" cx=\"370\" cy=\"200\" r=\"0\" fill=\"black\" \/>\n                                <circle class=\"rond-anim\" cx=\"485\" cy=\"330\" r=\"0\" fill=\"black\" \/>\n                                <circle class=\"rond-anim\" cx=\"370\" cy=\"330\" r=\"0\" fill=\"black\" \/>\n                            <\/mask>\n                        <\/defs>\n                        <rect width=\"100%\" height=\"100%\" fill=\"#C6C6C6\" mask=\"url(#logoMaskComplex)\" \/>\n                    <\/svg>\n\n                    <!-- Image Texture -->\n                    <img decoding=\"async\" id=\"logo-texture\" src=\"https:\/\/\u00e9milienplisson.fr\/wp-content\/uploads\/2026\/06\/logoo-1.png\" alt=\"Logo Texture\">\n                    \n                    <!-- L'overlay textuel et ses badges automatis\u00e9s -->\n                    <div class=\"info-overlay\">\n                        <div class=\"badge-group\">\n                            <div class=\"badge\">Derni\u00e8re Cr\u00e9ation<\/div>\n                                                            <div class=\"badge\">Teaser<\/div>\n                                                    <\/div>\n\n                        <div class=\"text-group\">\n                            <h1 class=\"main-title\">TAXI MOYRA<\/h1>\n                                                            <h2 class=\"sub-title\">Cieu Tau<\/h2>\n                                                    <\/div>\n                    <\/div>\n\n                <\/div>\n            <\/div>\n\n            <!-- Lecteur plein \u00e9cran (Lightbox) pour la vid\u00e9o lourde au clic -->\n            <div id=\"emilien-fullscreen-lightbox\" style=\"position:fixed; top:0; left:0; width:100vw; height:100vh; background:#000000; z-index:999999; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: none !important;\">\n                <span id=\"close-emilien-lightbox\" style=\"position:absolute; top:40px; left:40px; color:#ffffff; font-family:sans-serif; font-size:13px; text-transform:uppercase; letter-spacing:2px; cursor:pointer; opacity:0.7; z-index:10;\">Retour<\/span>\n                <video id=\"emilien-lightbox-media\" controls playsinline style=\"max-width:100%; max-height:100%; aspect-ratio:16\/9; z-index:5;\"><\/video>\n            <\/div>\n\n            <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1af1ddf elementor-widget elementor-widget-html\" data-id=\"1af1ddf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u00c9milien Plisson \u2014 Vid\u00e9aste<\/title>\n\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap\" rel=\"stylesheet\">\n    \n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/CustomEase.min.js\"><\/script>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\n    <script src=\"https:\/\/unpkg.com\/lenis@1.1.13\/dist\/lenis.min.js\"><\/script>\n\n    <style>\n        \/* --- [CSS] Nouveau Curseur --- *\/\n        body, a, button, .portfolio-item, #main-menu-toggle {\n            cursor: none !important; \n        }\n\n        .cursor-dot, .cursor-outline {\n            position: fixed;\n            top: 0;\n            left: 0;\n            border-radius: 50%;\n            z-index: 99999; \n            pointer-events: none; \n            mix-blend-mode: exclusion;\n        }\n\n        .cursor-dot {\n            width: 4px;\n            height: 4px;\n            background-color: white;\n        }\n\n        .cursor-outline {\n            width: 40px;\n            height: 40px;\n            border: 1px solid white;\n        }\n    \n        \/* [CSS] R\u00e9initialisation globale et variables de configuration *\/\n        *, *::before, *::after { box-sizing: border-box; }\n\n        @font-face {\n            font-family: 'Archivo Light Custom';\n            src: url('https:\/\/xn--milienplisson-9gb.fr\/wp-content\/uploads\/2026\/05\/Archivo-Light.ttf') format('truetype');\n            font-weight: 300;\n            font-style: normal;\n            font-display: swap;\n        }\n\n        :root {\n            --menu-font-family: 'Stack Sans Text', sans-serif;\n            --menu-text-size: 14px;\n            --menu-button-width: 110px;\n            --menu-button-height: 34px;\n            --menu-gap: 10px;\n            --link-text-size: 60px;\n            --text-color: #333333;\n            --link-color: #ffffff;\n            --accent-color: #ffffff;\n        }\n\n        body, html {\n            margin: 0;\n            padding: 0;\n            overflow-x: hidden;\n            font-family: var(--menu-font-family);\n            background-color: #000;\n            scroll-behavior: smooth;\n        }\n\n        html.lenis, html.lenis body {\n            height: auto;\n        }\n            \n        .lenis.lenis-smooth {\n            scroll-behavior: auto !important;\n        }\n            \n        .lenis.lenis-smooth [data-lenis-prevent] {\n            overscroll-behavior: contain;\n        }\n            \n        .lenis.lenis-stopped {\n            overflow: hidden;\n        }\n            \n        .lenis.lenis-scrolling iframe {\n            pointer-events: none;\n        }\n\n        \/* Logo Fixe avec effet d'EXCLUSION *\/\n        #ep-logo-container {\n            position: fixed;\n            top: 12px;\n            left: 21px;\n            z-index: 10000;\n            pointer-events: none;\n            opacity: 0;\n            mix-blend-mode: exclusion;\n        }\n        #ep-logo-container img {\n            width: 80px;\n            height: auto;\n            display: block;\n        }\n\n        \/* Bouton de Menu *\/\n        #main-menu-toggle {\n            position: fixed;\n            top: 25px;\n            right: 28px;\n            z-index: 10000;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n            gap: 4px;\n            width: 45px;\n            height: 45px;\n            background-color: #ffffff;\n            border-radius: 50%;\n            cursor: pointer;\n            border: 1px solid #FFFFFF;\n            transition: transform 0.3s ease, background-color 0.3s ease;\n            opacity: 0;\n        }\n\n        #main-menu-toggle:hover {\n            transform: scale(1.1);\n            background-color: #ffffff;\n        }\n\n        .w-fscreen-menu-copy {\n            display: none; \n        }\n\n        .wkit-menu-toggle-icon {\n            position: relative;\n            width: 18px;\n            height: 12px;\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n        }\n\n        .w-fscreen-menu-bar {\n            width: 18px;\n            height: 2px;\n            background-color: #1a1a1a;\n            transition: all 0.3s ease;\n        }\n\n        #main-menu-toggle.is-active .w-fscreen-menu-bar[data-position=\"top\"]    { transform: translateY(5px) rotate(45deg); }\n        #main-menu-toggle.is-active .w-fscreen-menu-bar[data-position=\"middle\"] { opacity: 0; }\n        #main-menu-toggle.is-active .w-fscreen-menu-bar[data-position=\"bottom\"] { transform: translateY(-5px) rotate(-45deg); }\n\n        \/* Menu plein \u00e9cran (Overlay) - Reste toujours noir *\/\n        .w-fscreen-menu {\n            position: fixed;\n            top: 0; left: 0;\n            width: 100%;\n            height: 100vh;\n            background-color: #000000;\n            z-index: 9999;\n            clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            pointer-events: none;\n        }\n\n        \/* Vid\u00e9o exclusive pour le fond du menu *\/\n        #menu-bg-video {\n            position: absolute;\n            top: 0; left: 0;\n            width: 100%; height: 100%;\n            object-fit: cover;\n            z-index: 0;\n            opacity: 0; \/* Cach\u00e9e par d\u00e9faut *\/\n            filter: grayscale(100%) blur(12px); \/* Plus besoin de brightness, le fond noir et l'opacit\u00e9 s'en chargent *\/\n            mix-blend-mode: luminosity; \/* Mode de fusion Photoshop *\/\n            transition: opacity 0.5s ease;\n            pointer-events: none;\n            transform: scale(1.1); \/* R\u00e8gle le probl\u00e8me des bords flous ! *\/\n        }\n\n        .w-fscreen-menu nav {\n            position: relative;\n            z-index: 10; \/* Assure que le texte reste au-dessus de la vid\u00e9o *\/\n            width: 100%;\n        }\n\n        .fscreen-link {\n            font-size: var(--link-text-size);\n            color: var(--link-color);\n            text-decoration: none;\n            font-family: var(--menu-font-family);\n            display: block;\n            margin: 10px 0;\n            text-transform: uppercase;\n            font-weight: 900;\n            letter-spacing: -0.02em;\n            opacity: 0;\n            transform: translateY(30px);\n            text-align: center;\n            transition: opacity 0.3s ease;\n        }\n        .fscreen-link:hover { opacity: 0.6 !important; }\n\n        \/* Indicateur de d\u00e9filement *\/\n        .custom-scroll-wrapper {\n            position: fixed;\n            bottom: 35px;\n            left: 49%;\n            transform: translateX(-50%);\n            z-index: 9998;\n            transition: opacity 0.6s ease, transform 0.6s ease;\n        }\n        .custom-scroll-wrapper.is-active {\n            opacity: 0;\n            pointer-events: none;\n        }\n        .scroll-link {\n            display: inline-flex;\n            align-items: center;\n            gap: 10px;\n            text-decoration: none;\n            cursor: pointer;\n            color: #333333;\n        }\n        .circle-icon {\n            width: 20px;\n            height: 20px;\n            border: 1px solid #333333;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            overflow: hidden;\n            position: relative;\n        }\n        .circle-icon svg path { stroke: #333333; }\n        .label-text {\n            font-family: var(--menu-font-family);\n            font-size: 12px;\n            font-weight: 400;\n            letter-spacing: 0.15em;\n            text-transform: uppercase;\n            line-height: 1;\n        }\n        .circle-icon svg {\n            width: 10px;\n            height: 10px;\n            display: block;\n            animation: arrow-cycle 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1);\n        }\n        @keyframes arrow-cycle {\n            0%   { transform: translateY(0);     opacity: 1; }\n            30%  { transform: translateY(15px);  opacity: 0; }\n            31%  { transform: translateY(-15px); opacity: 0; }\n            60%  { transform: translateY(0);     opacity: 1; }\n            100% { transform: translateY(0);     opacity: 1; }\n        }\n\n        \/* Hero *\/\n        #experience-ep {\n            position: relative;\n            z-index: 2;\n            width: 100%;\n            background: white;\n        }\n        .sticky-wrapper {\n            position: relative;\n            height: 100vh;\n            width: 100%;\n            overflow: hidden;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n        .header-title {\n            position: absolute;\n            top: 40px;\n            left: 50%;\n            transform: translateX(-50%);\n            z-index: 10;\n            text-align: center;\n            width: 100%;\n            pointer-events: none;\n        }\n        .header-title h1 {\n            font-family: var(--menu-font-family);\n            font-size: 14px;\n            font-weight: 700;\n            letter-spacing: 0.3em;\n            text-transform: uppercase;\n            color: #1a1a1a;\n            margin: 0;\n        }\n        .header-title h1 span { font-weight: 400; margin-left: 5px; }\n\n        #video-fond {\n            position: absolute;\n            top: 0; left: 0;\n            width: 100%; height: 100%;\n            object-fit: cover;\n            z-index: 2;\n            transform: scale(1.1);\n        }\n\n        #svg-mask {\n            position: absolute;\n            top: 0; left: 0;\n            width: 100%; height: 100%;\n            z-index: 3 ;\n            mix-blend-mode: luminosity ;\n        }\n\n        #logo-texture {\n            position: absolute;\n            z-index: 4;\n            width: 49%;\n            height: auto;\n            pointer-events: none;\n            top: 51.2%;\n            left: 49.9%;\n            transform: translate(-50%, -50%);\n        }\n        \n        .info-overlay {\n            position: absolute;\n            bottom: 3vh;\n            left: 2vw;\n            z-index: 10;\n            color: white;\n            opacity: 0;\n            pointer-events: none;\n            display: flex;\n            flex-direction: column;\n            justify-content: flex-end;\n            mix-blend-mode: exclusion;\n        }\n        \n        .text-group {\n            display: flex;\n            flex-direction: column;\n        }\n\n        .main-title, .sub-title {\n            font-family: 'Archivo', sans-serif;\n            font-size: clamp(40px, 11vw, 110px);\n            text-transform: uppercase;\n            margin: 0;\n            line-height: 0.85;\n            letter-spacing: -0.03em;\n        }\n        \n        .main-title { font-weight: 700; opacity: 1.0; }\n        .sub-title { font-family: 'Archivo Light Custom', 'Archivo', sans-serif; font-weight: 300; opacity: 1.0; }\n        \n        .badge-group { display: flex; gap: 12px; margin-bottom: 20px; }\n        .badge { font-family: 'Archivo', sans-serif; border: 1px solid rgba(255,255,255,1); padding: 2px 11px; border-radius: 100px; font-size: 14px; letter-spacing: 0.05em; font-weight: 300; }\n\n        .hero-content { transition: opacity 0.4s ease-out, transform 0.4s ease-out; }\n        .hero-hidden { opacity: 0; transform: translateY(-20px); pointer-events: none; }\n\n        \/* Section d'introduction *\/\n        .about-intro { position: relative; z-index: 100; background-color: #000000; color: #ffffff; padding: 15vh 2%; display: flex; align-items: center; }\n        .about-container { width: 100%; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 25px; }\n        .about-label { font-family: var(--menu-font-family); font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.15em; color: #a3a3a3; margin: 0; margin-left: 2px; }\n        .about-intro p { font-family: 'Archivo', sans-serif; font-size: clamp(24px, 3.5vw, 80px); font-weight: 300; line-height: 1.15; letter-spacing: -0.02em; margin: 0; }\n\n        \/* Grille Portfolio *\/\n        .portfolio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background-color: black; width: 100%; max-width: 100%; margin: auto; margin-top: 25px; position: relative; z-index: 100; }\n        .portfolio-item { display: flex; flex-direction: column; text-decoration: none; cursor: pointer; background-color: #000; transition: transform 0.4s ease; }\n        .portfolio-media { position: relative; width: 100%; aspect-ratio: 16 \/ 9; overflow: hidden; background-color: #000; }\n        .portfolio-media video { width: 100%; height: 100%; object-fit: cover; opacity: 1; }\n        .portfolio-text { padding: 20px 30px 100px 28px; display: flex; flex-direction: column; justify-content: flex-start; }\n        .portfolio-text h3 { color: #ffffff; font-family: 'Archivo', sans-serif; font-size: 28px; font-weight: 700; margin: 0 0 0px ; text-transform: uppercase; letter-spacing: -0.02em; }\n        .portfolio-text p { color: #ffffff; font-family: 'Archivo Light Custom', 'Archivo', sans-serif; font-size: 13px; font-weight: 300; margin: 0; margin-left: 2px; opacity: 0.8; }\n\n        \/* Footer reveal *\/\n        .footer-spacer { height: 100vh; background: transparent; pointer-events: none; }\n        .custom-footer-reveal { position: fixed; bottom: 0; left: 0; width: 100%; height: 100vh; background-color: #000; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: -1; }\n        .footer-content h2 { font-size: clamp(40px, 10vw, 120px); margin: 0; font-weight: 700; font-family: var(--menu-font-family); }\n        .footer-content .footer-sub { text-transform: uppercase; letter-spacing: 0.2em; opacity: 0.8; text-align: center; font-family: var(--menu-font-family); }\n\n        @media (max-width: 768px) {\n            #portfolio-section { padding: 80px 30px; }\n            .portfolio-header h2 { font-size: 50px; }\n            .portfolio-grid { grid-template-columns: 1fr; }\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <div class=\"cursor-dot\"><\/div>\n    <div class=\"cursor-outline\"><\/div>\n\n    <div id=\"ep-logo-container\">\n        <img decoding=\"async\" src=\"https:\/\/\u00e9milienplisson.fr\/wp-content\/uploads\/2026\/05\/newlogoowhite-2-scaled.png\" alt=\"Logo EP\">\n    <\/div>\n\n    <div id=\"main-menu-toggle\">\n        <div class=\"w-fscreen-menu-copy\"><p>Menu<\/p><\/div>\n        <div class=\"wkit-menu-toggle-icon\">\n            <div class=\"w-fscreen-menu-bar\" data-position=\"top\"><\/div>\n            <div class=\"w-fscreen-menu-bar\" data-position=\"middle\"><\/div>\n            <div class=\"w-fscreen-menu-bar\" data-position=\"bottom\"><\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"w-fscreen-menu\">\n        <!-- NOUVEAU LECTEUR INT\u00c9GR\u00c9 AU MENU -->\n        <video id=\"menu-bg-video\" muted loop playsinline><\/video>\n        \n        <nav>\n            <a class=\"fscreen-link\" href=\"#\">Accueil<\/a>\n            <a class=\"fscreen-link\" href=\"#portfolio-section\">Clips<\/a>\n            <a class=\"fscreen-link\" href=\"#portfolio-section\">Teasers<\/a>\n            <a class=\"fscreen-link\" href=\"#portfolio-section\">Courts m\u00e9trages<\/a>\n            <a class=\"fscreen-link\" href=\"#portfolio-section\">Live vid\u00e9os<\/a>\n            <a class=\"fscreen-link\" href=\"#\">Contact<\/a>\n        <\/nav>\n    <\/div>\n\n    <div class=\"custom-scroll-wrapper\" id=\"scroll-trigger-element\">\n        <a href=\"#portfolio-section\" class=\"scroll-link\">\n            <div class=\"circle-icon\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M12 5V19M12 19L5 12M12 19L19 12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                <\/svg>\n            <\/div>\n            <span class=\"label-text\">SCROLL<\/span>\n        <\/a>\n    <\/div>\n\n    <!-- CODE COURT DU HERO ACF ICI -->\n\n   <div class=\"about-intro\">\n        <div class=\"about-container\">\n            <h3 class=\"about-label\">\/ Derri\u00e8re la cam\u00e9ra \n<\/h3>\n            <p>\n                Emilien Plisson est un vid\u00e9aste et r\u00e9alisateur prot\u00e9iforme.<br>\n                Il intervient sur des clips, du montage ou de la sc\u00e9nographie<br>\n                visuelle selon les projets, apportant un langage exp\u00e9rimental<br>\n                et organique \u00e0 chacun d'eux, avec la mati\u00e8re et l'instinct<br>\n                au c\u0153ur de son travail.\n            <\/p>\n        <\/div>\n    <\/div>\n\n    <div class=\"portfolio-grid\" id=\"portfolio-section\">\n        <a href=\"#clips\" class=\"portfolio-item\">\n            <div class=\"portfolio-media\">\n                <video src=\"https:\/\/\u00e9milienplisson.fr\/wp-content\/uploads\/2026\/06\/CLIPSS.mp4\" loop muted playsinline><\/video>\n            <\/div>\n            <div class=\"portfolio-text\">\n                <h3>CLIPS<\/h3>\n                <p>Voir Plus<\/p>\n            <\/div>\n        <\/a>\n\n        <a href=\"https:\/\/xn--milienplisson-9gb.fr\/?page_id=2295\" class=\"portfolio-item\">\n            <div class=\"portfolio-media\">\n                <video src=\"https:\/\/\u00e9milienplisson.fr\/wp-content\/uploads\/2026\/06\/teasersS.mp4\" loop muted playsinline><\/video>\n            <\/div>\n            <div class=\"portfolio-text\">\n                <h3>TEASERS<\/h3>\n                <p>Voir Plus<\/p>\n            <\/div>\n        <\/a>\n\n        <a href=\"#courts-metrages\" class=\"portfolio-item\">\n            <div class=\"portfolio-media\">\n                <video src=\"https:\/\/\u00e9milienplisson.fr\/wp-content\/uploads\/2026\/06\/COURTS.mp4\" loop muted playsinline><\/video>\n            <\/div>\n            <div class=\"portfolio-text\">\n                <h3>COURTS M\u00c9TRAGES<\/h3>\n                <p>Voir Plus<\/p>\n            <\/div>\n        <\/a>\n\n        <a href=\"#live-videos\" class=\"portfolio-item\">\n            <div class=\"portfolio-media\">\n                <video src=\"https:\/\/\u00e9milienplisson.fr\/wp-content\/uploads\/2026\/06\/LIVE.mp4\" loop muted playsinline><\/video>\n            <\/div>\n            <div class=\"portfolio-text\">\n                <h3>LIVE VID\u00c9O<\/h3>\n                <p>Voir Plus<\/p>\n            <\/div>\n        <\/a>\n    <\/div>\n\n    <div class=\"footer-spacer\"><\/div>\n\n    <div class=\"custom-footer-reveal\" id=\"next-section\">\n        <div class=\"footer-content\">\n            <h2>Mail<\/h2>\n            <div class=\"footer-sub\">\n                Digital Creative Studio<br>@EMILIENPLISSONSTUDIO\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        document.addEventListener(\"DOMContentLoaded\", () => {\n\n            gsap.registerPlugin(CustomEase, ScrollTrigger);\n            \n            \/* --- LOGIQUE INTERACTIVE WORDPRESS ACF & MENU PHOTOSHOP --- *\/\n            const heroTrigger = document.querySelector('.js-hero-interactive-trigger');\n            const menuBgVideo = document.getElementById('menu-bg-video');\n            \n            if (heroTrigger) {\n                const videoMenuUrl = heroTrigger.getAttribute('data-video-menu');\n                const videoFullUrl = heroTrigger.getAttribute('data-video-full');\n                \n                const lightbox      = document.getElementById('emilien-fullscreen-lightbox');\n                const lightboxVideo = document.getElementById('emilien-lightbox-media');\n                const closeLightbox = document.getElementById('close-emilien-lightbox');\n\n                \/\/ 1. Logique du Menu : Vid\u00e9o en arri\u00e8re-plan\n                if (videoMenuUrl && menuBgVideo) {\n                    menuBgVideo.src = videoMenuUrl;\n\n                    const fscreenLinks = document.querySelectorAll('.fscreen-link');\n                    let menuBtnAccueil = null;\n                    \n                    fscreenLinks.forEach(link => {\n                        if (link.textContent.trim().toUpperCase() === \"ACCUEIL\") {\n                            menuBtnAccueil = link;\n                        }\n                    });\n\n                    if (menuBtnAccueil) {\n                        menuBtnAccueil.addEventListener('mouseenter', () => {\n                            menuBgVideo.play().catch(e => {});\n                            menuBgVideo.style.opacity = \"0.45\"; \/\/ L'opacit\u00e9 parfaite pour Photoshop !\n                            \/\/ Le menu reste noir en arri\u00e8re-plan, pas de transparence.\n                        });\n\n                        menuBtnAccueil.addEventListener('mouseleave', () => {\n                            menuBgVideo.style.opacity = \"0\"; \/\/ Cache la vid\u00e9o\n                            setTimeout(() => menuBgVideo.pause(), 500);\n                        });\n                    }\n                }\n\n                \/\/ 2. Logique du Clic Hero : Ouverture du grand lecteur vid\u00e9o\n                heroTrigger.addEventListener('click', (e) => {\n                    if (e.target.closest('#main-menu-toggle') || e.target.closest('#emilien-fullscreen-lightbox')) return;\n                    \n                    if (videoFullUrl) {\n                        lightboxVideo.src = videoFullUrl;\n                        lightbox.style.opacity = \"1\";\n                        lightbox.style.pointerEvents = \"auto\";\n                        lightboxVideo.play().catch(e => {});\n                    }\n                });\n\n                if(closeLightbox) {\n                    closeLightbox.addEventListener('click', () => {\n                        lightbox.style.opacity = \"0\";\n                        lightbox.style.pointerEvents = \"none\";\n                        lightboxVideo.pause();\n                        lightboxVideo.src = \"\";\n                    });\n                }\n            }\n\n            \/* --- CODE DU CURSEUR PERSONNALIS\u00c9 --- *\/\n            const cursorDot = document.querySelector('.cursor-dot');\n            const cursorOutline = document.querySelector('.cursor-outline');\n\n            gsap.set(cursorDot, { xPercent: -50, yPercent: -50 });\n            gsap.set(cursorOutline, { xPercent: -50, yPercent: -50, transformOrigin: \"center center\" });\n\n            let mouse = { x: window.innerWidth \/ 2, y: window.innerHeight \/ 2 };\n            let pos = { x: window.innerWidth \/ 2, y: window.innerHeight \/ 2 };\n            let angle = 0;\n\n            window.addEventListener('mousemove', (e) => {\n                mouse.x = e.clientX;\n                mouse.y = e.clientY;\n                gsap.to(cursorDot, { x: mouse.x, y: mouse.y, duration: 0 });\n            });\n\n            gsap.ticker.add(() => {\n                const followSpeed = 0.15; \n                const dx = mouse.x - pos.x;\n                const dy = mouse.y - pos.y;\n                \n                pos.x += dx * followSpeed;\n                pos.y += dy * followSpeed;\n\n                const velocity = Math.sqrt(dx * dx + dy * dy);\n                \n                if (velocity > 0.1) {\n                    angle = Math.atan2(dy, dx) * (180 \/ Math.PI);\n                }\n\n                const stretch = 1 + Math.min(velocity * 0.005, 0.8); \n                const squash  = 1 - Math.min(velocity * 0.0015, 0.3); \n\n                gsap.set(cursorOutline, {\n                    x: pos.x,\n                    y: pos.y,\n                    rotation: angle,\n                    scaleX: stretch,\n                    scaleY: squash\n                });\n            });\n            \n            const lenis = new Lenis({\n                duration: 1.2,\n                easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),\n                smoothWheel: true\n            });\n            \n            lenis.on('scroll', ScrollTrigger.update);\n            \n            gsap.ticker.add((time) => {\n                lenis.raf(time * 1000);\n            });\n            \n            gsap.ticker.lagSmoothing(0);\n\n            \/* --- CODE DU MENU --- *\/\n            const menuToggle = document.getElementById(\"main-menu-toggle\");\n            const menu       = document.querySelector(\".w-fscreen-menu\");\n            const links      = document.querySelectorAll(\".fscreen-link\");\n            let menuIsOpen = false;\n            let isAnimating = false;\n\n            CustomEase.create(\"mainEase\", \"M0,0 C0.126,0.382 0.282,0.674 0.44,0.822 0.632,1.002 0.818,1.001 1,1\");\n\n            const openMenu = () => {\n                isAnimating = true;\n                menuToggle.classList.add(\"is-active\");\n                document.body.style.overflow = \"hidden\";\n                const tl = gsap.timeline({ onComplete: () => { isAnimating = false; menuIsOpen = true; } });\n                tl.to(menu, { clipPath: \"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)\", duration: 1.2, ease: \"mainEase\", pointerEvents: \"auto\" })\n                  .to(links, { opacity: 1, y: 0, duration: 0.8, stagger: 0.1, ease: \"power3.out\" }, \"-=0.7\");\n            };\n\n            const closeMenu = () => {\n                isAnimating = true;\n                menuToggle.classList.remove(\"is-active\");\n                \n                \/\/ S\u00e9curit\u00e9 : on coupe la vid\u00e9o si le menu se ferme pendant le survol\n                if(menuBgVideo) {\n                    menuBgVideo.style.opacity = \"0\"; \n                    setTimeout(() => menuBgVideo.pause(), 500);\n                }\n\n                const tl = gsap.timeline({ onComplete: () => { isAnimating = false; menuIsOpen = false; document.body.style.overflow = \"\"; } });\n                tl.to(links, { opacity: 0, y: -20, duration: 0.4, stagger: 0.05 })\n                  .to(menu,  { clipPath: \"polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)\", duration: 1.1, ease: \"mainEase\", pointerEvents: \"none\" }, \"-=0.2\")\n                  .set(menu, { clipPath: \"polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)\" });\n            };\n\n            menuToggle.addEventListener(\"click\", () => {\n                if (isAnimating) return;\n                if (!menuIsOpen) openMenu(); else closeMenu();\n            });\n\n            \/* --- CODE DU HERO GSAP --- *\/\n            const heroTl = gsap.timeline({\n                scrollTrigger: {\n                    trigger: \"#experience-ep\",\n                    start: \"top top\",\n                    end: \"+=1200\",\n                    scrub: 5,\n                    pin: true,\n                    anticipatePin: 0\n                }\n            });\n\n            heroTl.to(\".header-title\", { opacity: 0, duration: 1.5 }, 0)\n              .to(\"#logo-texture\",  { opacity: 0, duration: 0.5 }, 0)\n              .to(\"#logo-group-anim path\", { attr: { \"stroke-width\": 1400 }, ease: \"power1.inOut\", duration: 4 }, 0)\n              .to(\".rond-anim\",     { attr: { \"r\": 375 }, ease: \"power1.inOut\", stagger: 0.1, duration: 4 }, 0)\n              .to(\".info-overlay\",  { opacity: 1, y: 0, duration: 3, ease: \"power2.out\" }, 1)\n              .to(\".info-overlay\",  { opacity: 0, y: -30, duration: 2, ease: \"power2.in\" }, 4);\n                  \n            window.addEventListener('scroll', function() {\n                const hero = document.querySelector('.hero-content');\n                if (window.scrollY > 50) { \n                    hero?.classList.add('hero-hidden');\n                } else {\n                    hero?.classList.remove('hero-hidden');\n                }\n            });\n\n            \/* --- INTERACTIVIT\u00c9 DU PORTFOLIO --- *\/\n            const items = document.querySelectorAll('.portfolio-item');\n\n            items.forEach(item => {\n                const video = item.querySelector('video');\n\n                item.addEventListener('mouseenter', () => {\n                    if(video) video.play();\n                });\n\n                item.addEventListener('mouseleave', () => {\n                    if(video) {\n                        video.pause();\n                        video.currentTime = 0; \n                    }\n                });\n            });\n\n            \/* --- ACCROCHE SCROLL ET LOGO --- *\/\n            ScrollTrigger.create({\n                trigger: \"body\",\n                start: \"top -50px\",\n                onEnter:     () => document.getElementById(\"scroll-trigger-element\").classList.add(\"is-active\"),\n                onLeaveBack: () => document.getElementById(\"scroll-trigger-element\").classList.remove(\"is-active\"),\n            });\n\n            ScrollTrigger.create({\n                trigger: \"body\",\n                start: \"top -100px\",\n                onEnter: () => {\n                    gsap.to([\"#ep-logo-container\", \"#main-menu-toggle\"], {\n                        opacity: 1,\n                        duration: 0.5\n                    });\n                },\n                onLeaveBack: () => {\n                    gsap.to([\"#ep-logo-container\", \"#main-menu-toggle\"], {\n                        opacity: 0,\n                        duration: 0.5\n                    });\n                }\n            });\n        });\n    <\/script>\n<\/body>\n<\/html>\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>\u00c9milien Plisson \u2014 Vid\u00e9aste Menu Accueil Clips Teasers Courts m\u00e9trages Live vid\u00e9os Contact SCROLL \/ Derri\u00e8re la cam\u00e9ra Emilien Plisson est un vid\u00e9aste et r\u00e9alisateur prot\u00e9iforme. Il intervient sur des clips, du montage ou de la sc\u00e9nographie visuelle selon les projets, apportant un langage exp\u00e9rimental et organique \u00e0 chacun d&rsquo;eux, avec la mati\u00e8re et l&rsquo;instinct [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-51","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/\u00e9milienplisson.fr\/index.php?rest_route=\/wp\/v2\/pages\/51","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/\u00e9milienplisson.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/\u00e9milienplisson.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/\u00e9milienplisson.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/\u00e9milienplisson.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=51"}],"version-history":[{"count":2811,"href":"https:\/\/\u00e9milienplisson.fr\/index.php?rest_route=\/wp\/v2\/pages\/51\/revisions"}],"predecessor-version":[{"id":3494,"href":"https:\/\/\u00e9milienplisson.fr\/index.php?rest_route=\/wp\/v2\/pages\/51\/revisions\/3494"}],"wp:attachment":[{"href":"https:\/\/\u00e9milienplisson.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}