{"id":459,"date":"2026-03-10T10:23:21","date_gmt":"2026-03-10T10:23:21","guid":{"rendered":"https:\/\/www.roguestudio.ch\/?page_id=459"},"modified":"2026-03-18T10:17:20","modified_gmt":"2026-03-18T10:17:20","slug":"projets","status":"publish","type":"page","link":"https:\/\/www.roguestudio.ch\/en\/projets\/","title":{"rendered":"Projects"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"459\" class=\"elementor elementor-459\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-26fb4e2 e-con-full e-flex wcf-starter-animations-none e-con e-parent\" data-id=\"26fb4e2\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;wcf_enable_horizontal_scroll&quot;:&quot;no&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d2f7c15 elementor-widget elementor-widget-shortcode\" data-id=\"d2f7c15\" 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\">    <style>\n        \/* =============================================\n           HERO PROJECTS \u2013 BASE\n           ============================================= *\/\n        .phero-scroll-wrapper {\n            position: relative;\n        }\n\n        .phero {\n            position: relative;\n            width: 100%;\n            height: calc(100svh - 50px);\n            height: 100svh;\n            overflow: hidden;\n            font-family: 'jaf-lapture-display', serif;\n        }\n\n        \/* --- Background layers --- *\/\n        .phero-bg-layer {\n            position: absolute;\n            inset: 0;\n            background-size: cover;\n            background-position: center;\n            opacity: 0;\n            transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1),\n                        transform 1s cubic-bezier(0.4, 0, 0.2, 1);\n            transform: scale(1.04);\n            will-change: opacity, transform;\n        }\n\n        .phero-bg-layer.is-active {\n            opacity: 1;\n            transform: scale(1);\n        }\n\n        \/* --- Overlay --- *\/\n        .phero-overlay {\n            position: absolute;\n            inset: 0;\n            background: linear-gradient(\n                160deg,\n                rgba(10, 18, 35, 0.08) 0%,\n                rgba(10, 18, 35, 0.38) 100%\n            );\n            z-index: 2;\n        }\n\n        \/* --- Desktop content --- *\/\n        .phero-content {\n            position: absolute;\n            inset: 0;\n            z-index: 3;\n            display: flex;\n            align-items: flex-end;\n            padding-bottom: 5vh;\n            width: 98%;\n            left: 50%;\n            transform: translateX(-50%);\n        }\n\n        .phero-list {\n            list-style: none;\n            margin: 0;\n            padding: 0;\n            width: 100%;\n        }\n\n        .phero-item {\n            display: block;\n        }\n\n        .phero-link {\n            display: inline-block;\n            position: relative;\n            font-size: clamp(36px, 5.5vw, 60px);\n            font-weight: 400;\n            line-height: 1.05;\n            text-transform: uppercase;\n            letter-spacing: 0.01em;\n            color: #A19591;\n            text-decoration: none;\n            transition: color 0.35s ease;\n        }\n\n        .phero-link .phero-year {\n            position: absolute;\n            top: 0;\n            left: 100%;\n            margin-left: 0.2em;\n            font-size: 25px;\n            font-family: 'jaf-lapture-display', serif;\n            font-weight: 400;\n            letter-spacing: 0.03em;\n            line-height: 1;\n            white-space: nowrap;\n            opacity: 0.85;\n            transition: opacity 0.35s ease;\n        }\n\n        .phero-link.is-active,\n        .phero-link:hover {\n            color: #ffffff;\n        }\n\n        .phero-link.is-active .phero-year,\n        .phero-link:hover .phero-year {\n            opacity: 1;\n        }\n\n        \/* --- Mobile UI (hidden on desktop) --- *\/\n        .phero-mobile-ui {\n            display: none;\n        }\n\n        .phero-scroll-hint {\n            display: none;\n        }\n\n        \/* =============================================\n           MOBILE \u2013 max-width: 768px\n           ============================================= *\/\n        @media (max-width: 768px) {\n\n            .phero-scroll-wrapper {\n                \/* JS gere la hauteur dynamiquement *\/\n            }\n\n            .phero {\n                position: sticky;\n                top: 0;\n                height: 100lvh;\n                height: 100lvh;\n                -webkit-overflow-scrolling: touch;\n            }\n\n            .phero-content {\n                display: none;\n            }\n\n            .phero-mobile-ui {\n                display: flex;\n                flex-direction: column;\n                position: absolute;\n                bottom: 0;\n                left: 0;\n                right: 0;\n                z-index: 4;\n                padding: 0 6vw 6svh;\n                padding: 0 6vw calc(6svh + env(safe-area-inset-bottom, 0px));\n                pointer-events: none;\n            }\n\n            .phero-mob-title-wrap {\n                position: relative;\n                overflow: hidden;\n                margin-bottom: 20px;\n                min-height: 100px;\n            }\n\n            .phero-mob-title {\n                position: absolute;\n                bottom: 0;\n                left: 0;\n                width: 100%;\n                font-family: 'jaf-lapture-display', serif;\n                font-size: 30px !important;\n                font-weight: 400;\n                line-height: 1.1;\n                text-transform: uppercase;\n                letter-spacing: 0.01em;\n                color: #A19591;\n                text-decoration: none;\n                display: flex;\n                align-items: baseline;\n                gap: 0.3em;\n                pointer-events: auto;\n\n                opacity: 0;\n                transform: translateY(100%);\n                visibility: hidden;\n                transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),\n                            transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),\n                            color 0.35s ease;\n            }\n\n            .phero-mob-title.is-active {\n                opacity: 1;\n                transform: translateY(0);\n                visibility: visible;\n                color: #ffffff;\n            }\n\n            .phero-mob-title.is-exiting {\n                opacity: 0;\n                transform: translateY(-40%);\n                visibility: visible;\n            }\n\n            .phero-mob-title:active {\n                color: rgba(255, 255, 255, 0.7);\n            }\n\n            .phero-mob-year {\n                font-size: 15px;\n                opacity: 0.65;\n                white-space: nowrap;\n                letter-spacing: 0.04em;\n                align-self: flex-start;\n                margin-top: 0.15em;\n            }\n\n            \/* --- Progress bars --- *\/\n            .phero-bars {\n                display: flex;\n                gap: 6px;\n                width: 100%;\n            }\n\n            .phero-bar {\n                flex: 1;\n                height: 3px;\n                background: rgba(255, 255, 255, 0.18);\n                border-radius: 2px;\n                overflow: hidden;\n                position: relative;\n            }\n\n            .phero-bar-fill {\n                position: absolute;\n                inset: 0;\n                background: #ffffff;\n                border-radius: 2px;\n                transform-origin: left center;\n                transform: scaleX(0);\n                will-change: transform;\n            }\n\n            \/* --- Scroll hint --- *\/\n            .phero-scroll-hint {\n                display: flex;\n                flex-direction: column;\n                align-items: center;\n                position: absolute;\n                bottom: 2svh;\n                bottom: calc(2svh + env(safe-area-inset-bottom, 0px));\n                left: 50%;\n                transform: translateX(-50%);\n                z-index: 5;\n                opacity: 0.5;\n                pointer-events: none;\n                transition: opacity 0.4s ease;\n            }\n\n            .phero-scroll-hint.is-hidden {\n                opacity: 0;\n            }\n\n            .phero-scroll-hint-line {\n                width: 1px;\n                height: 22px;\n                background: #ffffff;\n                animation: phero-pulse 1.5s ease-in-out infinite;\n            }\n\n            @keyframes phero-pulse {\n                0%, 100% { opacity: 0.25; transform: scaleY(0.6); }\n                50% { opacity: 0.75; transform: scaleY(1); }\n            }\n        }\n\n        @media (max-width: 480px) {\n            .phero-mobile-ui {\n                padding: 0 5vw 5vh;\n                padding: 0 5vw calc(5vh + env(safe-area-inset-bottom, 0px));\n            }\n\n            .phero-mob-title {\n                font-size: clamp(28px, 8vw, 50px);\n            }\n        }\n    <\/style>\n\n    <div class=\"phero-scroll-wrapper\" id=\"phero-scroll-wrapper\">\n        <section class=\"phero\" id=\"phero\">\n\n                        <div\n                class=\"phero-bg-layer is-active\"\n                data-index=\"0\"\n                data-desktop-bg=\"https:\/\/www.roguestudio.ch\/wp-content\/uploads\/2026\/03\/Hand-Macro-scaled.jpg\"\n                data-mobile-bg=\"https:\/\/www.roguestudio.ch\/wp-content\/uploads\/2026\/03\/3-scaled.jpg\"\n                style=\"background-image: url(https:\/\/www.roguestudio.ch\/wp-content\/uploads\/2026\/03\/Hand-Macro-scaled.jpg);\"\n            ><\/div>\n                        <div\n                class=\"phero-bg-layer\"\n                data-index=\"1\"\n                data-desktop-bg=\"https:\/\/www.roguestudio.ch\/wp-content\/uploads\/2026\/03\/Swati-boucle-or-scaled-e1774181410618.jpg\"\n                data-mobile-bg=\"https:\/\/www.roguestudio.ch\/wp-content\/uploads\/2026\/03\/Avantika-or-scaled.jpg\"\n                style=\"background-image: url(https:\/\/www.roguestudio.ch\/wp-content\/uploads\/2026\/03\/Swati-boucle-or-scaled-e1774181410618.jpg);\"\n            ><\/div>\n                        <div\n                class=\"phero-bg-layer\"\n                data-index=\"2\"\n                data-desktop-bg=\"https:\/\/www.roguestudio.ch\/wp-content\/uploads\/2026\/03\/SYB_Mockup-1-scaled.jpg\"\n                data-mobile-bg=\"https:\/\/www.roguestudio.ch\/wp-content\/uploads\/2026\/03\/SYB_Mockup-1-scaled.jpg\"\n                style=\"background-image: url(https:\/\/www.roguestudio.ch\/wp-content\/uploads\/2026\/03\/SYB_Mockup-1-scaled.jpg);\"\n            ><\/div>\n            \n            <div class=\"phero-overlay\"><\/div>\n\n            <div class=\"phero-content\">\n                <ul class=\"phero-list\">\n                                        <li class=\"phero-item\">\n                        <a\n                            href=\"https:\/\/www.roguestudio.ch\/en\/projet\/mermont\/\"\n                            class=\"phero-link is-active\"\n                            data-index=\"0\"\n                        >\n                            Mermont                                                            <span class=\"phero-year\">2026<\/span>\n                                                    <\/a>\n                    <\/li>\n                                        <li class=\"phero-item\">\n                        <a\n                            href=\"https:\/\/www.roguestudio.ch\/en\/projet\/lesmusesbm\/\"\n                            class=\"phero-link\"\n                            data-index=\"1\"\n                        >\n                            Les Muses BM                                                            <span class=\"phero-year\">2026<\/span>\n                                                    <\/a>\n                    <\/li>\n                                        <li class=\"phero-item\">\n                        <a\n                            href=\"https:\/\/www.roguestudio.ch\/en\/projet\/syb\/\"\n                            class=\"phero-link\"\n                            data-index=\"2\"\n                        >\n                            Swiss Yacht Brokers                                                            <span class=\"phero-year\">2025<\/span>\n                                                    <\/a>\n                    <\/li>\n                                    <\/ul>\n            <\/div>\n\n            <div class=\"phero-mobile-ui\">\n                <div class=\"phero-mob-title-wrap\">\n                                        <a\n                        href=\"https:\/\/www.roguestudio.ch\/en\/projet\/mermont\/\"\n                        class=\"phero-mob-title is-active\"\n                        data-index=\"0\"\n                    >\n                        Mermont                                                    <span class=\"phero-mob-year\">2026<\/span>\n                                            <\/a>\n                                        <a\n                        href=\"https:\/\/www.roguestudio.ch\/en\/projet\/lesmusesbm\/\"\n                        class=\"phero-mob-title\"\n                        data-index=\"1\"\n                    >\n                        Les Muses BM                                                    <span class=\"phero-mob-year\">2026<\/span>\n                                            <\/a>\n                                        <a\n                        href=\"https:\/\/www.roguestudio.ch\/en\/projet\/syb\/\"\n                        class=\"phero-mob-title\"\n                        data-index=\"2\"\n                    >\n                        Swiss Yacht Brokers                                                    <span class=\"phero-mob-year\">2025<\/span>\n                                            <\/a>\n                                    <\/div>\n\n                <div class=\"phero-bars\">\n                                        <div class=\"phero-bar\" data-index=\"0\">\n                        <div class=\"phero-bar-fill\"><\/div>\n                    <\/div>\n                                        <div class=\"phero-bar\" data-index=\"1\">\n                        <div class=\"phero-bar-fill\"><\/div>\n                    <\/div>\n                                        <div class=\"phero-bar\" data-index=\"2\">\n                        <div class=\"phero-bar-fill\"><\/div>\n                    <\/div>\n                                    <\/div>\n            <\/div>\n\n\n        <\/section>\n    <\/div>\n\n    <script>\n    (function () {\n        'use strict';\n\n        var hero    = document.getElementById('phero');\n        var wrapper = document.getElementById('phero-scroll-wrapper');\n        if (!hero || !wrapper) return;\n\n        var layers     = hero.querySelectorAll('.phero-bg-layer');\n        var links      = hero.querySelectorAll('.phero-link');\n        var mobTitles  = hero.querySelectorAll('.phero-mob-title');\n        var fills      = hero.querySelectorAll('.phero-bar-fill');\n        var scrollHint = hero.querySelector('.phero-scroll-hint');\n        var total      = layers.length;\n        var current    = 0;\n        var mobCurrent = 0;\n        var transitioning = false;\n\n        \/* ============================================\n           IMAGES MOBILE \/ DESKTOP \u2013 swap background\n           ============================================ *\/\n        var lastWasMobile = null;\n\n        function applyBackgroundImages() {\n            var mobile = isMobile();\n\n            \/\/ Evite de re-setter si le breakpoint n'a pas change\n            if (mobile === lastWasMobile) return;\n            lastWasMobile = mobile;\n\n            layers.forEach(function (layer) {\n                var desktopBg = layer.getAttribute('data-desktop-bg');\n                var mobileBg  = layer.getAttribute('data-mobile-bg');\n\n                \/\/ Sur mobile : utilise image_mobile si dispo, sinon fallback desktop\n                var url = mobile && mobileBg ? mobileBg : desktopBg;\n\n                if (url) {\n                    layer.style.backgroundImage = 'url(' + url + ')';\n                }\n            });\n        }\n\n        \/* ============================================\n           DESKTOP \u2013 hover\n           ============================================ *\/\n        var activateDesktop = function (index) {\n            if (index === current) return;\n            layers[current].classList.remove('is-active');\n            links[current].classList.remove('is-active');\n            layers[index].classList.add('is-active');\n            links[index].classList.add('is-active');\n            current = index;\n        };\n\n        links.forEach(function (link) {\n            link.addEventListener('mouseenter', function () {\n                activateDesktop(parseInt(link.dataset.index, 10));\n            });\n        });\n\n        \/* ============================================\n           MOBILE \u2013 helpers\n           ============================================ *\/\n        function isMobile() {\n            return window.matchMedia('(max-width: 768px)').matches;\n        }\n\n        function getViewportHeight() {\n            if (window.visualViewport) {\n                return window.visualViewport.height;\n            }\n            return window.innerHeight;\n        }\n\n        function setWrapperHeight() {\n            if (isMobile()) {\n                var vh = getViewportHeight();\n                wrapper.style.height = (total * vh) + 'px';\n            } else {\n                wrapper.style.height = '';\n            }\n        }\n\n        setWrapperHeight();\n\n        \/\/ Debounced resize\n        var resizeTimer = null;\n        function onResize() {\n            clearTimeout(resizeTimer);\n            resizeTimer = setTimeout(function () {\n                setWrapperHeight();\n                applyBackgroundImages();\n            }, 100);\n        }\n        window.addEventListener('resize', onResize);\n\n        if (window.visualViewport) {\n            window.visualViewport.addEventListener('resize', onResize);\n        }\n\n        \/\/ Appliquer les bonnes images au chargement\n        applyBackgroundImages();\n\n        \/* ============================================\n           MOBILE \u2013 transition entre slides\n           ============================================ *\/\n        function goToMob(index) {\n            if (index === mobCurrent || index < 0 || index >= total) return;\n            if (transitioning) return;\n\n            transitioning = true;\n\n            \/\/ Background\n            layers[mobCurrent].classList.remove('is-active');\n            layers[index].classList.add('is-active');\n\n            \/\/ Title out\n            var prev = mobCurrent;\n            mobTitles[prev].classList.remove('is-active');\n            mobTitles[prev].classList.add('is-exiting');\n\n            mobCurrent = index;\n\n            var resolved = false;\n\n            function finalize() {\n                if (resolved) return;\n                resolved = true;\n\n                mobTitles[prev].classList.remove('is-exiting');\n                mobTitles[mobCurrent].classList.add('is-active');\n\n                if (scrollHint) {\n                    if (mobCurrent === total - 1) {\n                        scrollHint.classList.add('is-hidden');\n                    } else {\n                        scrollHint.classList.remove('is-hidden');\n                    }\n                }\n\n                setTimeout(function () {\n                    transitioning = false;\n                }, 80);\n            }\n\n            function onEnd(e) {\n                if (e.propertyName === 'transform' || e.propertyName === 'opacity') {\n                    mobTitles[prev].removeEventListener('transitionend', onEnd);\n                    finalize();\n                }\n            }\n            mobTitles[prev].addEventListener('transitionend', onEnd);\n\n            setTimeout(finalize, 400);\n        }\n\n        \/* ============================================\n           MOBILE \u2013 scroll handler (rAF throttled)\n           ============================================ *\/\n        var ticking = false;\n\n        function onScroll() {\n            if (!isMobile()) { ticking = false; return; }\n\n            var rect      = wrapper.getBoundingClientRect();\n            var vh        = getViewportHeight();\n            var wrapperH  = wrapper.offsetHeight;\n            var maxScroll = wrapperH - vh;\n\n            if (maxScroll <= 0) { ticking = false; return; }\n\n            var scrolled = Math.max(0, -rect.top);\n            scrolled = Math.min(scrolled, maxScroll);\n\n            var segmentH = maxScroll \/ total;\n            var rawIndex = scrolled \/ segmentH;\n            var newIndex = Math.max(0, Math.min(Math.floor(rawIndex), total - 1));\n            var progress = rawIndex - newIndex;\n\n            if (newIndex !== mobCurrent) {\n                goToMob(newIndex);\n            }\n\n            for (var i = 0; i < total; i++) {\n                var fill = fills[i];\n                if (i < newIndex) {\n                    fill.style.transition = 'transform 0.2s ease';\n                    fill.style.transform  = 'scaleX(1)';\n                } else if (i === newIndex) {\n                    fill.style.transition = 'none';\n                    fill.style.transform  = 'scaleX(' + Math.min(Math.max(progress, 0), 1) + ')';\n                } else {\n                    fill.style.transition = 'transform 0.2s ease';\n                    fill.style.transform  = 'scaleX(0)';\n                }\n            }\n\n            ticking = false;\n        }\n\n        window.addEventListener('scroll', function () {\n            if (!ticking) {\n                ticking = true;\n                requestAnimationFrame(onScroll);\n            }\n        }, { passive: true });\n\n        \/\/ Init\n        requestAnimationFrame(onScroll);\n\n    })();\n    <\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f251715 e-con-full e-flex wcf-starter-animations-none e-con e-parent\" data-id=\"f251715\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;wcf_enable_horizontal_scroll&quot;:&quot;no&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bbc5cc7 elementor-widget elementor-widget-shortcode\" data-id=\"bbc5cc7\" 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\">    <style>\n        .premium-hs-section {\n            --phs-bg: #111111;\n            --phs-text: #ffffff;\n            --phs-slogan: #A19591;\n            --phs-placeholder: #222222;\n            --phs-project-width: 50vw;\n            --phs-gap: 1vw;\n            color: var(--phs-text);\n            width: 100%;\n            position: relative;\n        }\n\n        .premium-hs-sticky {\n            position: sticky;\n            top: 3%;\n            height: 100vh;\n            width: 98%;\n            margin: 0 auto;\n            overflow: hidden;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            z-index: 10;\n        }\n\n        .premium-hs-inner {\n            width: 100%;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            gap: 2.5rem;\n        }\n\n        .premium-hs-header {\n            width: 100%;\n            display: flex;\n            justify-content: space-between;\n            align-items: flex-end;\n            box-sizing: border-box;\n            z-index: 20;\n        }\n\n        .premium-hs-title {\n            font-size: 60px;\n            font-family: 'jaf-lapture-display', serif;\n            margin: 0;\n            font-weight: 400;\n            line-height: 0.85;\n            text-transform: uppercase;\n            color: var(--phs-text);\n        }\n\n        .premium-hs-controls {\n            display: flex;\n            align-items: flex-end;\n        }\n\n        .premium-hs-btn {\n            display: inline-block;\n            padding: 0.8rem 2rem;\n            border: 1px solid var(--phs-text);\n            border-radius: 50px;\n            color: var(--phs-text);\n            text-decoration: none;\n            font-size: 16px;\n            font-family: 'jaf-lapture-display', serif;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            line-height: 1;\n            transition: all 0.3s ease;\n        }\n\n        .premium-hs-btn:hover {\n            background-color: var(--phs-text);\n            color: var(--phs-bg);\n        }\n\n        .premium-hs-track-wrap {\n            width: 100%;\n            overflow: visible;\n        }\n\n        .premium-hs-track {\n            display: flex;\n            gap: var(--phs-gap);\n            width: max-content;\n            will-change: transform;\n            position: relative;\n            z-index: 15;\n        }\n\n        .premium-hs-item {\n            display: flex;\n            flex-direction: column;\n            gap: 1.5rem;\n            width: var(--phs-project-width);\n            flex-shrink: 0;\n            position: relative;\n        }\n\n        .premium-hs-global-link {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            z-index: 10;\n        }\n\n        .premium-hs-image-wrapper {\n            width: 100%;\n            min-height: 55vh;\n            background-color: var(--phs-placeholder);\n            border-radius: 4px;\n            position: relative;\n            overflow: hidden;\n            display: block;\n        }\n\n        .premium-hs-image-bg {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background-size: cover;\n            background-position: center;\n            transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);\n            will-change: transform;\n        }\n\n        @media (hover: hover) {\n            .premium-hs-item:hover .premium-hs-image-bg {\n                transform: scale(1.05);\n            }\n        }\n\n        .premium-hs-overlay-text {\n            font-size: clamp(2rem, 5vw, 5rem);\n            color: rgba(255, 255, 255, 0.08);\n            font-weight: bold;\n            text-transform: uppercase;\n            letter-spacing: 2px;\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            text-align: center;\n            width: 100%;\n            pointer-events: none;\n            z-index: 2;\n        }\n\n        .premium-hs-meta {\n            display: flex;\n            flex-direction: column;\n        }\n\n        .premium-hs-name {\n            font-size: 24px;\n            text-transform: uppercase;\n            margin-bottom: 0rem;\n            font-weight: 600;\n            color: #fff;\n            font-family: 'jaf-lapture-display', serif;\n            text-decoration: none;\n        }\n\n        .premium-hs-desc {\n            color: var(--phs-slogan);\n            font-size: 24px;\n            font-family: 'jaf-lapture-display', serif;\n            margin-top: 0rem;\n        }\n\n .phs-image-cursor {\n    position: fixed;\n    pointer-events: none;\n    z-index: 9999;\n    width: 35px;\n    height: 35px;\n    transform: translate(-50%, -50%) scale(0.96);\n    opacity: 0;\n    transition: opacity 0.2s ease, transform 0.15s ease;\n    will-change: transform, opacity, left, top;\n}\n\n        .phs-image-cursor.is-visible {\n            opacity: 1;\n            transform: translate(-50%, -50%) scale(1);\n        }\n\n        .phs-image-cursor img {\n            width: 100%;\n            height: 100%;\n            display: block;\n            object-fit: contain;\n            user-select: none;\n            -webkit-user-drag: none;\n        }\n\n        @media (hover: hover) {\n            .premium-hs-item[data-cursor-image]:hover {\n                cursor: none;\n            }\n\n            .premium-hs-item[data-cursor-image]:hover .premium-hs-global-link {\n                cursor: none;\n            }\n        }\n\n        @media (max-width: 768px) {\n            .premium-hs-section {\n                height: auto !important;\n                padding: 4rem 0 0 0;\n                width: 100vw;\n            }\n\n            .premium-hs-sticky {\n                position: relative;\n                top: auto;\n                height: auto;\n                width: 100%;\n                overflow: visible;\n                display: block;\n            }\n\n            .premium-hs-inner {\n                gap: 4rem;\n            }\n\n            .premium-hs-header {\n                padding: 0 10px;\n                flex-direction: column;\n                align-items: flex-start;\n                gap: 1.5rem;\n            }\n\n            .premium-hs-title {\n                font-size: 32px;\n                line-height: 1;\n            }\n\n            .premium-hs-track-wrap {\n                width: 100%;\n                overflow: visible;\n            }\n\n            .premium-hs-track {\n                display: grid;\n                grid-template-columns: 1fr;\n                width: 100%;\n                gap: 4rem;\n                padding: 0 10px;\n                transform: none !important;\n                will-change: auto;\n            }\n\n            .premium-hs-item {\n                width: 100%;\n                gap: 1rem;\n            }\n\n            .premium-hs-image-wrapper {\n                min-height: 260px;\n                border-radius: 6px;\n            }\n\n            .premium-hs-name {\n                font-size: 20px;\n            }\n\n            .premium-hs-desc {\n                font-size: 18px;\n            }\n\n            .phs-image-cursor {\n                display: none !important;\n            }\n        }\n\n        @media (min-width: 480px) and (max-width: 768px) {\n            .premium-hs-track {\n                grid-template-columns: 1fr 1fr;\n                gap: 3vw;\n            }\n\n            .premium-hs-image-wrapper {\n                min-height: 220px;\n            }\n        }\n    <\/style>\n\n    <div class=\"phs-image-cursor\" id=\"phs-image-cursor\" aria-hidden=\"true\">\n        <img decoding=\"async\" src=\"\" alt=\"\" \/>\n    <\/div>\n\n    <section class=\"premium-hs-section\" id=\"phs-section\">\n        <div class=\"premium-hs-sticky\">\n            <div class=\"premium-hs-inner\">\n                <div class=\"premium-hs-header\">\n                    <h2 class=\"premium-hs-title\">PROJETS \u00c0 LA UNE<\/h2>\n                    <div class=\"premium-hs-controls\">\n                        <a href=\"\/projets\" class=\"premium-hs-btn\">TOUS NOS PROJETS<\/a>\n                    <\/div>\n                <\/div>\n\n                <div class=\"premium-hs-track-wrap\">\n                    <div class=\"premium-hs-track\" id=\"phs-track\">\n                                                <div\n                            class=\"premium-hs-item\"\n                                                            data-cursor-image=\"https:\/\/www.roguestudio.ch\/wp-content\/uploads\/2026\/03\/watch.png\"\n                                data-cursor-alt=\"Mermont\"\n                                                    >\n                            <a href=\"https:\/\/www.roguestudio.ch\/en\/projet\/mermont\/\" class=\"premium-hs-global-link\" aria-label=\"Mermont\"><\/a>\n\n                            <div class=\"premium-hs-image-wrapper\">\n                                <div class=\"premium-hs-image-bg\" style=\"background-image: url(https:\/\/www.roguestudio.ch\/wp-content\/uploads\/2026\/03\/Hand-Macro-scaled.jpg);\"><\/div>\n\n                                                            <\/div>\n\n                            <div class=\"premium-hs-meta\">\n                                <span class=\"premium-hs-name\">Mermont<\/span>\n                                                                    <span class=\"premium-hs-desc\">Precisely Unbound<\/span>\n                                                            <\/div>\n                        <\/div>\n                                                <div\n                            class=\"premium-hs-item\"\n                                                            data-cursor-image=\"https:\/\/www.roguestudio.ch\/wp-content\/uploads\/2026\/03\/gem.png\"\n                                data-cursor-alt=\"Les Muses BM\"\n                                                    >\n                            <a href=\"https:\/\/www.roguestudio.ch\/en\/projet\/lesmusesbm\/\" class=\"premium-hs-global-link\" aria-label=\"Les Muses BM\"><\/a>\n\n                            <div class=\"premium-hs-image-wrapper\">\n                                <div class=\"premium-hs-image-bg\" style=\"background-image: url(https:\/\/www.roguestudio.ch\/wp-content\/uploads\/2026\/03\/Swati-boucle-or-scaled-e1774181410618.jpg);\"><\/div>\n\n                                                            <\/div>\n\n                            <div class=\"premium-hs-meta\">\n                                <span class=\"premium-hs-name\">Les Muses BM<\/span>\n                                                                    <span class=\"premium-hs-desc\">Des bijoux \u00e0 l&#039;image de notre monde<\/span>\n                                                            <\/div>\n                        <\/div>\n                                                <div\n                            class=\"premium-hs-item\"\n                                                            data-cursor-image=\"https:\/\/www.roguestudio.ch\/wp-content\/uploads\/2026\/03\/motor_boat.png\"\n                                data-cursor-alt=\"Swiss Yacht Brokers\"\n                                                    >\n                            <a href=\"https:\/\/www.roguestudio.ch\/en\/projet\/syb\/\" class=\"premium-hs-global-link\" aria-label=\"Swiss Yacht Brokers\"><\/a>\n\n                            <div class=\"premium-hs-image-wrapper\">\n                                <div class=\"premium-hs-image-bg\" style=\"background-image: url(https:\/\/www.roguestudio.ch\/wp-content\/uploads\/2026\/03\/SYB_Mockup-1-scaled.jpg);\"><\/div>\n\n                                                            <\/div>\n\n                            <div class=\"premium-hs-meta\">\n                                <span class=\"premium-hs-name\">Swiss Yacht Brokers<\/span>\n                                                                    <span class=\"premium-hs-desc\">A Seamless Experience<\/span>\n                                                            <\/div>\n                        <\/div>\n                                            <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <script>\n        document.addEventListener('DOMContentLoaded', () => {\n            const section = document.getElementById('phs-section');\n            const track = document.getElementById('phs-track');\n            const imageCursor = document.getElementById('phs-image-cursor');\n            const imageCursorImg = imageCursor ? imageCursor.querySelector('img') : null;\n\n            if (!section || !track) return;\n\n            const isMobile = () => window.innerWidth <= 768;\n\n            if (imageCursor && imageCursorImg && window.matchMedia('(hover: hover)').matches) {\n                const items = track.querySelectorAll('.premium-hs-item[data-cursor-image]');\n                let cursorX = 0;\n                let cursorY = 0;\n                let renderX = 0;\n                let renderY = 0;\n                let isOverItem = false;\n                let rafId = null;\n\n                const lerp = (a, b, t) => a + (b - a) * t;\n\n                const animateCursor = () => {\n                    renderX = lerp(renderX, cursorX, 0.15);\n                    renderY = lerp(renderY, cursorY, 0.15);\n\n                    imageCursor.style.left = renderX + 'px';\n                    imageCursor.style.top = renderY + 'px';\n\n                    if (isOverItem) {\n                        rafId = requestAnimationFrame(animateCursor);\n                    }\n                };\n\n                document.addEventListener('mousemove', (e) => {\n                    cursorX = e.clientX;\n                    cursorY = e.clientY;\n                });\n\n                items.forEach((item) => {\n                    const imageUrl = item.getAttribute('data-cursor-image');\n                    const imageAlt = item.getAttribute('data-cursor-alt') || '';\n\n                    item.addEventListener('mouseenter', () => {\n                        if (isMobile() || !imageUrl) return;\n\n                        imageCursorImg.src = imageUrl;\n                        imageCursorImg.alt = imageAlt;\n                        isOverItem = true;\n                        imageCursor.classList.add('is-visible');\n\n                        if (!rafId) {\n                            rafId = requestAnimationFrame(animateCursor);\n                        }\n                    });\n\n                    item.addEventListener('mouseleave', () => {\n                        isOverItem = false;\n                        imageCursor.classList.remove('is-visible');\n\n                        if (rafId) {\n                            cancelAnimationFrame(rafId);\n                            rafId = null;\n                        }\n                    });\n                });\n            }\n\n            const calculateHeight = () => {\n                if (isMobile()) {\n                    section.style.height = 'auto';\n                    track.style.transform = 'none';\n                    return;\n                }\n\n                const trackWidth = track.scrollWidth;\n                const windowWidth = window.innerWidth;\n                const scrollableDistance = trackWidth - windowWidth + (windowWidth * 0.05);\n\n                if (scrollableDistance > 0) {\n                    section.style.height = `calc(100vh + ${scrollableDistance}px)`;\n                } else {\n                    section.style.height = '100vh';\n                }\n            };\n\n            let isTicking = false;\n\n            const onScroll = () => {\n                if (isMobile()) {\n                    track.style.transform = 'none';\n                    return;\n                }\n\n                if (!isTicking) {\n                    window.requestAnimationFrame(() => {\n                        const sectionRect = section.getBoundingClientRect();\n                        const scrollStart = sectionRect.top;\n\n                        if (scrollStart <= 0) {\n                            const maxScroll = section.offsetHeight - window.innerHeight;\n                            let progress = -scrollStart;\n\n                            if (progress > maxScroll) progress = maxScroll;\n\n                            track.style.transform = `translate3d(-${progress}px, 0, 0)`;\n                        } else {\n                            track.style.transform = 'translate3d(0, 0, 0)';\n                        }\n\n                        isTicking = false;\n                    });\n\n                    isTicking = true;\n                }\n            };\n\n            calculateHeight();\n            onScroll();\n\n            window.addEventListener('resize', () => {\n                calculateHeight();\n                onScroll();\n            });\n\n            window.addEventListener('scroll', onScroll, { passive: true });\n\n            setTimeout(() => {\n                calculateHeight();\n                onScroll();\n            }, 500);\n\n            if (window.location.pathname === '\/projets' || window.location.pathname === '\/projets\/') {\n                const btn = section.querySelector('.premium-hs-btn');\n                if (btn) btn.style.display = 'none';\n\n                const title = section.querySelector('.premium-hs-title');\n                if (title) title.textContent = 'Autres projets';\n\n                if (window.innerWidth <= 768) {\n                    const header = section.querySelector('.premium-hs-header');\n                    if (header) header.style.marginBottom = '-2rem';\n                }\n            }\n        });\n    <\/script>\n    <\/div>\n\t\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":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-459","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.roguestudio.ch\/en\/wp-json\/wp\/v2\/pages\/459","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.roguestudio.ch\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.roguestudio.ch\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.roguestudio.ch\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.roguestudio.ch\/en\/wp-json\/wp\/v2\/comments?post=459"}],"version-history":[{"count":55,"href":"https:\/\/www.roguestudio.ch\/en\/wp-json\/wp\/v2\/pages\/459\/revisions"}],"predecessor-version":[{"id":1540,"href":"https:\/\/www.roguestudio.ch\/en\/wp-json\/wp\/v2\/pages\/459\/revisions\/1540"}],"wp:attachment":[{"href":"https:\/\/www.roguestudio.ch\/en\/wp-json\/wp\/v2\/media?parent=459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}