{"id":39,"date":"2026-08-09T08:56:08","date_gmt":"2026-08-09T08:56:08","guid":{"rendered":"https:\/\/skoom.fr\/?page_id=39"},"modified":"2026-08-28T11:14:37","modified_gmt":"2026-08-28T11:14:37","slug":"hello-theme-39","status":"publish","type":"page","link":"https:\/\/skoom.fr\/en\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"39\" class=\"elementor elementor-39\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1776e1b e-con e-atomic-element e-flexbox-base e-c97689b \" data-id=\"1776e1b\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"1776e1b\">\n    \t\t<div class=\"elementor-element elementor-element-38bdb85 elementor-absolute skoom-hamburger-fixed elementor-widget elementor-widget-shortcode\" data-id=\"38bdb85\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n    <div class=\"skoom-nav\">\n\n        <!-- HAMBURGER -->\n        <button\n            class=\"skoom-hamburger\"\n            type=\"button\"\n            aria-label=\"Ouvrir le menu\"\n            aria-expanded=\"false\"\n        >\n            <span><\/span>\n            <span><\/span>\n            <span><\/span>\n        <\/button>\n\n\n        <!-- PANNEAU -->\n        <div class=\"skoom-panel\">\n\n            <!-- CROIX -->\n            <button\n                class=\"skoom-close\"\n                type=\"button\"\n                aria-label=\"Fermer le menu\"\n            >\n                <span><\/span>\n                <span><\/span>\n            <\/button>\n\n\n            <!-- MENU WORDPRESS -->\n            <nav class=\"skoom-menu-container\">\n\n                <ul id=\"menu-menu-principal-skoom\" class=\"skoom-wordpress-menu\"><li id=\"menu-item-36\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-36\"><a href=\"https:\/\/skoom.fr\/en\/a-propos\/\">Les SkOOmers<\/a><\/li>\n<li id=\"menu-item-35\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-35\"><a href=\"https:\/\/skoom.fr\/en\/decouvrir-skoom\/\">D\u00e9couvrir SKOOM<\/a><\/li>\n<li id=\"menu-item-34\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-34\"><a href=\"https:\/\/skoom.fr\/en\/nos-solutions\/\">Nos solutions<\/a><\/li>\n<li id=\"menu-item-33\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-33\"><a href=\"https:\/\/skoom.fr\/en\/contacter-nous\/\">Contactez-nous<\/a><\/li>\n<li id=\"menu-item-962\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-962\"><a href=\"https:\/\/skoom.fr\/en\/registration\/\">Activer mon compte<\/a><\/li>\n<li id=\"menu-item-1666\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1666\"><a href=\"https:\/\/skoom.fr\/en\/politique-de-cookies-ue\/\">Politique de cookies (UE)<\/a><\/li>\n<\/ul>\n            <\/nav>\n\n        <\/div>\n\n    <\/div>\n\n\n    <style>\n\n    \/* =========================================================\n       SKOOM \u2014 MENU FLOTTANT ADAPTATIF\n    ========================================================= *\/\n\n\n    \/* =========================================================\n       CONTENEUR GLOBAL\n    ========================================================= *\/\n\n    .skoom-nav {\n\n        position: fixed !important;\n\n        top: 48px !important;\n        left: 28px !important;\n\n        right: auto !important;\n        bottom: auto !important;\n\n        display: inline-flex !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        margin: 0 !important;\n        padding: 0 !important;\n\n        overflow: visible !important;\n\n        z-index: 999999 !important;\n\n        --skoom-menu-color: #FFFFFF;\n\n    }\n\n\n    \/* =========================================================\n       FOND CLAIR\n       HAMBURGER VIOLET\n    ========================================================= *\/\n\n    .skoom-nav.skoom-bg-light {\n\n        --skoom-menu-color: #8703B3;\n\n    }\n\n\n    \/* =========================================================\n       FOND SOMBRE\n       HAMBURGER BLANC\n    ========================================================= *\/\n\n    .skoom-nav.skoom-bg-dark {\n\n        --skoom-menu-color: #FFFFFF;\n\n    }\n\n\n    \/* =========================================================\n       HAMBURGER\n       VERSION PLUS GRANDE\n    ========================================================= *\/\n\n    .skoom-hamburger {\n\n        position: relative !important;\n\n        display: flex !important;\n\n        flex-direction: column !important;\n\n        align-items: flex-start !important;\n        justify-content: center !important;\n\n        width: 54px !important;\n        height: 54px !important;\n\n        margin: 0 !important;\n\n        padding: 8px !important;\n\n        gap: 7px !important;\n\n        border: none !important;\n        outline: none !important;\n\n        background: transparent !important;\n\n        box-shadow: none !important;\n\n        cursor: pointer !important;\n\n        z-index: 1000001 !important;\n\n        -webkit-tap-highlight-color: transparent;\n\n    }\n\n\n    \/* =========================================================\n       BARRES HAMBURGER\n       PLUS \u00c9PAISSES\n    ========================================================= *\/\n\n    .skoom-hamburger span {\n\n        display: block !important;\n\n        height: 3px !important;\n\n        margin: 0 !important;\n        padding: 0 !important;\n\n        background-color:\n            var(--skoom-menu-color) !important;\n\n        border-radius: 20px !important;\n\n        transition:\n            width 250ms ease,\n            background-color 300ms ease,\n            box-shadow 300ms ease\n            !important;\n\n    }\n\n\n    \/* =========================================================\n       LONGUEUR DES TRAITS\n    ========================================================= *\/\n\n    .skoom-hamburger span:nth-child(1) {\n\n        width: 34px !important;\n\n    }\n\n\n    .skoom-hamburger span:nth-child(2) {\n\n        width: 27px !important;\n\n    }\n\n\n    .skoom-hamburger span:nth-child(3) {\n\n        width: 34px !important;\n\n    }\n\n\n    \/* =========================================================\n       VIOLET SUR FOND CLAIR\n    ========================================================= *\/\n\n    .skoom-nav.skoom-bg-light\n    .skoom-hamburger span {\n\n        background-color:\n            #8703B3 !important;\n\n        box-shadow:\n            0 0 10px\n            rgba(135,3,179,.18);\n\n    }\n\n\n    \/* =========================================================\n       BLANC SUR FOND SOMBRE\n    ========================================================= *\/\n\n    .skoom-nav.skoom-bg-dark\n    .skoom-hamburger span {\n\n        background-color:\n            #FFFFFF !important;\n\n        box-shadow:\n            0 0 8px\n            rgba(255,255,255,.12);\n\n    }\n\n\n    \/* =========================================================\n       HOVER\n       LE TRAIT CENTRAL S'ALLONGE\n    ========================================================= *\/\n\n    .skoom-hamburger:hover\n    span:nth-child(2) {\n\n        width: 34px !important;\n\n    }\n\n\n    \/* =========================================================\n       PANNEAU GLASS\n       STYLE DE BASE\n    ========================================================= *\/\n\n    .skoom-panel {\n\n        position: absolute !important;\n\n        top: calc(100% + 12px) !important;\n\n        left: 0 !important;\n        right: auto !important;\n\n        width: 310px !important;\n\n        max-width:\n            calc(100vw - 56px) !important;\n\n        box-sizing: border-box !important;\n\n        margin: 0 !important;\n\n        padding: 24px !important;\n\n        border-radius:\n            20px !important;\n\n        opacity: 0 !important;\n\n        visibility:\n            hidden !important;\n\n        pointer-events:\n            none !important;\n\n        transform:\n            translateY(-8px)\n            scale(.97) !important;\n\n        transform-origin:\n            top left !important;\n\n        transition:\n            opacity 280ms ease,\n            transform\n            380ms\n            cubic-bezier(.16,1,.3,1),\n            visibility 280ms ease,\n            background 350ms ease,\n            border-color 350ms ease,\n            box-shadow 350ms ease\n            !important;\n\n        z-index:\n            1000000 !important;\n\n    }\n\n\n    \/* =========================================================\n       PANNEAU SUR FOND CLAIR\n       \u2192 GLASS SOMBRE SKOOM\n    ========================================================= *\/\n\n    .skoom-nav.skoom-bg-light\n    .skoom-panel {\n\n        background:\n            linear-gradient(\n                145deg,\n                rgba(24,7,45,.96) 0%,\n                rgba(17,4,35,.94) 52%,\n                rgba(11,2,25,.96) 100%\n            ) !important;\n\n        -webkit-backdrop-filter:\n            blur(24px)\n            saturate(145%) !important;\n\n        backdrop-filter:\n            blur(24px)\n            saturate(145%) !important;\n\n        border:\n            1px solid\n            rgba(185,114,255,.30) !important;\n\n        box-shadow:\n            0 30px 70px\n            rgba(20,5,40,.28),\n            0 10px 35px\n            rgba(135,3,179,.16),\n            inset 0 1px 0\n            rgba(255,255,255,.09)\n            !important;\n\n    }\n\n\n    \/* =========================================================\n       PANNEAU SUR FOND SOMBRE\n       \u2192 GLASS PLUS CLAIR\n    ========================================================= *\/\n\n    .skoom-nav.skoom-bg-dark\n    .skoom-panel {\n\n        background:\n            linear-gradient(\n                135deg,\n                rgba(255,255,255,.18),\n                rgba(180,0,240,.11)\n            ) !important;\n\n        -webkit-backdrop-filter:\n            blur(24px)\n            saturate(145%) !important;\n\n        backdrop-filter:\n            blur(24px)\n            saturate(145%) !important;\n\n        border:\n            1px solid\n            rgba(230,210,255,.56) !important;\n\n        box-shadow:\n            0 28px 70px\n            rgba(10,0,35,.28),\n            inset 0 1px 0\n            rgba(255,255,255,.30),\n            0 0 28px\n            rgba(180,0,240,.10)\n            !important;\n\n    }\n\n\n    \/* =========================================================\n       PANNEAU OUVERT\n    ========================================================= *\/\n\n    .skoom-panel.active {\n\n        opacity: 1 !important;\n\n        visibility:\n            visible !important;\n\n        pointer-events:\n            auto !important;\n\n        transform:\n            translateY(0)\n            scale(1) !important;\n\n    }\n\n\n    \/* =========================================================\n       CROIX\n    ========================================================= *\/\n\n    .skoom-close {\n\n        position: absolute !important;\n\n        top: 16px !important;\n        right: 17px !important;\n\n        width: 28px !important;\n        height: 28px !important;\n\n        margin: 0 !important;\n        padding: 0 !important;\n\n        border: none !important;\n        outline: none !important;\n\n        background:\n            transparent !important;\n\n        cursor: pointer !important;\n\n        z-index:\n            1000002 !important;\n\n        transition:\n            transform 250ms ease,\n            opacity 250ms ease\n            !important;\n\n    }\n\n\n    .skoom-close span {\n\n        position: absolute !important;\n\n        top: 50% !important;\n        left: 50% !important;\n\n        width: 17px !important;\n        height: 1.5px !important;\n\n        border-radius:\n            20px !important;\n\n        transform-origin:\n            center !important;\n\n        transition:\n            background-color 300ms ease,\n            box-shadow 300ms ease\n            !important;\n\n    }\n\n\n    \/* CROIX SUR PANNEAU SOMBRE *\/\n\n    .skoom-nav.skoom-bg-light\n    .skoom-close span {\n\n        background:\n            #FFFFFF !important;\n\n        box-shadow:\n            0 0 8px\n            rgba(180,0,240,.32);\n\n    }\n\n\n    \/* CROIX SUR PANNEAU CLAIR *\/\n\n    .skoom-nav.skoom-bg-dark\n    .skoom-close span {\n\n        background:\n            #FFFFFF !important;\n\n        box-shadow:\n            0 0 8px\n            rgba(180,0,240,.25);\n\n    }\n\n\n    .skoom-close\n    span:first-child {\n\n        transform:\n            translate(-50%,-50%)\n            rotate(45deg)\n            !important;\n\n    }\n\n\n    .skoom-close\n    span:last-child {\n\n        transform:\n            translate(-50%,-50%)\n            rotate(-45deg)\n            !important;\n\n    }\n\n\n    .skoom-close:hover {\n\n        transform:\n            rotate(90deg) !important;\n\n        opacity:\n            .65 !important;\n\n    }\n\n\n    \/* =========================================================\n       CONTENEUR MENU\n    ========================================================= *\/\n\n    .skoom-menu-container {\n\n        width: 100% !important;\n\n        margin: 0 !important;\n\n        padding:\n            0\n            42px\n            0\n            0\n            !important;\n\n        box-sizing:\n            border-box !important;\n\n    }\n\n\n    \/* =========================================================\n       MENU WORDPRESS\n    ========================================================= *\/\n\n    .skoom-wordpress-menu {\n\n        width: 100% !important;\n\n        margin: 0 !important;\n        padding: 0 !important;\n\n        list-style:\n            none !important;\n\n        display:\n            flex !important;\n\n        flex-direction:\n            column !important;\n\n        gap:\n            5px !important;\n\n    }\n\n\n    .skoom-wordpress-menu > li {\n\n        position:\n            relative !important;\n\n        width: 100% !important;\n\n        margin: 0 !important;\n        padding: 0 !important;\n\n        list-style:\n            none !important;\n\n    }\n\n\n    \/* =========================================================\n       LIENS\n    ========================================================= *\/\n\n    .skoom-wordpress-menu > li > a {\n\n        position:\n            relative !important;\n\n        display:\n            flex !important;\n\n        align-items:\n            center !important;\n\n        width: 100% !important;\n\n        box-sizing:\n            border-box !important;\n\n        margin: 0 !important;\n\n        padding:\n            10px 0 !important;\n\n        background:\n            transparent !important;\n\n        text-decoration:\n            none !important;\n\n        font-family:\n            \"Manrope\",\n            Arial,\n            sans-serif\n            !important;\n\n        font-size:\n            15px !important;\n\n        font-weight:\n            500 !important;\n\n        line-height:\n            1.35 !important;\n\n        transform-origin:\n            left center !important;\n\n        transition:\n            color 250ms ease,\n            font-weight 250ms ease,\n            padding-left\n            300ms\n            cubic-bezier(.16,1,.3,1),\n            transform\n            300ms\n            cubic-bezier(.16,1,.3,1),\n            text-shadow 250ms ease\n            !important;\n\n    }\n\n\n    \/* =========================================================\n       LIENS SUR FOND CLAIR\n       PANNEAU SOMBRE\n    ========================================================= *\/\n\n    .skoom-nav.skoom-bg-light\n    .skoom-wordpress-menu > li > a {\n\n        color:\n            #DCA8FF !important;\n\n        text-shadow:\n            0 0 12px\n            rgba(180,0,240,.20);\n\n    }\n\n\n    \/* =========================================================\n       LIENS SUR FOND SOMBRE\n       PANNEAU CLAIR\n    ========================================================= *\/\n\n    .skoom-nav.skoom-bg-dark\n    .skoom-wordpress-menu > li > a {\n\n        color:\n            #D7A7FF !important;\n\n        text-shadow:\n            0 0 12px\n            rgba(180,0,240,.18);\n\n    }\n\n\n    \/* =========================================================\n       TRAIT LUMINEUX\n    ========================================================= *\/\n\n    .skoom-wordpress-menu\n    > li > a::before {\n\n        content: \"\";\n\n        position:\n            absolute;\n\n        left: 0;\n\n        top: 50%;\n\n        width: 0;\n        height: 2px;\n\n        background:\n            linear-gradient(\n                90deg,\n                #B400F0,\n                #E3B7FF\n            );\n\n        border-radius:\n            20px;\n\n        transform:\n            translateY(-50%);\n\n        opacity:\n            0;\n\n        box-shadow:\n            0 0 10px\n            rgba(180,0,240,.85);\n\n        transition:\n            width 280ms\n            cubic-bezier(.16,1,.3,1),\n            opacity 200ms ease;\n\n    }\n\n\n    \/* =========================================================\n       HOVER MENU\n    ========================================================= *\/\n\n    .skoom-wordpress-menu\n    > li > a:hover {\n\n        color:\n            #FFFFFF !important;\n\n        font-weight:\n            600 !important;\n\n        padding-left:\n            20px !important;\n\n        transform:\n            scale(1.18) !important;\n\n        text-shadow:\n            0 0 16px\n            rgba(255,255,255,.34);\n\n    }\n\n\n    .skoom-wordpress-menu\n    > li > a:hover::before {\n\n        width: 12px;\n\n        opacity: 1;\n\n    }\n\n\n    \/* =========================================================\n       PAGE ACTIVE\n    ========================================================= *\/\n\n    .skoom-wordpress-menu\n    .current-menu-item > a {\n\n        color:\n            #FFFFFF !important;\n\n        font-weight:\n            650 !important;\n\n    }\n\n\n    .skoom-wordpress-menu\n    .current-menu-item > a::before {\n\n        width: 12px;\n\n        opacity: 1;\n\n    }\n\n\n    \/* =========================================================\n       SOUS-MENUS\n    ========================================================= *\/\n\n    .skoom-wordpress-menu\n    .sub-menu {\n\n        margin: 0 !important;\n\n        padding:\n            0\n            0\n            3px\n            14px\n            !important;\n\n        list-style:\n            none !important;\n\n    }\n\n\n    .skoom-wordpress-menu\n    .sub-menu a {\n\n        display:\n            block !important;\n\n        padding:\n            6px 0 !important;\n\n        color:\n            #D7A7FF !important;\n\n        text-decoration:\n            none !important;\n\n        font-family:\n            \"Manrope\",\n            Arial,\n            sans-serif\n            !important;\n\n        font-size:\n            14px !important;\n\n        font-weight:\n            500 !important;\n\n        transform-origin:\n            left center !important;\n\n        transition:\n            color 250ms ease,\n            transform 300ms\n            cubic-bezier(.16,1,.3,1)\n            !important;\n\n    }\n\n\n    .skoom-wordpress-menu\n    .sub-menu a:hover {\n\n        color:\n            #FFFFFF !important;\n\n        font-weight:\n            600 !important;\n\n        transform:\n            translateX(4px)\n            scale(1.05)\n            !important;\n\n    }\n\n\n    \/* =========================================================\n       TABLETTE\n    ========================================================= *\/\n\n    @media (max-width: 1024px) {\n\n        .skoom-nav {\n\n            top:\n                38px !important;\n\n            left:\n                18px !important;\n\n        }\n\n    }\n\n\n    \/* =========================================================\n       MOBILE\n    ========================================================= *\/\n\n    @media (max-width: 767px) {\n\n        .skoom-nav {\n\n            top:\n                28px !important;\n\n            left:\n                12px !important;\n\n        }\n\n\n        .skoom-hamburger {\n\n            width:\n                48px !important;\n\n            height:\n                48px !important;\n\n            gap:\n                6px !important;\n\n        }\n\n\n        .skoom-hamburger span {\n\n            height:\n                2.5px !important;\n\n        }\n\n\n        .skoom-hamburger span:nth-child(1) {\n\n            width:\n                31px !important;\n\n        }\n\n\n        .skoom-hamburger span:nth-child(2) {\n\n            width:\n                25px !important;\n\n        }\n\n\n        .skoom-hamburger span:nth-child(3) {\n\n            width:\n                31px !important;\n\n        }\n\n\n        .skoom-hamburger:hover\n        span:nth-child(2) {\n\n            width:\n                31px !important;\n\n        }\n\n\n        .skoom-panel {\n\n            width:\n                min(290px,86vw) !important;\n\n            max-width:\n                calc(100vw - 24px) !important;\n\n            left:\n                0 !important;\n\n            border-radius:\n                20px !important;\n\n            padding:\n                20px !important;\n\n        }\n\n\n        .skoom-wordpress-menu > li > a:hover {\n\n            transform:\n                scale(1.08) !important;\n\n        }\n\n    }\n\n\n    \/* =========================================================\n       ACCESSIBILIT\u00c9\n    ========================================================= *\/\n\n    @media (prefers-reduced-motion: reduce) {\n\n        .skoom-panel,\n        .skoom-close,\n        .skoom-wordpress-menu a,\n        .skoom-hamburger span {\n\n            transition:\n                none !important;\n\n        }\n\n    }\n\n    <\/style>\n\n\n    <script>\n\n    (function () {\n\n        function initSkoomMenu() {\n\n            document\n            .querySelectorAll(\".skoom-nav\")\n            .forEach(function (nav) {\n\n\n                if (\n                    nav.dataset.skoomInitialized\n                    === \"true\"\n                ) {\n                    return;\n                }\n\n\n                nav.dataset.skoomInitialized =\n                    \"true\";\n\n\n                const hamburger =\n                    nav.querySelector(\n                        \".skoom-hamburger\"\n                    );\n\n\n                const panel =\n                    nav.querySelector(\n                        \".skoom-panel\"\n                    );\n\n\n                const closeButton =\n                    nav.querySelector(\n                        \".skoom-close\"\n                    );\n\n\n                if (\n                    !hamburger ||\n                    !panel ||\n                    !closeButton\n                ) {\n                    return;\n                }\n\n\n                \/* =============================================\n                   MENU\n                ============================================= *\/\n\n                function openMenu() {\n\n                    updateColor();\n\n                    panel.classList.add(\n                        \"active\"\n                    );\n\n                    hamburger.setAttribute(\n                        \"aria-expanded\",\n                        \"true\"\n                    );\n\n                }\n\n\n                function closeMenu() {\n\n                    panel.classList.remove(\n                        \"active\"\n                    );\n\n                    hamburger.setAttribute(\n                        \"aria-expanded\",\n                        \"false\"\n                    );\n\n                }\n\n\n                function toggleMenu() {\n\n                    if (\n                        panel.classList.contains(\n                            \"active\"\n                        )\n                    ) {\n\n                        closeMenu();\n\n                    } else {\n\n                        openMenu();\n\n                    }\n\n                }\n\n\n                hamburger.addEventListener(\n                    \"click\",\n                    function (event) {\n\n                        event.preventDefault();\n\n                        event.stopPropagation();\n\n                        toggleMenu();\n\n                    }\n                );\n\n\n                closeButton.addEventListener(\n                    \"click\",\n                    function (event) {\n\n                        event.preventDefault();\n\n                        event.stopPropagation();\n\n                        closeMenu();\n\n                    }\n                );\n\n\n                panel.addEventListener(\n                    \"click\",\n                    function (event) {\n\n                        event.stopPropagation();\n\n                    }\n                );\n\n\n                document.addEventListener(\n                    \"click\",\n                    closeMenu\n                );\n\n\n                document.addEventListener(\n                    \"keydown\",\n                    function (event) {\n\n                        if (\n                            event.key === \"Escape\"\n                        ) {\n\n                            closeMenu();\n\n                        }\n\n                    }\n                );\n\n\n                \/* =============================================\n                   LUMINANCE\n                ============================================= *\/\n\n                function luminance(\n                    r,\n                    g,\n                    b\n                ) {\n\n                    return (\n                        0.2126 * r +\n                        0.7152 * g +\n                        0.0722 * b\n                    );\n\n                }\n\n\n                \/* =============================================\n                   PARSER UNE COULEUR\n                ============================================= *\/\n\n                function parseColor(color) {\n\n                    if (\n                        !color ||\n                        color === \"transparent\"\n                    ) {\n\n                        return null;\n\n                    }\n\n\n                    const numbers =\n                        color.match(\n                            \/[\\d.]+\/g\n                        );\n\n\n                    if (\n                        !numbers ||\n                        numbers.length < 3\n                    ) {\n\n                        return null;\n\n                    }\n\n\n                    const alpha =\n                        numbers.length >= 4\n                        ? parseFloat(numbers[3])\n                        : 1;\n\n\n                    if (alpha < .15) {\n\n                        return null;\n\n                    }\n\n\n                    return {\n\n                        r:\n                            Number(numbers[0]),\n\n                        g:\n                            Number(numbers[1]),\n\n                        b:\n                            Number(numbers[2])\n\n                    };\n\n                }\n\n\n                \/* =============================================\n                   IMAGE HTML\n                ============================================= *\/\n\n                function sampleImage(\n                    image,\n                    screenX,\n                    screenY\n                ) {\n\n                    try {\n\n                        if (\n                            !image.complete ||\n                            !image.naturalWidth ||\n                            !image.naturalHeight\n                        ) {\n\n                            return null;\n\n                        }\n\n\n                        const rect =\n                            image.getBoundingClientRect();\n\n\n                        if (\n                            rect.width <= 0 ||\n                            rect.height <= 0\n                        ) {\n\n                            return null;\n\n                        }\n\n\n                        const ratioX =\n                            (\n                                screenX -\n                                rect.left\n                            )\n                            \/\n                            rect.width;\n\n\n                        const ratioY =\n                            (\n                                screenY -\n                                rect.top\n                            )\n                            \/\n                            rect.height;\n\n\n                        const sourceX =\n                            Math.max(\n                                0,\n                                Math.min(\n                                    image.naturalWidth - 1,\n                                    Math.round(\n                                        ratioX *\n                                        image.naturalWidth\n                                    )\n                                )\n                            );\n\n\n                        const sourceY =\n                            Math.max(\n                                0,\n                                Math.min(\n                                    image.naturalHeight - 1,\n                                    Math.round(\n                                        ratioY *\n                                        image.naturalHeight\n                                    )\n                                )\n                            );\n\n\n                        const canvas =\n                            document.createElement(\n                                \"canvas\"\n                            );\n\n\n                        canvas.width = 1;\n                        canvas.height = 1;\n\n\n                        const context =\n                            canvas.getContext(\n                                \"2d\",\n                                {\n                                    willReadFrequently:\n                                        true\n                                }\n                            );\n\n\n                        context.drawImage(\n                            image,\n                            sourceX,\n                            sourceY,\n                            1,\n                            1,\n                            0,\n                            0,\n                            1,\n                            1\n                        );\n\n\n                        const pixel =\n                            context.getImageData(\n                                0,\n                                0,\n                                1,\n                                1\n                            ).data;\n\n\n                        return {\n\n                            r: pixel[0],\n                            g: pixel[1],\n                            b: pixel[2]\n\n                        };\n\n\n                    } catch (error) {\n\n                        return null;\n\n                    }\n\n                }\n\n\n                \/* =============================================\n                   ANALYSE DE LA SURFACE\n                ============================================= *\/\n\n                function analyzeElement(\n                    element,\n                    x,\n                    y\n                ) {\n\n                    let current =\n                        element;\n\n\n                    while (\n                        current &&\n                        current !==\n                        document.documentElement\n                    ) {\n\n\n                        if (\n                            current.classList\n                        ) {\n\n\n                            if (\n                                current.classList.contains(\n                                    \"skoom-force-light-menu\"\n                                )\n                            ) {\n\n                                return \"light\";\n\n                            }\n\n\n                            if (\n                                current.classList.contains(\n                                    \"skoom-force-dark-menu\"\n                                )\n                            ) {\n\n                                return \"dark\";\n\n                            }\n\n                        }\n\n\n                        if (\n                            current.tagName === \"IMG\"\n                        ) {\n\n                            const pixel =\n                                sampleImage(\n                                    current,\n                                    x,\n                                    y\n                                );\n\n\n                            if (pixel) {\n\n                                return (\n                                    luminance(\n                                        pixel.r,\n                                        pixel.g,\n                                        pixel.b\n                                    )\n                                    > 150\n                                )\n                                ? \"light\"\n                                : \"dark\";\n\n                            }\n\n                        }\n\n\n                        const style =\n                            window.getComputedStyle(\n                                current\n                            );\n\n\n                        const color =\n                            parseColor(\n                                style.backgroundColor\n                            );\n\n\n                        if (color) {\n\n                            const value =\n                                luminance(\n                                    color.r,\n                                    color.g,\n                                    color.b\n                                );\n\n\n                            return value > 150\n                                ? \"light\"\n                                : \"dark\";\n\n                        }\n\n\n                        current =\n                            current.parentElement;\n\n                    }\n\n\n                    return \"light\";\n\n                }\n\n\n                \/* =============================================\n                   MISE \u00c0 JOUR COULEUR\n                ============================================= *\/\n\n                function updateColor() {\n\n                    const rect =\n                        hamburger\n                        .getBoundingClientRect();\n\n\n                    const points = [\n\n                        {\n                            x:\n                                rect.left + 10,\n\n                            y:\n                                rect.top + 14\n                        },\n\n                        {\n                            x:\n                                rect.left +\n                                rect.width \/ 2,\n\n                            y:\n                                rect.top +\n                                rect.height \/ 2\n                        },\n\n                        {\n                            x:\n                                rect.left + 25,\n\n                            y:\n                                rect.bottom - 13\n                        }\n\n                    ];\n\n\n                    let lightVotes = 0;\n                    let darkVotes = 0;\n\n\n                    points.forEach(\n                        function (point) {\n\n\n                            const stack =\n                                document\n                                .elementsFromPoint(\n                                    point.x,\n                                    point.y\n                                );\n\n\n                            const target =\n                                stack.find(\n                                    function (element) {\n\n                                        return (\n                                            !nav.contains(\n                                                element\n                                            )\n                                        );\n\n                                    }\n                                );\n\n\n                            if (!target) {\n\n                                return;\n\n                            }\n\n\n                            const result =\n                                analyzeElement(\n                                    target,\n                                    point.x,\n                                    point.y\n                                );\n\n\n                            if (\n                                result === \"light\"\n                            ) {\n\n                                lightVotes++;\n\n                            } else {\n\n                                darkVotes++;\n\n                            }\n\n                        }\n                    );\n\n\n                    if (\n                        lightVotes >\n                        darkVotes\n                    ) {\n\n                        nav.classList.add(\n                            \"skoom-bg-light\"\n                        );\n\n\n                        nav.classList.remove(\n                            \"skoom-bg-dark\"\n                        );\n\n                    } else {\n\n                        nav.classList.add(\n                            \"skoom-bg-dark\"\n                        );\n\n\n                        nav.classList.remove(\n                            \"skoom-bg-light\"\n                        );\n\n                    }\n\n                }\n\n\n                \/* =============================================\n                   SCROLL OPTIMIS\u00c9\n                ============================================= *\/\n\n                let scheduled =\n                    false;\n\n\n                function scheduleUpdate() {\n\n                    if (scheduled) {\n\n                        return;\n\n                    }\n\n\n                    scheduled = true;\n\n\n                    requestAnimationFrame(\n                        function () {\n\n                            updateColor();\n\n                            scheduled =\n                                false;\n\n                        }\n                    );\n\n                }\n\n\n                window.addEventListener(\n                    \"scroll\",\n                    scheduleUpdate,\n                    {\n                        passive: true\n                    }\n                );\n\n\n                window.addEventListener(\n                    \"resize\",\n                    scheduleUpdate,\n                    {\n                        passive: true\n                    }\n                );\n\n\n                window.addEventListener(\n                    \"load\",\n                    scheduleUpdate\n                );\n\n\n                scheduleUpdate();\n\n\n                setTimeout(\n                    scheduleUpdate,\n                    400\n                );\n\n\n                setTimeout(\n                    scheduleUpdate,\n                    1200\n                );\n\n            });\n\n        }\n\n\n        if (\n            document.readyState ===\n            \"loading\"\n        ) {\n\n            document.addEventListener(\n                \"DOMContentLoaded\",\n                initSkoomMenu\n            );\n\n        } else {\n\n            initSkoomMenu();\n\n        }\n\n    })();\n\n    <\/script>\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" class=\"e-image-base e-d644c16-300fb62\" data-interaction-id=\"d644c16\" id=\"43\" src=\"https:\/\/skoom.fr\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-8-aout-2026-12_57_11.png\" width=\"1672\" height=\"941\" srcset=\"https:\/\/skoom.fr\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-8-aout-2026-12_57_11.png 1672w, https:\/\/skoom.fr\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-8-aout-2026-12_57_11-300x169.png 300w, https:\/\/skoom.fr\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-8-aout-2026-12_57_11-1024x576.png 1024w, https:\/\/skoom.fr\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-8-aout-2026-12_57_11-768x432.png 768w, https:\/\/skoom.fr\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-8-aout-2026-12_57_11-1536x864.png 1536w\" alt=\"\"\/>\t\t\t\t<div class=\"elementor-element elementor-element-2a58509 elementor-absolute skoom-account-fixed elementor-widget elementor-widget-shortcode\" data-id=\"2a58509\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n\n    <!-- =====================================================\n         SKOOM \u2014 BOUTON COMPTE\n    ====================================================== -->\n\n    <div\n        class=\"skoom-account-fixed\"\n        data-skoom-logged-in=\"false\"\n        data-registration-url=\"https:\/\/skoom.fr\/en\/registration\/\"\n        data-login-url=\"https:\/\/skoom.fr\/en\/login\/\"\n    >\n\n        <a\n            href=\"https:\/\/skoom.fr\/en\/registration\/\"\n            class=\"skoom-login-btn skoom-is-activation\"\n            aria-label=\"Activer mon compte SKOOM\"\n        >\n\n            <span>\n                Activer mon compte            <\/span>\n\n        <\/a>\n\n    <\/div>\n\n\n    <style>\n\n    \/* ======================================================\n       ======================================================\n       SKOOM \u2014 BOUTON COMPTE 3 \u00c9TATS\n       ======================================================\n    ====================================================== *\/\n\n\n    \/* ======================================================\n       02 \u2014 CONTENEUR FIXE\n    ====================================================== *\/\n\n    .skoom-account-fixed {\n\n        position: fixed !important;\n\n        top: 48px !important;\n\n        left: 88px !important;\n\n        right: auto !important;\n        bottom: auto !important;\n\n        display: flex !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        margin: 0 !important;\n        padding: 0 !important;\n\n        z-index: 999990 !important;\n\n\n        \/* ================================================\n           VARIABLES PAR D\u00c9FAUT\n           FOND SOMBRE\n        ================================================ *\/\n\n        --skoom-account-text: #FFFFFF;\n\n        --skoom-account-border:\n            rgba(255,255,255,.20);\n\n        --skoom-account-bg-1:\n            rgba(135,3,179,.48);\n\n        --skoom-account-bg-2:\n            rgba(112,0,255,.22);\n\n        --skoom-account-shadow:\n            rgba(135,3,179,.22);\n\n    }\n\n\n    \/* ======================================================\n       03 \u2014 FOND SOMBRE\n    ====================================================== *\/\n\n    .skoom-account-fixed.skoom-account-dark {\n\n        --skoom-account-text:\n            #FFFFFF;\n\n        --skoom-account-border:\n            rgba(255,255,255,.20);\n\n        --skoom-account-bg-1:\n            rgba(135,3,179,.48);\n\n        --skoom-account-bg-2:\n            rgba(112,0,255,.22);\n\n        --skoom-account-shadow:\n            rgba(135,3,179,.22);\n\n    }\n\n\n    \/* ======================================================\n       04 \u2014 FOND CLAIR\n    ====================================================== *\/\n\n    .skoom-account-fixed.skoom-account-light {\n\n        --skoom-account-text:\n            #8703B3;\n\n        --skoom-account-border:\n            rgba(135,3,179,.30);\n\n        --skoom-account-bg-1:\n            rgba(255,255,255,.90);\n\n        --skoom-account-bg-2:\n            rgba(244,232,255,.78);\n\n        --skoom-account-shadow:\n            rgba(80,20,120,.16);\n\n    }\n\n\n    \/* ======================================================\n       05 \u2014 BOUTON\n    ====================================================== *\/\n\n    .skoom-login-btn {\n\n        position: relative !important;\n\n        display: inline-flex !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        height: 48px !important;\n\n        padding: 0 26px !important;\n\n        overflow: hidden !important;\n\n\n        background:\n\n            linear-gradient(\n                135deg,\n                var(--skoom-account-bg-1),\n                var(--skoom-account-bg-2)\n            ) !important;\n\n\n        backdrop-filter:\n            blur(16px)\n            saturate(135%) !important;\n\n        -webkit-backdrop-filter:\n            blur(16px)\n            saturate(135%) !important;\n\n\n        border:\n\n            1px solid\n            var(--skoom-account-border)\n            !important;\n\n\n        border-radius:\n            14px !important;\n\n\n        font-family:\n            \"Poppins\",\n            sans-serif !important;\n\n\n        font-size:\n            14px !important;\n\n\n        font-weight:\n            600 !important;\n\n\n        letter-spacing:\n            .2px !important;\n\n\n        color:\n            var(--skoom-account-text)\n            !important;\n\n\n        text-decoration:\n            none !important;\n\n\n        box-shadow:\n\n            0 10px 30px\n            var(--skoom-account-shadow),\n\n            inset 0 1px 0\n            rgba(255,255,255,.18)\n\n            !important;\n\n\n        transition:\n\n            transform .25s ease,\n\n            background .32s ease,\n\n            border-color .32s ease,\n\n            color .32s ease,\n\n            box-shadow .32s ease\n\n            !important;\n\n    }\n\n\n    \/* ======================================================\n       06 \u2014 LARGEUR SELON L'\u00c9TAT\n    ====================================================== *\/\n\n    .skoom-login-btn.skoom-is-activation {\n\n        min-width:\n            172px !important;\n\n    }\n\n\n    .skoom-login-btn.skoom-is-login {\n\n        min-width:\n            145px !important;\n\n    }\n\n\n    .skoom-login-btn.skoom-is-logout {\n\n        min-width:\n            145px !important;\n\n    }\n\n\n    \/* ======================================================\n       07 \u2014 REFLET GLASS\n    ====================================================== *\/\n\n    .skoom-login-btn::before {\n\n        content: \"\";\n\n        position: absolute;\n\n        top: 0;\n\n        left: -120%;\n\n        width: 70%;\n        height: 100%;\n\n        background:\n\n            linear-gradient(\n                110deg,\n                transparent,\n                rgba(255,255,255,.28),\n                transparent\n            );\n\n        transform:\n            skewX(-20deg);\n\n        transition:\n            left .55s ease;\n\n    }\n\n\n    \/* ======================================================\n       08 \u2014 TEXTE\n    ====================================================== *\/\n\n    .skoom-login-btn span {\n\n        position: relative;\n\n        z-index: 2;\n\n        color:\n            var(--skoom-account-text)\n            !important;\n\n        white-space:\n            nowrap;\n\n        transition:\n            color .32s ease !important;\n\n    }\n\n\n    \/* ======================================================\n       09 \u2014 HOVER FOND SOMBRE\n    ====================================================== *\/\n\n    .skoom-account-fixed.skoom-account-dark\n    .skoom-login-btn:hover {\n\n        color:\n            #FFFFFF !important;\n\n        transform:\n            scale(1.055);\n\n        background:\n\n            linear-gradient(\n                135deg,\n                rgba(180,0,240,.74),\n                rgba(112,0,255,.50)\n            ) !important;\n\n        border-color:\n            rgba(255,255,255,.34)\n            !important;\n\n        box-shadow:\n\n            0 14px 36px\n            rgba(135,3,179,.34),\n\n            0 0 20px\n            rgba(180,0,240,.14),\n\n            inset 0 1px 0\n            rgba(255,255,255,.22)\n\n            !important;\n\n    }\n\n\n    .skoom-account-fixed.skoom-account-dark\n    .skoom-login-btn:hover span {\n\n        color:\n            #FFFFFF !important;\n\n    }\n\n\n    \/* ======================================================\n       10 \u2014 HOVER FOND CLAIR\n    ====================================================== *\/\n\n    .skoom-account-fixed.skoom-account-light\n    .skoom-login-btn:hover {\n\n        color:\n            #FFFFFF !important;\n\n        transform:\n            scale(1.055);\n\n        background:\n\n            linear-gradient(\n                135deg,\n                rgba(180,0,240,.90),\n                rgba(112,0,255,.78)\n            ) !important;\n\n        border-color:\n            rgba(135,3,179,.40)\n            !important;\n\n        box-shadow:\n\n            0 14px 36px\n            rgba(135,3,179,.24),\n\n            0 0 22px\n            rgba(180,0,240,.12),\n\n            inset 0 1px 0\n            rgba(255,255,255,.22)\n\n            !important;\n\n    }\n\n\n    .skoom-account-fixed.skoom-account-light\n    .skoom-login-btn:hover span {\n\n        color:\n            #FFFFFF !important;\n\n    }\n\n\n    \/* ======================================================\n       11 \u2014 REFLET HOVER\n    ====================================================== *\/\n\n    .skoom-login-btn:hover::before {\n\n        left:\n            150%;\n\n    }\n\n\n    \/* ======================================================\n       12 \u2014 CLIC\n    ====================================================== *\/\n\n    .skoom-login-btn:active {\n\n        transform:\n            scale(.98) !important;\n\n    }\n\n\n    \/* ======================================================\n       13 \u2014 FOCUS\n    ====================================================== *\/\n\n    .skoom-login-btn:focus-visible {\n\n        outline:\n            2px solid #B400F0;\n\n        outline-offset:\n            4px;\n\n    }\n\n\n    \/* ======================================================\n       14 \u2014 TABLETTE\n    ====================================================== *\/\n\n    @media (max-width: 1024px) {\n\n        .skoom-account-fixed {\n\n            top:\n                38px !important;\n\n            left:\n                78px !important;\n\n            right:\n                auto !important;\n\n        }\n\n\n        .skoom-login-btn {\n\n            height:\n                46px !important;\n\n            padding:\n                0 20px !important;\n\n            font-size:\n                13px !important;\n\n        }\n\n\n        .skoom-login-btn.skoom-is-activation {\n\n            min-width:\n                158px !important;\n\n        }\n\n\n        .skoom-login-btn.skoom-is-login,\n        .skoom-login-btn.skoom-is-logout {\n\n            min-width:\n                130px !important;\n\n        }\n\n    }\n\n\n    \/* ======================================================\n       15 \u2014 MOBILE\n    ====================================================== *\/\n\n    @media (max-width: 767px) {\n\n        .skoom-account-fixed {\n\n            top:\n                28px !important;\n\n            left:\n                66px !important;\n\n            right:\n                auto !important;\n\n        }\n\n\n        .skoom-login-btn {\n\n            height:\n                42px !important;\n\n            padding:\n                0 15px !important;\n\n            border-radius:\n                12px !important;\n\n            font-size:\n                11px !important;\n\n        }\n\n\n        .skoom-login-btn.skoom-is-activation {\n\n            min-width:\n                145px !important;\n\n        }\n\n\n        .skoom-login-btn.skoom-is-login,\n        .skoom-login-btn.skoom-is-logout {\n\n            min-width:\n                112px !important;\n\n        }\n\n    }\n\n\n    \/* ======================================================\n       16 \u2014 ACCESSIBILIT\u00c9\n    ====================================================== *\/\n\n    @media (prefers-reduced-motion: reduce) {\n\n        .skoom-login-btn,\n        .skoom-login-btn::before,\n        .skoom-login-btn span {\n\n            transition:\n                none !important;\n\n        }\n\n    }\n\n    <\/style>\n\n\n    <script>\n\n    (function() {\n\n        function initSkoomAccountButton() {\n\n            document\n                .querySelectorAll(\n                    \".skoom-account-fixed\"\n                )\n                .forEach(\n                    function(wrapper) {\n\n\n                        if (\n                            wrapper.dataset\n                            .skoomAccountInitialized\n                            === \"true\"\n                        ) {\n\n                            return;\n\n                        }\n\n\n                        wrapper.dataset\n                            .skoomAccountInitialized =\n                            \"true\";\n\n\n                        const button =\n                            wrapper.querySelector(\n                                \".skoom-login-btn\"\n                            );\n\n\n                        const text =\n                            button\n                                ? button.querySelector(\n                                    \"span\"\n                                )\n                                : null;\n\n\n                        if (\n                            !button ||\n                            !text\n                        ) {\n\n                            return;\n\n                        }\n\n\n                        \/* ======================================\n                           URLs\n                        ====================================== *\/\n\n                        const registrationURL =\n                            wrapper.dataset\n                                .registrationUrl;\n\n\n                        const loginURL =\n                            wrapper.dataset\n                                .loginUrl;\n\n\n                        \/* ======================================\n                           \u00c9TAT WORDPRESS FOURNI PAR PHP\n                        ====================================== *\/\n\n                        const phpLoggedIn =\n                            wrapper.dataset\n                                .skoomLoggedIn\n                            === \"true\";\n\n\n                        \/*\n                         * S\u00e9curit\u00e9 suppl\u00e9mentaire :\n                         * WordPress ajoute normalement\n                         * la classe \"logged-in\" au BODY\n                         * lorsqu'un utilisateur est connect\u00e9.\n                         *\/\n\n                        const bodyLoggedIn =\n                            document.body\n                            &&\n                            document.body.classList.contains(\n                                \"logged-in\"\n                            );\n\n\n                        \/*\n                         * Si PHP OU le BODY WordPress\n                         * indique connect\u00e9 :\n                         * on verrouille D\u00e9connexion.\n                         *\/\n\n                        const isDefinitelyLoggedIn =\n                            phpLoggedIn ||\n                            bodyLoggedIn;\n\n\n                        \/* ======================================\n                           ACTIVATION E-MAIL\n                        ====================================== *\/\n\n                        const currentURL =\n                            new URL(\n                                window.location.href\n                            );\n\n\n                        if (\n                            currentURL\n                                .searchParams\n                                .get(\n                                    \"skoom_activated\"\n                                )\n                            === \"1\"\n                        ) {\n\n                            try {\n\n                                localStorage.setItem(\n                                    \"skoom_account_activated\",\n                                    \"yes\"\n                                );\n\n                            } catch (error) {\n\n                            }\n\n\n                            \/*\n                             * Nettoyage du param\u00e8tre\n                             *\/\n\n                            currentURL\n                                .searchParams\n                                .delete(\n                                    \"skoom_activated\"\n                                );\n\n\n                            window.history\n                                .replaceState(\n                                    {},\n                                    document.title,\n                                    currentURL.pathname +\n                                    currentURL.search +\n                                    currentURL.hash\n                                );\n\n                        }\n\n\n                        \/* ======================================\n                           SI CONNECT\u00c9 :\n                           M\u00c9MORISER QUE LE COMPTE EST ACTIV\u00c9\n                        ====================================== *\/\n\n                        if (\n                            isDefinitelyLoggedIn\n                        ) {\n\n                            try {\n\n                                localStorage.setItem(\n                                    \"skoom_account_activated\",\n                                    \"yes\"\n                                );\n\n                            } catch (error) {\n\n                            }\n\n                        }\n\n\n                        \/* ======================================\n                           \u00c9TAT 3 \u2014 D\u00c9CONNEXION\n                           PRIORIT\u00c9 ABSOLUE\n                        ====================================== *\/\n\n                        function lockLogoutState() {\n\n                            \/*\n                             * IMPORTANT :\n                             *\n                             * Quand WordPress dit connect\u00e9,\n                             * on ne touche JAMAIS \u00e0 href.\n                             *\n                             * Le lien s\u00e9curis\u00e9 wp_logout_url()\n                             * g\u00e9n\u00e9r\u00e9 par PHP doit rester intact.\n                             *\/\n\n                            text.textContent =\n                                \"D\u00e9connexion\";\n\n\n                            button.setAttribute(\n                                \"aria-label\",\n                                \"Se d\u00e9connecter de SKOOM\"\n                            );\n\n\n                            button.classList.remove(\n                                \"skoom-is-activation\",\n                                \"skoom-is-login\"\n                            );\n\n\n                            button.classList.add(\n                                \"skoom-is-logout\"\n                            );\n\n\n                            wrapper.dataset.skoomState =\n                                \"logout-locked\";\n\n                        }\n\n\n                        \/* ======================================\n                           \u00c9TAT 2 \u2014 CONNEXION\n                        ====================================== *\/\n\n                        function setLoginState() {\n\n                            text.textContent =\n                                \"Connexion\";\n\n\n                            button.href =\n                                loginURL;\n\n\n                            button.setAttribute(\n                                \"aria-label\",\n                                \"Se connecter \u00e0 SKOOM\"\n                            );\n\n\n                            button.classList.remove(\n                                \"skoom-is-activation\",\n                                \"skoom-is-logout\"\n                            );\n\n\n                            button.classList.add(\n                                \"skoom-is-login\"\n                            );\n\n\n                            wrapper.dataset.skoomState =\n                                \"login\";\n\n                        }\n\n\n                        \/* ======================================\n                           \u00c9TAT 1 \u2014 ACTIVATION\n                        ====================================== *\/\n\n                        function setActivationState() {\n\n                            text.textContent =\n                                \"Activer mon compte\";\n\n\n                            button.href =\n                                registrationURL;\n\n\n                            button.setAttribute(\n                                \"aria-label\",\n                                \"Activer mon compte SKOOM\"\n                            );\n\n\n                            button.classList.remove(\n                                \"skoom-is-login\",\n                                \"skoom-is-logout\"\n                            );\n\n\n                            button.classList.add(\n                                \"skoom-is-activation\"\n                            );\n\n\n                            wrapper.dataset.skoomState =\n                                \"activation\";\n\n                        }\n\n\n                        \/* ======================================\n                           D\u00c9TERMINATION DE L'\u00c9TAT\n                        ====================================== *\/\n\n                        function setAccountState() {\n\n                            \/*\n                             * PRIORIT\u00c9 N\u00b01 :\n                             * WordPress connect\u00e9.\n                             *\n                             * Aucun localStorage ne peut\n                             * \u00e9craser cet \u00e9tat.\n                             *\/\n\n                            if (\n                                isDefinitelyLoggedIn\n                            ) {\n\n                                lockLogoutState();\n\n                                return;\n\n                            }\n\n\n                            \/*\n                             * Sinon seulement :\n                             * on regarde l'activation locale.\n                             *\/\n\n                            let accountActivated =\n                                false;\n\n\n                            try {\n\n                                accountActivated =\n                                    localStorage.getItem(\n                                        \"skoom_account_activated\"\n                                    )\n                                    === \"yes\";\n\n                            } catch (error) {\n\n                                accountActivated =\n                                    false;\n\n                            }\n\n\n                            if (\n                                accountActivated\n                            ) {\n\n                                setLoginState();\n\n                            } else {\n\n                                setActivationState();\n\n                            }\n\n                        }\n\n\n                        \/*\n                         * Appliquer imm\u00e9diatement.\n                         *\/\n\n                        setAccountState();\n\n\n                        \/* ======================================\n                           LUMINANCE\n                        ====================================== *\/\n\n                        function luminance(\n                            r,\n                            g,\n                            b\n                        ) {\n\n                            return (\n\n                                0.2126 * r +\n\n                                0.7152 * g +\n\n                                0.0722 * b\n\n                            );\n\n                        }\n\n\n                        \/* ======================================\n                           PARSE COULEUR\n                        ====================================== *\/\n\n                        function parseColor(\n                            color\n                        ) {\n\n                            if (\n                                !color ||\n                                color ===\n                                \"transparent\"\n                            ) {\n\n                                return null;\n\n                            }\n\n\n                            const numbers =\n                                color.match(\n                                    \/[\\d.]+\/g\n                                );\n\n\n                            if (\n                                !numbers ||\n                                numbers.length < 3\n                            ) {\n\n                                return null;\n\n                            }\n\n\n                            const alpha =\n                                numbers.length >= 4\n                                    ? parseFloat(\n                                        numbers[3]\n                                    )\n                                    : 1;\n\n\n                            if (\n                                alpha < .15\n                            ) {\n\n                                return null;\n\n                            }\n\n\n                            return {\n\n                                r:\n                                    Number(\n                                        numbers[0]\n                                    ),\n\n                                g:\n                                    Number(\n                                        numbers[1]\n                                    ),\n\n                                b:\n                                    Number(\n                                        numbers[2]\n                                    )\n\n                            };\n\n                        }\n\n\n                        \/* ======================================\n                           IMAGE HTML\n                        ====================================== *\/\n\n                        function sampleImage(\n                            image,\n                            screenX,\n                            screenY\n                        ) {\n\n                            try {\n\n                                if (\n                                    !image.complete ||\n                                    !image.naturalWidth ||\n                                    !image.naturalHeight\n                                ) {\n\n                                    return null;\n\n                                }\n\n\n                                const rect =\n                                    image\n                                    .getBoundingClientRect();\n\n\n                                if (\n                                    rect.width <= 0 ||\n                                    rect.height <= 0\n                                ) {\n\n                                    return null;\n\n                                }\n\n\n                                const ratioX =\n                                    (\n                                        screenX -\n                                        rect.left\n                                    )\n                                    \/\n                                    rect.width;\n\n\n                                const ratioY =\n                                    (\n                                        screenY -\n                                        rect.top\n                                    )\n                                    \/\n                                    rect.height;\n\n\n                                const sourceX =\n                                    Math.max(\n                                        0,\n                                        Math.min(\n                                            image.naturalWidth - 1,\n                                            Math.round(\n                                                ratioX *\n                                                image.naturalWidth\n                                            )\n                                        )\n                                    );\n\n\n                                const sourceY =\n                                    Math.max(\n                                        0,\n                                        Math.min(\n                                            image.naturalHeight - 1,\n                                            Math.round(\n                                                ratioY *\n                                                image.naturalHeight\n                                            )\n                                        )\n                                    );\n\n\n                                const canvas =\n                                    document.createElement(\n                                        \"canvas\"\n                                    );\n\n\n                                canvas.width = 1;\n                                canvas.height = 1;\n\n\n                                const context =\n                                    canvas.getContext(\n                                        \"2d\",\n                                        {\n                                            willReadFrequently:\n                                                true\n                                        }\n                                    );\n\n\n                                context.drawImage(\n                                    image,\n                                    sourceX,\n                                    sourceY,\n                                    1,\n                                    1,\n                                    0,\n                                    0,\n                                    1,\n                                    1\n                                );\n\n\n                                const pixel =\n                                    context\n                                    .getImageData(\n                                        0,\n                                        0,\n                                        1,\n                                        1\n                                    )\n                                    .data;\n\n\n                                return {\n\n                                    r: pixel[0],\n                                    g: pixel[1],\n                                    b: pixel[2]\n\n                                };\n\n\n                            } catch (error) {\n\n                                return null;\n\n                            }\n\n                        }\n\n\n                        \/* ======================================\n                           ANALYSE DU FOND\n                        ====================================== *\/\n\n                        function analyzeElement(\n                            element,\n                            x,\n                            y\n                        ) {\n\n                            let current =\n                                element;\n\n\n                            while (\n                                current &&\n                                current !==\n                                document.documentElement\n                            ) {\n\n\n                                if (\n                                    current.classList\n                                ) {\n\n\n                                    if (\n                                        current\n                                        .classList\n                                        .contains(\n                                            \"skoom-force-light-menu\"\n                                        )\n                                    ) {\n\n                                        return \"light\";\n\n                                    }\n\n\n                                    if (\n                                        current\n                                        .classList\n                                        .contains(\n                                            \"skoom-force-dark-menu\"\n                                        )\n                                    ) {\n\n                                        return \"dark\";\n\n                                    }\n\n                                }\n\n\n                                \/* IMAGE *\/\n\n                                if (\n                                    current.tagName\n                                    === \"IMG\"\n                                ) {\n\n                                    const pixel =\n                                        sampleImage(\n                                            current,\n                                            x,\n                                            y\n                                        );\n\n\n                                    if (pixel) {\n\n                                        return (\n                                            luminance(\n                                                pixel.r,\n                                                pixel.g,\n                                                pixel.b\n                                            )\n                                            > 150\n                                        )\n                                            ? \"light\"\n                                            : \"dark\";\n\n                                    }\n\n                                }\n\n\n                                \/* COULEUR CSS *\/\n\n                                const style =\n                                    window\n                                    .getComputedStyle(\n                                        current\n                                    );\n\n\n                                const color =\n                                    parseColor(\n                                        style\n                                        .backgroundColor\n                                    );\n\n\n                                if (color) {\n\n                                    const value =\n                                        luminance(\n                                            color.r,\n                                            color.g,\n                                            color.b\n                                        );\n\n\n                                    return (\n                                        value > 150\n                                    )\n                                        ? \"light\"\n                                        : \"dark\";\n\n                                }\n\n\n                                current =\n                                    current.parentElement;\n\n                            }\n\n\n                            return \"light\";\n\n                        }\n\n\n                        \/* ======================================\n                           APPARENCE CLAIR \/ SOMBRE\n                        ====================================== *\/\n\n                        function updateButtonAppearance() {\n\n                            \/*\n                             * Important :\n                             * cette fonction modifie UNIQUEMENT\n                             * l'apparence clair\/sombre.\n                             *\n                             * Elle ne touche JAMAIS \u00e0 :\n                             * - Connexion\n                             * - D\u00e9connexion\n                             * - Activation\n                             *\/\n\n                            const rect =\n                                button\n                                .getBoundingClientRect();\n\n\n                            const points = [\n\n                                {\n                                    x:\n                                        rect.left + 15,\n\n                                    y:\n                                        rect.top +\n                                        rect.height \/ 2\n                                },\n\n                                {\n                                    x:\n                                        rect.left +\n                                        rect.width \/ 2,\n\n                                    y:\n                                        rect.top +\n                                        rect.height \/ 2\n                                },\n\n                                {\n                                    x:\n                                        rect.right - 15,\n\n                                    y:\n                                        rect.top +\n                                        rect.height \/ 2\n                                }\n\n                            ];\n\n\n                            let lightVotes = 0;\n                            let darkVotes = 0;\n\n\n                            points.forEach(\n                                function(point) {\n\n\n                                    const stack =\n                                        document\n                                        .elementsFromPoint(\n                                            point.x,\n                                            point.y\n                                        );\n\n\n                                    const target =\n                                        stack.find(\n                                            function(element) {\n\n                                                return (\n                                                    !wrapper\n                                                    .contains(\n                                                        element\n                                                    )\n                                                );\n\n                                            }\n                                        );\n\n\n                                    if (!target) {\n\n                                        return;\n\n                                    }\n\n\n                                    const result =\n                                        analyzeElement(\n                                            target,\n                                            point.x,\n                                            point.y\n                                        );\n\n\n                                    if (\n                                        result === \"light\"\n                                    ) {\n\n                                        lightVotes++;\n\n                                    } else {\n\n                                        darkVotes++;\n\n                                    }\n\n                                }\n                            );\n\n\n                            if (\n                                lightVotes >\n                                darkVotes\n                            ) {\n\n                                wrapper\n                                    .classList\n                                    .add(\n                                        \"skoom-account-light\"\n                                    );\n\n\n                                wrapper\n                                    .classList\n                                    .remove(\n                                        \"skoom-account-dark\"\n                                    );\n\n                            } else {\n\n                                wrapper\n                                    .classList\n                                    .add(\n                                        \"skoom-account-dark\"\n                                    );\n\n\n                                wrapper\n                                    .classList\n                                    .remove(\n                                        \"skoom-account-light\"\n                                    );\n\n                            }\n\n                        }\n\n\n                        \/* ======================================\n                           SCROLL OPTIMIS\u00c9\n                        ====================================== *\/\n\n                        let scheduled =\n                            false;\n\n\n                        function scheduleUpdate() {\n\n                            if (\n                                scheduled\n                            ) {\n\n                                return;\n\n                            }\n\n\n                            scheduled =\n                                true;\n\n\n                            window\n                                .requestAnimationFrame(\n                                    function() {\n\n                                        \/*\n                                         * On met uniquement\n                                         * \u00e0 jour l'apparence.\n                                         *\n                                         * PAS l'\u00e9tat du compte.\n                                         *\/\n\n                                        updateButtonAppearance();\n\n\n                                        scheduled =\n                                            false;\n\n                                    }\n                                );\n\n                        }\n\n\n                        \/* ======================================\n                           \u00c9V\u00c9NEMENTS\n                        ====================================== *\/\n\n                        window.addEventListener(\n                            \"scroll\",\n                            scheduleUpdate,\n                            {\n                                passive: true\n                            }\n                        );\n\n\n                        window.addEventListener(\n                            \"resize\",\n                            scheduleUpdate,\n                            {\n                                passive: true\n                            }\n                        );\n\n\n                        window.addEventListener(\n                            \"load\",\n                            scheduleUpdate\n                        );\n\n\n                        scheduleUpdate();\n\n\n                        setTimeout(\n                            scheduleUpdate,\n                            400\n                        );\n\n\n                        setTimeout(\n                            scheduleUpdate,\n                            1200\n                        );\n\n                    }\n                );\n\n        }\n\n\n        \/* ==================================================\n           LANCEMENT\n        ================================================== *\/\n\n        if (\n            document.readyState ===\n            \"loading\"\n        ) {\n\n            document.addEventListener(\n                \"DOMContentLoaded\",\n                initSkoomAccountButton\n            );\n\n        } else {\n\n            initSkoomAccountButton();\n\n        }\n\n\n    })();\n\n    <\/script>\n\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-e43aef8 e-con e-atomic-element e-flexbox-base e-3ef217d \" data-id=\"e43aef8\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"e43aef8\">\n    \t\t<div class=\"elementor-element elementor-element-3dc8611 elementor-widget elementor-widget-html\" data-id=\"3dc8611\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* =========================================================\r\n   SKOOM \u2014 PAGE D'ACCUEIL\r\n   VERSION COMPLETE\r\n   - hover zoom sur les cartes du constat\r\n   - hover zoom sur les ic\u00f4nes\r\n   - logo officiel SKOOM au centre\r\n   - KPI anim\u00e9s \u00e0 chaque retour au scroll\r\n   - courbe flat\r\n   - dernier point identique aux autres\r\n   - animation relanc\u00e9e \u00e0 chaque passage\r\n   - textes \"Nos solutions\" en blanc\r\n========================================================= *\/\r\n\r\n* {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.skoom-home {\r\n  --navy: #07162f;\r\n  --navy-2: #0c1f42;\r\n  --blue: #315efb;\r\n  --blue-light: #eef3ff;\r\n  --purple: #8703b3;\r\n  --text: #111827;\r\n  --muted: #667085;\r\n  --line: #e7eaf0;\r\n  --white: #ffffff;\r\n  --soft: #f7f9fc;\r\n\r\n  width: 100%;\r\n  overflow: hidden;\r\n  font-family: \"Manrope\", Arial, sans-serif;\r\n  color: var(--text);\r\n  background: #fff;\r\n}\r\n\r\n.skoom-home h1,\r\n.skoom-home h2,\r\n.skoom-home h3 {\r\n  font-family: \"Poppins\", Arial, sans-serif;\r\n  margin: 0;\r\n}\r\n\r\n.skoom-home p {\r\n  margin: 0;\r\n}\r\n\r\n.skoom-home a {\r\n  text-decoration: none;\r\n}\r\n\r\n.skoom-section {\r\n  width: 100%;\r\n  padding: 90px 7vw;\r\n}\r\n\r\n.skoom-container {\r\n  max-width: 1360px;\r\n  margin: 0 auto;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TYPOGRAPHIE\r\n========================================================= *\/\r\n\r\n.skoom-eyebrow {\r\n  display: inline-block;\r\n  margin-bottom: 14px;\r\n  font-size: 13px;\r\n  line-height: 1;\r\n  font-weight: 800;\r\n  letter-spacing: .08em;\r\n  text-transform: uppercase;\r\n  color: var(--blue);\r\n}\r\n\r\n.skoom-title-medium {\r\n  font-size: clamp(28px,3vw,46px);\r\n  line-height: 1.1;\r\n  font-weight: 700;\r\n  letter-spacing: -.035em;\r\n}\r\n\r\n.skoom-copy {\r\n  font-size: 17px;\r\n  line-height: 1.7;\r\n  color: var(--muted);\r\n}\r\n\r\n.skoom-highlight {\r\n  margin-top: 20px;\r\n  font-size: 18px;\r\n  font-weight: 800;\r\n  color: var(--blue);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   01 \u2014 LE CONSTAT\r\n========================================================= *\/\r\n\r\n.skoom-problem {\r\n  background: #ffffff;\r\n}\r\n\r\n.skoom-grid-2 {\r\n  display: grid;\r\n  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);\r\n  gap: 80px;\r\n  align-items: center;\r\n}\r\n\r\n.skoom-problem-copy {\r\n  max-width: 540px;\r\n}\r\n\r\n.skoom-problem-copy .skoom-copy {\r\n  margin-top: 24px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RESEAU DU CONSTAT\r\n========================================================= *\/\r\n\r\n.skoom-network {\r\n  position: relative;\r\n  min-height: 520px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.skoom-network::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  width: 76%;\r\n  height: 1px;\r\n  top: 50%;\r\n  left: 12%;\r\n  background: #d7e0ff;\r\n  z-index: 1;\r\n}\r\n\r\n.skoom-network::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 72%;\r\n  left: 50%;\r\n  top: 14%;\r\n  background: #d7e0ff;\r\n  z-index: 1;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HUB CENTRAL \u2014 LOGO OFFICIEL\r\n========================================================= *\/\r\n\r\n.skoom-hub {\r\n  position: relative;\r\n  z-index: 5;\r\n\r\n  width: 150px;\r\n  height: 150px;\r\n\r\n  border-radius: 30px;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  background: #ffffff;\r\n  border: 1px solid #e2e7f0;\r\n\r\n  box-shadow:\r\n    0 24px 60px rgba(23,43,77,.12);\r\n\r\n  transition:\r\n    transform .35s ease,\r\n    box-shadow .35s ease;\r\n}\r\n\r\n.skoom-hub:hover {\r\n  transform: scale(1.06);\r\n\r\n  box-shadow:\r\n    0 32px 72px rgba(49,94,251,.18);\r\n}\r\n\r\n.skoom-hub-logo {\r\n  display: block;\r\n  width: 95px;\r\n  max-width: 75%;\r\n  height: auto;\r\n  object-fit: contain;\r\n\r\n  transition:\r\n    transform .35s ease;\r\n}\r\n\r\n.skoom-hub:hover .skoom-hub-logo {\r\n  transform: scale(1.08);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARTES DU CONSTAT\r\n========================================================= *\/\r\n\r\n.skoom-node {\r\n  position: absolute;\r\n  z-index: 4;\r\n\r\n  min-width: 175px;\r\n\r\n  padding: 28px 24px;\r\n\r\n  border-radius: 24px;\r\n\r\n  background: rgba(255,255,255,.98);\r\n\r\n  border: 1px solid #e1e6ef;\r\n\r\n  box-shadow:\r\n    0 18px 45px rgba(23,43,77,.07);\r\n\r\n  font-size: 17px;\r\n  font-weight: 700;\r\n  text-align: center;\r\n\r\n  cursor: default;\r\n\r\n  transition:\r\n    transform .32s cubic-bezier(.2,.7,.2,1),\r\n    box-shadow .32s ease,\r\n    border-color .32s ease,\r\n    background .32s ease;\r\n}\r\n\r\n.skoom-node:hover {\r\n  transform: scale(1.09);\r\n\r\n  border-color:\r\n    rgba(49,94,251,.30);\r\n\r\n  background: #ffffff;\r\n\r\n  box-shadow:\r\n    0 28px 60px rgba(49,94,251,.14);\r\n\r\n  z-index: 10;\r\n}\r\n\r\n.skoom-node-icon {\r\n  display: block;\r\n\r\n  margin-bottom: 16px;\r\n\r\n  color: var(--blue);\r\n\r\n  font-size: 27px;\r\n  line-height: 1;\r\n\r\n  transition:\r\n    transform .32s cubic-bezier(.2,.7,.2,1),\r\n    color .32s ease;\r\n}\r\n\r\n.skoom-node:hover .skoom-node-icon {\r\n  transform: scale(1.30);\r\n  color: #234bea;\r\n}\r\n\r\n\r\n\/* positions *\/\r\n\r\n.skoom-node.n1 {\r\n  top: 0;\r\n  left: 10%;\r\n}\r\n\r\n.skoom-node.n2 {\r\n  top: 0;\r\n  right: 8%;\r\n}\r\n\r\n.skoom-node.n3 {\r\n  top: 50%;\r\n  left: 0;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.skoom-node.n3:hover {\r\n  transform:\r\n    translateY(-50%)\r\n    scale(1.09);\r\n}\r\n\r\n.skoom-node.n4 {\r\n  top: 50%;\r\n  right: 0;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.skoom-node.n4:hover {\r\n  transform:\r\n    translateY(-50%)\r\n    scale(1.09);\r\n}\r\n\r\n.skoom-node.n5 {\r\n  bottom: 0;\r\n  left: 12%;\r\n}\r\n\r\n.skoom-node.n6 {\r\n  bottom: 0;\r\n  right: 9%;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   02 \u2014 PRESENTATION SKOOM\r\n========================================================= *\/\r\n\r\n.skoom-product {\r\n  background:\r\n    radial-gradient(\r\n      circle at 70% 30%,\r\n      rgba(49,94,251,.08),\r\n      transparent 35%\r\n    ),\r\n    linear-gradient(\r\n      135deg,\r\n      #ffffff 0%,\r\n      #f7f8ff 100%\r\n    );\r\n}\r\n\r\n.skoom-product-grid {\r\n  display: grid;\r\n  grid-template-columns: .8fr 1.2fr;\r\n  gap: 70px;\r\n  align-items: center;\r\n}\r\n\r\n.skoom-product-copy .skoom-copy {\r\n  margin-top: 22px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DASHBOARD\r\n========================================================= *\/\r\n\r\n.skoom-dashboard {\r\n  border: 1px solid #e4e7ec;\r\n  background: #fff;\r\n\r\n  border-radius: 24px;\r\n\r\n  overflow: hidden;\r\n\r\n  box-shadow:\r\n    0 30px 70px rgba(24,39,75,.13);\r\n}\r\n\r\n.skoom-dashboard-top {\r\n  padding: 18px 22px;\r\n\r\n  background: #fff;\r\n\r\n  border-bottom:\r\n    1px solid #edf0f5;\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n  justify-content: space-between;\r\n}\r\n\r\n.skoom-dashboard-top strong {\r\n  font-family: \"Poppins\",sans-serif;\r\n  font-size: 18px;\r\n}\r\n\r\n.skoom-dashboard-avatar {\r\n  width: 34px;\r\n  height: 34px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      #315efb,\r\n      #8703b3\r\n    );\r\n}\r\n\r\n.skoom-dashboard-body {\r\n  display: grid;\r\n  grid-template-columns: 72px 1fr;\r\n  min-height: 440px;\r\n}\r\n\r\n.skoom-sidebar {\r\n  background: var(--navy);\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  align-items: center;\r\n\r\n  padding: 22px 0;\r\n\r\n  gap: 22px;\r\n}\r\n\r\n.skoom-side-dot {\r\n  width: 30px;\r\n  height: 30px;\r\n\r\n  border-radius: 9px;\r\n\r\n  border:\r\n    1px solid rgba(255,255,255,.22);\r\n\r\n  position: relative;\r\n}\r\n\r\n.skoom-side-dot::after {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  width: 6px;\r\n  height: 6px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background:\r\n    rgba(255,255,255,.8);\r\n\r\n  top: 50%;\r\n  left: 50%;\r\n\r\n  transform:\r\n    translate(-50%,-50%);\r\n}\r\n\r\n.skoom-dashboard-content {\r\n  padding: 26px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   KPI\r\n========================================================= *\/\r\n\r\n.skoom-kpis {\r\n  display: grid;\r\n  grid-template-columns: repeat(4,1fr);\r\n  gap: 14px;\r\n  margin-bottom: 22px;\r\n}\r\n\r\n.skoom-kpi {\r\n  padding: 18px;\r\n\r\n  border-radius: 16px;\r\n\r\n  background: #f8faff;\r\n\r\n  border:\r\n    1px solid #e6ebf5;\r\n\r\n  transition:\r\n    transform .3s ease,\r\n    box-shadow .3s ease;\r\n}\r\n\r\n.skoom-kpi:hover {\r\n  transform: translateY(-4px);\r\n\r\n  box-shadow:\r\n    0 12px 28px rgba(49,94,251,.10);\r\n}\r\n\r\n.skoom-kpi small {\r\n  color: #8090a7;\r\n  font-weight: 700;\r\n  font-size: 11px;\r\n  line-height: 1.3;\r\n}\r\n\r\n.skoom-kpi strong {\r\n  display: block;\r\n\r\n  margin-top: 8px;\r\n\r\n  font-family: \"Poppins\",sans-serif;\r\n  font-size: 30px;\r\n}\r\n\r\n.skoom-counter {\r\n  display: inline-block;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   GRAPHIQUES\r\n========================================================= *\/\r\n\r\n.skoom-chart-area {\r\n  display: grid;\r\n  grid-template-columns: 1.3fr .7fr;\r\n  gap: 18px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   COURBE FLAT\r\n========================================================= *\/\r\n\r\n.skoom-chart {\r\n  min-height: 220px;\r\n\r\n  border-radius: 18px;\r\n\r\n  background: #fff;\r\n\r\n  border:\r\n    1px solid #e9edf3;\r\n\r\n  position: relative;\r\n\r\n  overflow: hidden;\r\n\r\n  padding: 20px 16px 8px;\r\n}\r\n\r\n.skoom-chart-title {\r\n  position: absolute;\r\n\r\n  top: 17px;\r\n  left: 20px;\r\n\r\n  z-index: 4;\r\n\r\n  font-family: \"Poppins\",sans-serif;\r\n\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n\r\n  color: #344054;\r\n}\r\n\r\n.skoom-budget-chart {\r\n  width: 100%;\r\n  height: 180px;\r\n\r\n  margin-top: 18px;\r\n\r\n  overflow: visible;\r\n}\r\n\r\n\r\n\/* grille *\/\r\n\r\n.skoom-grid-line {\r\n  stroke: #eef1f6;\r\n  stroke-width: 1;\r\n}\r\n\r\n\r\n\/* ligne secondaire *\/\r\n\r\n.skoom-chart-line-secondary {\r\n  fill: none;\r\n\r\n  stroke: #d9dee8;\r\n\r\n  stroke-width: 2;\r\n\r\n  stroke-linecap: round;\r\n  stroke-linejoin: round;\r\n\r\n  opacity: 0;\r\n}\r\n\r\n\r\n\/* ligne bleue *\/\r\n\r\n.skoom-chart-line-main {\r\n  fill: none;\r\n\r\n  stroke: #315efb;\r\n\r\n  stroke-width: 3.5;\r\n\r\n  stroke-linecap: round;\r\n  stroke-linejoin: round;\r\n\r\n  stroke-dasharray: 1000;\r\n  stroke-dashoffset: 1000;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TOUS LES POINTS ONT EXACTEMENT LE MEME DESIGN\r\n========================================================= *\/\r\n\r\n.skoom-chart-point {\r\n  fill: #ffffff;\r\n\r\n  stroke: #315efb;\r\n\r\n  stroke-width: 3;\r\n\r\n  opacity: 0;\r\n\r\n  transform-box: fill-box;\r\n  transform-origin: center;\r\n\r\n  transform: scale(0);\r\n}\r\n\r\n\r\n\/*\r\nIMPORTANT :\r\naucun style particulier sur le dernier point.\r\n\r\nLe 7e point est donc strictement identique :\r\n- diam\u00e8tre identique\r\n- int\u00e9rieur blanc\r\n- contour bleu\r\n- m\u00eame animation\r\n*\/\r\n\r\n\r\n.skoom-chart-months {\r\n  display: flex;\r\n\r\n  justify-content:\r\n    space-between;\r\n\r\n  padding:\r\n    0 16px 0 20px;\r\n\r\n  margin-top: -9px;\r\n\r\n  font-size: 9px;\r\n\r\n  font-weight: 700;\r\n\r\n  color: #98a2b3;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ANIMATION COURBE\r\n========================================================= *\/\r\n\r\n.skoom-chart.skoom-visible\r\n.skoom-chart-line-main {\r\n  animation:\r\n    skoomDrawLine\r\n    2.1s\r\n    cubic-bezier(.22,.61,.36,1)\r\n    forwards;\r\n}\r\n\r\n.skoom-chart.skoom-visible\r\n.skoom-chart-line-secondary {\r\n  animation:\r\n    skoomFadeLine\r\n    .7s\r\n    ease\r\n    .8s\r\n    forwards;\r\n}\r\n\r\n.skoom-chart.skoom-visible\r\n.skoom-chart-point {\r\n  animation:\r\n    skoomPointPop\r\n    .28s\r\n    ease\r\n    forwards;\r\n}\r\n\r\n\r\n\/* apparition progressive des points *\/\r\n\r\n.skoom-chart.skoom-visible .skoom-point-1 {\r\n  animation-delay: .15s;\r\n}\r\n\r\n.skoom-chart.skoom-visible .skoom-point-2 {\r\n  animation-delay: .40s;\r\n}\r\n\r\n.skoom-chart.skoom-visible .skoom-point-3 {\r\n  animation-delay: .65s;\r\n}\r\n\r\n.skoom-chart.skoom-visible .skoom-point-4 {\r\n  animation-delay: .90s;\r\n}\r\n\r\n.skoom-chart.skoom-visible .skoom-point-5 {\r\n  animation-delay: 1.15s;\r\n}\r\n\r\n.skoom-chart.skoom-visible .skoom-point-6 {\r\n  animation-delay: 1.40s;\r\n}\r\n\r\n.skoom-chart.skoom-visible .skoom-point-7 {\r\n  animation-delay: 1.85s;\r\n}\r\n\r\n\r\n@keyframes skoomDrawLine {\r\n\r\n  from {\r\n    stroke-dashoffset: 1000;\r\n  }\r\n\r\n  to {\r\n    stroke-dashoffset: 0;\r\n  }\r\n\r\n}\r\n\r\n\r\n@keyframes skoomFadeLine {\r\n\r\n  from {\r\n    opacity: 0;\r\n  }\r\n\r\n  to {\r\n    opacity: 1;\r\n  }\r\n\r\n}\r\n\r\n\r\n@keyframes skoomPointPop {\r\n\r\n  0% {\r\n    opacity: 0;\r\n    transform: scale(.4);\r\n  }\r\n\r\n  100% {\r\n    opacity: 1;\r\n    transform: scale(1);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DONUT\r\n========================================================= *\/\r\n\r\n.skoom-donut {\r\n  min-height: 220px;\r\n\r\n  border:\r\n    1px solid #e9edf3;\r\n\r\n  border-radius: 18px;\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.skoom-donut-title {\r\n  font-family: \"Poppins\",sans-serif;\r\n\r\n  font-size: 11px;\r\n  font-weight: 700;\r\n\r\n  color: #344054;\r\n\r\n  margin-bottom: 18px;\r\n}\r\n\r\n.skoom-donut-ring {\r\n  width: 125px;\r\n  height: 125px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background:\r\n    conic-gradient(\r\n      #315efb 0 38%,\r\n      #7192ff 38% 62%,\r\n      #d1dcff 62% 82%,\r\n      #eef2ff 82% 100%\r\n    );\r\n\r\n  position: relative;\r\n\r\n  transform: rotate(-70deg);\r\n}\r\n\r\n.skoom-donut-ring::after {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  inset: 27px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: #fff;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   03 \u2014 NOS SOLUTIONS\r\n========================================================= *\/\r\n\r\n.skoom-solutions {\r\n  background:\r\n    radial-gradient(\r\n      circle at 50% 0%,\r\n      rgba(49,94,251,.18),\r\n      transparent 40%\r\n    ),\r\n    var(--navy);\r\n\r\n  color: #ffffff !important;\r\n}\r\n\r\n.skoom-solutions .skoom-eyebrow {\r\n  color: #ffffff !important;\r\n}\r\n\r\n.skoom-solutions .skoom-title-medium {\r\n  color: #ffffff !important;\r\n}\r\n\r\n.skoom-solutions-head {\r\n  margin-bottom: 42px;\r\n}\r\n\r\n.skoom-solution-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(3,1fr);\r\n  gap: 22px;\r\n}\r\n\r\n.skoom-solution-card {\r\n  position: relative;\r\n\r\n  min-height: 280px;\r\n\r\n  padding: 30px;\r\n\r\n  border-radius: 22px;\r\n\r\n  background:\r\n    rgba(255,255,255,.08);\r\n\r\n  border:\r\n    1px solid rgba(255,255,255,.09);\r\n\r\n  backdrop-filter:\r\n    blur(15px);\r\n\r\n  -webkit-backdrop-filter:\r\n    blur(15px);\r\n\r\n  color: #ffffff !important;\r\n\r\n  transition:\r\n    transform .28s ease,\r\n    background .28s ease;\r\n}\r\n\r\n.skoom-solution-card:hover {\r\n  transform:\r\n    translateY(-7px)\r\n    scale(1.015);\r\n\r\n  background:\r\n    rgba(255,255,255,.11);\r\n}\r\n\r\n.skoom-card-icon {\r\n  width: 58px;\r\n  height: 58px;\r\n\r\n  border-radius: 16px;\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  background: #ffffff;\r\n\r\n  color: var(--blue);\r\n\r\n  font-size: 28px;\r\n\r\n  margin-bottom: 26px;\r\n}\r\n\r\n.skoom-solution-card h3 {\r\n  font-size: 24px;\r\n\r\n  line-height: 1.2;\r\n\r\n  color: #ffffff !important;\r\n}\r\n\r\n.skoom-solution-card p {\r\n  margin-top: 14px;\r\n\r\n  color: #ffffff !important;\r\n\r\n  line-height: 1.7;\r\n}\r\n\r\n.skoom-card-link {\r\n  display: inline-block;\r\n\r\n  margin-top: 20px;\r\n\r\n  color:\r\n    #83a0ff !important;\r\n\r\n  font-weight: 700;\r\n}\r\n\r\n.skoom-card-link:hover {\r\n  color:\r\n    #ffffff !important;\r\n}\r\n\r\n.skoom-center-btn {\r\n  text-align: center;\r\n  margin-top: 34px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BOUTON\r\n========================================================= *\/\r\n\r\n.skoom-btn {\r\n  display: inline-flex;\r\n\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  min-height: 52px;\r\n\r\n  padding:\r\n    0 27px;\r\n\r\n  border-radius: 12px;\r\n\r\n  background:\r\n    var(--blue);\r\n\r\n  color:\r\n    #fff !important;\r\n\r\n  font-weight: 800;\r\n\r\n  font-size: 15px;\r\n\r\n  box-shadow:\r\n    0 12px 30px\r\n    rgba(49,94,251,.28);\r\n\r\n  transition:\r\n    transform .25s ease,\r\n    box-shadow .25s ease;\r\n}\r\n\r\n.skoom-btn:hover {\r\n  transform:\r\n    translateY(-3px);\r\n\r\n  box-shadow:\r\n    0 18px 38px\r\n    rgba(49,94,251,.34);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   04 \u2014 CENTRE DE PILOTAGE\r\n========================================================= *\/\r\n\r\n.skoom-pilotage {\r\n  background: #ffffff;\r\n}\r\n\r\n.skoom-pilotage-grid {\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    .82fr 1.18fr;\r\n\r\n  gap: 75px;\r\n\r\n  align-items: center;\r\n}\r\n\r\n.skoom-pilot-icons {\r\n  display: flex;\r\n\r\n  flex-wrap: wrap;\r\n\r\n  gap: 28px;\r\n\r\n  margin:\r\n    34px 0 26px;\r\n}\r\n\r\n.skoom-pilot-item {\r\n  text-align: center;\r\n  min-width: 78px;\r\n}\r\n\r\n.skoom-pilot-item span {\r\n  display: block;\r\n\r\n  font-size: 29px;\r\n\r\n  color:\r\n    var(--blue);\r\n\r\n  margin-bottom: 8px;\r\n}\r\n\r\n.skoom-pilot-item small {\r\n  font-size: 12px;\r\n\r\n  font-weight: 800;\r\n\r\n  color: #445168;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLEAU\r\n========================================================= *\/\r\n\r\n.skoom-process-table {\r\n  padding: 30px;\r\n\r\n  border:\r\n    1px solid #e3e7ee;\r\n\r\n  border-radius: 24px;\r\n\r\n  background: #fff;\r\n\r\n  box-shadow:\r\n    0 25px 70px\r\n    rgba(30,45,75,.10);\r\n}\r\n\r\n.skoom-table-head,\r\n.skoom-table-row {\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    1.4fr\r\n    .8fr\r\n    .7fr\r\n    .9fr\r\n    .4fr;\r\n\r\n  gap: 14px;\r\n\r\n  align-items: center;\r\n}\r\n\r\n.skoom-table-head {\r\n  padding:\r\n    0 14px 14px;\r\n\r\n  font-size: 12px;\r\n\r\n  font-weight: 800;\r\n\r\n  color: #8a94a6;\r\n}\r\n\r\n.skoom-table-row {\r\n  padding:\r\n    18px 14px;\r\n\r\n  border-top:\r\n    1px solid #edf0f5;\r\n\r\n  font-size: 13px;\r\n\r\n  font-weight: 700;\r\n}\r\n\r\n.skoom-status {\r\n  display: inline-block;\r\n\r\n  width: fit-content;\r\n\r\n  padding:\r\n    6px 9px;\r\n\r\n  border-radius: 999px;\r\n\r\n  background:\r\n    #edf3ff;\r\n\r\n  color:\r\n    var(--blue);\r\n\r\n  font-size: 11px;\r\n}\r\n\r\n.skoom-bar {\r\n  height: 8px;\r\n\r\n  border-radius: 999px;\r\n\r\n  background:\r\n    #eef1f5;\r\n\r\n  overflow: hidden;\r\n}\r\n\r\n.skoom-bar span {\r\n  display: block;\r\n\r\n  height: 100%;\r\n\r\n  background:\r\n    var(--blue);\r\n\r\n  border-radius:\r\n    inherit;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   05 \u2014 COMMENT CA FONCTIONNE\r\n========================================================= *\/\r\n\r\n.skoom-process {\r\n  background: #ffffff;\r\n  padding-top: 70px;\r\n}\r\n\r\n.skoom-process-head {\r\n  margin-bottom: 50px;\r\n}\r\n\r\n.skoom-steps {\r\n  display: grid;\r\n  grid-template-columns: repeat(4,1fr);\r\n  position: relative;\r\n  gap: 28px;\r\n}\r\n\r\n.skoom-steps::before {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  top: 22px;\r\n  left: 12.5%;\r\n  right: 12.5%;\r\n\r\n  height: 2px;\r\n\r\n  background:\r\n    #dce4ff;\r\n}\r\n\r\n.skoom-step {\r\n  position: relative;\r\n  z-index: 2;\r\n  text-align: center;\r\n}\r\n\r\n.skoom-step-number {\r\n  margin:\r\n    0 auto 24px;\r\n\r\n  width: 46px;\r\n  height: 46px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background:\r\n    var(--blue);\r\n\r\n  color: #fff;\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  font-weight: 800;\r\n\r\n  border:\r\n    6px solid #fff;\r\n\r\n  box-shadow:\r\n    0 0 0 1px\r\n    #cdd9ff;\r\n}\r\n\r\n.skoom-step-visual {\r\n  height: 125px;\r\n\r\n  margin-bottom: 22px;\r\n\r\n  border-radius: 18px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      #f6f8ff,\r\n      #ffffff\r\n    );\r\n\r\n  border:\r\n    1px solid #e7ebf2;\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  font-size: 42px;\r\n\r\n  color:\r\n    var(--blue);\r\n\r\n  box-shadow:\r\n    0 12px 28px\r\n    rgba(30,45,75,.06);\r\n}\r\n\r\n.skoom-step h3 {\r\n  font-size: 20px;\r\n}\r\n\r\n.skoom-step p {\r\n  margin-top: 10px;\r\n\r\n  color:\r\n    var(--muted);\r\n\r\n  font-size: 14px;\r\n\r\n  line-height: 1.6;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RESPONSIVE\r\n========================================================= *\/\r\n\r\n@media (max-width:1100px) {\r\n\r\n  .skoom-grid-2,\r\n  .skoom-product-grid,\r\n  .skoom-pilotage-grid {\r\n    grid-template-columns:\r\n      1fr;\r\n  }\r\n\r\n  .skoom-problem-copy,\r\n  .skoom-product-copy {\r\n    max-width: none;\r\n  }\r\n\r\n  .skoom-solution-grid {\r\n    grid-template-columns:\r\n      1fr;\r\n  }\r\n\r\n  .skoom-dashboard-body {\r\n    grid-template-columns:\r\n      58px 1fr;\r\n  }\r\n\r\n  .skoom-kpis {\r\n    grid-template-columns:\r\n      repeat(2,1fr);\r\n  }\r\n\r\n  .skoom-steps {\r\n    grid-template-columns:\r\n      repeat(2,1fr);\r\n  }\r\n\r\n  .skoom-steps::before {\r\n    display: none;\r\n  }\r\n\r\n}\r\n\r\n\r\n@media (max-width:700px) {\r\n\r\n  .skoom-section {\r\n    padding:\r\n      65px 22px;\r\n  }\r\n\r\n  .skoom-network {\r\n    min-height: 540px;\r\n    transform: scale(.90);\r\n  }\r\n\r\n  .skoom-node {\r\n    min-width: 130px;\r\n\r\n    padding:\r\n      18px 14px;\r\n\r\n    font-size: 13px;\r\n  }\r\n\r\n  .skoom-node.n1 {\r\n    left: -5px;\r\n  }\r\n\r\n  .skoom-node.n2 {\r\n    right: -5px;\r\n  }\r\n\r\n  .skoom-node.n3 {\r\n    left: -20px;\r\n  }\r\n\r\n  .skoom-node.n4 {\r\n    right: -20px;\r\n  }\r\n\r\n  .skoom-node.n5 {\r\n    left: -5px;\r\n  }\r\n\r\n  .skoom-node.n6 {\r\n    right: -5px;\r\n  }\r\n\r\n  .skoom-hub {\r\n    width: 115px;\r\n    height: 115px;\r\n  }\r\n\r\n  .skoom-hub-logo {\r\n    width: 78px;\r\n  }\r\n\r\n  .skoom-dashboard-body {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .skoom-sidebar {\r\n    display: none;\r\n  }\r\n\r\n  .skoom-kpis,\r\n  .skoom-chart-area,\r\n  .skoom-steps {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .skoom-table-head {\r\n    display: none;\r\n  }\r\n\r\n  .skoom-table-row {\r\n    grid-template-columns:\r\n      1fr 1fr;\r\n  }\r\n\r\n  .skoom-table-row > :nth-child(4),\r\n  .skoom-table-row > :nth-child(5) {\r\n    display: none;\r\n  }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n<div class=\"skoom-home\">\r\n\r\n\r\n<!-- ======================================================\r\n     01 \u2014 LE CONSTAT\r\n====================================================== -->\r\n\r\n<section class=\"skoom-section skoom-problem\">\r\n\r\n  <div class=\"skoom-container skoom-grid-2\">\r\n\r\n\r\n    <div class=\"skoom-problem-copy\">\r\n\r\n      <span class=\"skoom-eyebrow\">\r\n        Le constat\r\n      <\/span>\r\n\r\n\r\n      <h2 class=\"skoom-title-medium\">\r\n\r\n        Vos outils RH sont l\u00e0.<br>\r\n\r\n        La vision d\u2019ensemble,<br>\r\n\r\n        beaucoup moins.\r\n\r\n      <\/h2>\r\n\r\n\r\n      <p class=\"skoom-copy\">\r\n\r\n        SIRH, fichiers Excel,\r\n        outils financiers,\r\n        solutions locales,\r\n        validations par e-mail\u2026\r\n\r\n        <br><br>\r\n\r\n        Les informations existent,\r\n        mais elles restent souvent dispers\u00e9es\r\n        entre les \u00e9quipes,\r\n        les pays et les outils.\r\n\r\n      <\/p>\r\n\r\n\r\n      <p class=\"skoom-highlight\">\r\n        SKOOM cr\u00e9e le lien.\r\n      <\/p>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <div class=\"skoom-network\">\r\n\r\n\r\n      <div class=\"skoom-node n1\">\r\n\r\n        <span class=\"skoom-node-icon\">\r\n          \u25a3\r\n        <\/span>\r\n\r\n        SIRH\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"skoom-node n2\">\r\n\r\n        <span class=\"skoom-node-icon\">\r\n          \u25a6\r\n        <\/span>\r\n\r\n        Excel\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"skoom-node n3\">\r\n\r\n        <span class=\"skoom-node-icon\">\r\n          \u25a5\r\n        <\/span>\r\n\r\n        Finance\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"skoom-node n4\">\r\n\r\n        <span class=\"skoom-node-icon\">\r\n          \u2699\r\n        <\/span>\r\n\r\n        Outils locaux\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"skoom-node n5\">\r\n\r\n        <span class=\"skoom-node-icon\">\r\n          \u2709\r\n        <\/span>\r\n\r\n        E-mails\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"skoom-node n6\">\r\n\r\n        <span class=\"skoom-node-icon\">\r\n          \u25a4\r\n        <\/span>\r\n\r\n        CSV \/ Fichiers\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- LOGO OFFICIEL -->\r\n\r\n      <div class=\"skoom-hub\">\r\n\r\n        <img decoding=\"async\"\r\n          class=\"skoom-hub-logo\"\r\n          src=\"http:\/\/skoom.fr\/wp-content\/uploads\/2026\/08\/cropped-ChatGPT-Image-8-aout-2026-11_44_16-1.png\"\r\n          alt=\"SKOOM\"\r\n        >\r\n\r\n      <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<!-- ======================================================\r\n     02 \u2014 SKOOM \/ CENTRE DE PILOTAGE\r\n====================================================== -->\r\n\r\n<section class=\"skoom-section skoom-product\">\r\n\r\n  <div class=\"skoom-container skoom-product-grid\">\r\n\r\n\r\n    <div class=\"skoom-product-copy\">\r\n\r\n      <span class=\"skoom-eyebrow\">\r\n        SKOOM\r\n      <\/span>\r\n\r\n\r\n      <h2 class=\"skoom-title-medium\">\r\n\r\n        Une nouvelle fa\u00e7on<br>\r\n\r\n        de piloter les op\u00e9rations RH\r\n\r\n      <\/h2>\r\n\r\n\r\n      <p class=\"skoom-copy\">\r\n\r\n        SKOOM est une surcouche\r\n        d\u2019orchestration et de pilotage RH\r\n        qui se connecte \u00e0 votre\r\n        environnement existant.\r\n\r\n        <br><br>\r\n\r\n        Elle rassemble les informations utiles,\r\n        structure les circuits de d\u00e9cision\r\n        et transforme des donn\u00e9es dispers\u00e9es\r\n        en une vision directement exploitable.\r\n\r\n      <\/p>\r\n\r\n\r\n      <p class=\"skoom-highlight\">\r\n\r\n        Vous gardez vos outils.<br>\r\n\r\n        SKOOM les fait travailler ensemble.\r\n\r\n      <\/p>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <div class=\"skoom-dashboard\">\r\n\r\n\r\n      <div class=\"skoom-dashboard-top\">\r\n\r\n        <strong>\r\n          Centre de pilotage RH\r\n        <\/strong>\r\n\r\n        <div class=\"skoom-dashboard-avatar\"><\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <div class=\"skoom-dashboard-body\">\r\n\r\n\r\n        <div class=\"skoom-sidebar\">\r\n\r\n          <div class=\"skoom-side-dot\"><\/div>\r\n          <div class=\"skoom-side-dot\"><\/div>\r\n          <div class=\"skoom-side-dot\"><\/div>\r\n          <div class=\"skoom-side-dot\"><\/div>\r\n          <div class=\"skoom-side-dot\"><\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <div class=\"skoom-dashboard-content\">\r\n\r\n\r\n          <!-- KPI -->\r\n\r\n          <div class=\"skoom-kpis\">\r\n\r\n\r\n            <div class=\"skoom-kpi\">\r\n\r\n              <small>\r\n                Budgets consomm\u00e9s\r\n              <\/small>\r\n\r\n              <strong>\r\n\r\n                <span\r\n                  class=\"skoom-counter\"\r\n                  data-target=\"72\"\r\n                >0<\/span>%\r\n\r\n              <\/strong>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"skoom-kpi\">\r\n\r\n              <small>\r\n                Demandes en cours\r\n              <\/small>\r\n\r\n              <strong>\r\n\r\n                <span\r\n                  class=\"skoom-counter\"\r\n                  data-target=\"128\"\r\n                >0<\/span>\r\n\r\n              <\/strong>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"skoom-kpi\">\r\n\r\n              <small>\r\n                Validations en attente\r\n              <\/small>\r\n\r\n              <strong>\r\n\r\n                <span\r\n                  class=\"skoom-counter\"\r\n                  data-target=\"36\"\r\n                >0<\/span>\r\n\r\n              <\/strong>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"skoom-kpi\">\r\n\r\n              <small>\r\n                Alertes\r\n              <\/small>\r\n\r\n              <strong>\r\n\r\n                <span\r\n                  class=\"skoom-counter\"\r\n                  data-target=\"12\"\r\n                >0<\/span>\r\n\r\n              <\/strong>\r\n\r\n            <\/div>\r\n\r\n\r\n          <\/div>\r\n\r\n\r\n\r\n          <div class=\"skoom-chart-area\">\r\n\r\n\r\n            <!-- =================================================\r\n                 COURBE\r\n            ================================================== -->\r\n\r\n            <div class=\"skoom-chart\">\r\n\r\n\r\n              <div class=\"skoom-chart-title\">\r\n                \u00c9volution des budgets\r\n              <\/div>\r\n\r\n\r\n              <svg\r\n                class=\"skoom-budget-chart\"\r\n                viewBox=\"0 0 600 230\"\r\n                preserveAspectRatio=\"none\"\r\n              >\r\n\r\n\r\n                <!-- GRILLE -->\r\n\r\n                <line\r\n                  x1=\"30\"\r\n                  y1=\"180\"\r\n                  x2=\"570\"\r\n                  y2=\"180\"\r\n                  class=\"skoom-grid-line\"\r\n                \/>\r\n\r\n\r\n                <line\r\n                  x1=\"30\"\r\n                  y1=\"130\"\r\n                  x2=\"570\"\r\n                  y2=\"130\"\r\n                  class=\"skoom-grid-line\"\r\n                \/>\r\n\r\n\r\n                <line\r\n                  x1=\"30\"\r\n                  y1=\"80\"\r\n                  x2=\"570\"\r\n                  y2=\"80\"\r\n                  class=\"skoom-grid-line\"\r\n                \/>\r\n\r\n\r\n\r\n                <!-- LIGNE SECONDAIRE -->\r\n\r\n                <polyline\r\n                  class=\"skoom-chart-line-secondary\"\r\n                  points=\"\r\n                    30,158\r\n                    120,156\r\n                    210,153\r\n                    300,149\r\n                    390,145\r\n                    480,141\r\n                    550,137\r\n                  \"\r\n                \/>\r\n\r\n\r\n\r\n                <!-- LIGNE PRINCIPALE -->\r\n\r\n                <polyline\r\n                  class=\"skoom-chart-line-main\"\r\n                  points=\"\r\n                    30,165\r\n                    120,158\r\n                    210,160\r\n                    300,148\r\n                    390,145\r\n                    480,130\r\n                    550,115\r\n                  \"\r\n                \/>\r\n\r\n\r\n\r\n                <!-- POINT 1 -->\r\n\r\n                <circle\r\n                  class=\"skoom-chart-point skoom-point-1\"\r\n                  cx=\"30\"\r\n                  cy=\"165\"\r\n                  r=\"4\"\r\n                \/>\r\n\r\n\r\n                <!-- POINT 2 -->\r\n\r\n                <circle\r\n                  class=\"skoom-chart-point skoom-point-2\"\r\n                  cx=\"120\"\r\n                  cy=\"158\"\r\n                  r=\"4\"\r\n                \/>\r\n\r\n\r\n                <!-- POINT 3 -->\r\n\r\n                <circle\r\n                  class=\"skoom-chart-point skoom-point-3\"\r\n                  cx=\"210\"\r\n                  cy=\"160\"\r\n                  r=\"4\"\r\n                \/>\r\n\r\n\r\n                <!-- POINT 4 -->\r\n\r\n                <circle\r\n                  class=\"skoom-chart-point skoom-point-4\"\r\n                  cx=\"300\"\r\n                  cy=\"148\"\r\n                  r=\"4\"\r\n                \/>\r\n\r\n\r\n                <!-- POINT 5 -->\r\n\r\n                <circle\r\n                  class=\"skoom-chart-point skoom-point-5\"\r\n                  cx=\"390\"\r\n                  cy=\"145\"\r\n                  r=\"4\"\r\n                \/>\r\n\r\n\r\n                <!-- POINT 6 -->\r\n\r\n                <circle\r\n                  class=\"skoom-chart-point skoom-point-6\"\r\n                  cx=\"480\"\r\n                  cy=\"130\"\r\n                  r=\"4\"\r\n                \/>\r\n\r\n\r\n                <!--\r\n                POINT 7\r\n                STRICTEMENT IDENTIQUE AUX AUTRES\r\n                -->\r\n\r\n                <circle\r\n                  class=\"skoom-chart-point skoom-point-7\"\r\n                  cx=\"550\"\r\n                  cy=\"115\"\r\n                  r=\"4\"\r\n                \/>\r\n\r\n\r\n              <\/svg>\r\n\r\n\r\n\r\n              <div class=\"skoom-chart-months\">\r\n\r\n                <span>Jan<\/span>\r\n                <span>F\u00e9v<\/span>\r\n                <span>Mar<\/span>\r\n                <span>Avr<\/span>\r\n                <span>Mai<\/span>\r\n                <span>Juin<\/span>\r\n\r\n              <\/div>\r\n\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- DONUT -->\r\n\r\n            <div class=\"skoom-donut\">\r\n\r\n              <div class=\"skoom-donut-title\">\r\n\r\n                R\u00e9partition par pays\r\n\r\n              <\/div>\r\n\r\n              <div class=\"skoom-donut-ring\"><\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n          <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n\r\n      <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<!-- ======================================================\r\n     03 \u2014 NOS SOLUTIONS\r\n====================================================== -->\r\n\r\n<section class=\"skoom-section skoom-solutions\">\r\n\r\n  <div class=\"skoom-container\">\r\n\r\n\r\n    <div class=\"skoom-solutions-head\">\r\n\r\n      <span class=\"skoom-eyebrow\">\r\n\r\n        Nos solutions\r\n\r\n      <\/span>\r\n\r\n\r\n      <h2 class=\"skoom-title-medium\">\r\n\r\n        Trois processus.\r\n        Une m\u00eame logique de pilotage.\r\n\r\n      <\/h2>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <div class=\"skoom-solution-grid\">\r\n\r\n\r\n      <article class=\"skoom-solution-card\">\r\n\r\n\r\n        <div class=\"skoom-card-icon\">\r\n          \u25ce\r\n        <\/div>\r\n\r\n\r\n        <h3>\r\n\r\n          Gouvernance<br>\r\n          des recrutements\r\n\r\n        <\/h3>\r\n\r\n\r\n        <p>\r\n\r\n          Encadrez les ouvertures de postes,\r\n          les budgets et les validations\r\n          avant que le recrutement\r\n          ne soit engag\u00e9.\r\n\r\n        <\/p>\r\n\r\n\r\n        <a\r\n          class=\"skoom-card-link\"\r\n          href=\"#\"\r\n        >\r\n\r\n          En savoir plus \u2192\r\n\r\n        <\/a>\r\n\r\n\r\n      <\/article>\r\n\r\n\r\n\r\n      <article class=\"skoom-solution-card\">\r\n\r\n\r\n        <div class=\"skoom-card-icon\">\r\n          \uff0b\r\n        <\/div>\r\n\r\n\r\n        <h3>\r\n\r\n          Pr\u00e9-onboarding\r\n\r\n        <\/h3>\r\n\r\n\r\n        <p>\r\n\r\n          Coordonnez les \u00e9quipes\r\n          et les actions n\u00e9cessaires\r\n          avant l\u2019arriv\u00e9e du collaborateur :\r\n          mat\u00e9riel, acc\u00e8s, comptes,\r\n          badges et logistique.\r\n\r\n        <\/p>\r\n\r\n\r\n        <a\r\n          class=\"skoom-card-link\"\r\n          href=\"#\"\r\n        >\r\n\r\n          En savoir plus \u2192\r\n\r\n        <\/a>\r\n\r\n\r\n      <\/article>\r\n\r\n\r\n\r\n      <article class=\"skoom-solution-card\">\r\n\r\n\r\n        <div class=\"skoom-card-icon\">\r\n          \u20ac\r\n        <\/div>\r\n\r\n\r\n        <h3>\r\n\r\n          Campagnes<br>\r\n          salariales\r\n\r\n        <\/h3>\r\n\r\n\r\n        <p>\r\n\r\n          Pilotez les propositions\r\n          d\u2019augmentation,\r\n          les enveloppes budg\u00e9taires\r\n          et les arbitrages\r\n          avec une vision consolid\u00e9e.\r\n\r\n        <\/p>\r\n\r\n\r\n        <a\r\n          class=\"skoom-card-link\"\r\n          href=\"#\"\r\n        >\r\n\r\n          En savoir plus \u2192\r\n\r\n        <\/a>\r\n\r\n\r\n      <\/article>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <div class=\"skoom-center-btn\">\r\n\r\n      <a\r\n        class=\"skoom-btn\"\r\n        href=\"#\"\r\n      >\r\n\r\n        D\u00e9couvrir nos solutions\r\n\r\n      <\/a>\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<!-- ======================================================\r\n     04 \u2014 CENTRE DE PILOTAGE\r\n====================================================== -->\r\n\r\n<section class=\"skoom-section skoom-pilotage\">\r\n\r\n  <div class=\"skoom-container skoom-pilotage-grid\">\r\n\r\n\r\n    <div>\r\n\r\n\r\n      <span class=\"skoom-eyebrow\">\r\n\r\n        Centre de pilotage RH\r\n\r\n      <\/span>\r\n\r\n\r\n      <h2 class=\"skoom-title-medium\">\r\n\r\n        Tout converge vers<br>\r\n        un m\u00eame centre de pilotage.\r\n\r\n      <\/h2>\r\n\r\n\r\n      <p\r\n        class=\"skoom-copy\"\r\n        style=\"margin-top:22px;\"\r\n      >\r\n\r\n        SKOOM consolide les informations\r\n        issues de vos diff\u00e9rents processus\r\n        pour permettre aux RH,\r\n        managers et d\u00e9cideurs de suivre :\r\n\r\n      <\/p>\r\n\r\n\r\n\r\n      <div class=\"skoom-pilot-icons\">\r\n\r\n\r\n        <div class=\"skoom-pilot-item\">\r\n\r\n          <span>\u20ac<\/span>\r\n\r\n          <small>\r\n            Budgets\r\n          <\/small>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"skoom-pilot-item\">\r\n\r\n          <span>\u2713<\/span>\r\n\r\n          <small>\r\n            Validations\r\n          <\/small>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"skoom-pilot-item\">\r\n\r\n          <span>\u2662<\/span>\r\n\r\n          <small>\r\n            Alertes\r\n          <\/small>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"skoom-pilot-item\">\r\n\r\n          <span>\u25a5<\/span>\r\n\r\n          <small>\r\n            Avancement\r\n          <\/small>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"skoom-pilot-item\">\r\n\r\n          <span>\u25ce<\/span>\r\n\r\n          <small>\r\n            D\u00e9cisions\r\n          <\/small>\r\n\r\n        <\/div>\r\n\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <p class=\"skoom-copy\">\r\n\r\n        Une information plus claire.<br>\r\n\r\n        Des responsabilit\u00e9s mieux d\u00e9finies.<br>\r\n\r\n        Des d\u00e9cisions plus faciles \u00e0 piloter.\r\n\r\n      <\/p>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <div class=\"skoom-process-table\">\r\n\r\n\r\n      <div class=\"skoom-table-head\">\r\n\r\n        <div>Processus<\/div>\r\n        <div>Statut<\/div>\r\n        <div>Budget<\/div>\r\n        <div>Avancement<\/div>\r\n        <div>Alertes<\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <div class=\"skoom-table-row\">\r\n\r\n        <div>\r\n          Gouvernance des recrutements\r\n        <\/div>\r\n\r\n        <div>\r\n\r\n          <span class=\"skoom-status\">\r\n            En cours\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n        <div>\r\n          68%\r\n        <\/div>\r\n\r\n        <div class=\"skoom-bar\">\r\n\r\n          <span style=\"width:68%;\">\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n        <div>\r\n          03\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <div class=\"skoom-table-row\">\r\n\r\n        <div>\r\n          Pr\u00e9-onboarding\r\n        <\/div>\r\n\r\n        <div>\r\n\r\n          <span class=\"skoom-status\">\r\n            En cours\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n        <div>\r\n          54%\r\n        <\/div>\r\n\r\n        <div class=\"skoom-bar\">\r\n\r\n          <span style=\"width:54%;\">\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n        <div>\r\n          02\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <div class=\"skoom-table-row\">\r\n\r\n        <div>\r\n          Campagnes salariales\r\n        <\/div>\r\n\r\n        <div>\r\n\r\n          <span class=\"skoom-status\">\r\n            En cours\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n        <div>\r\n          76%\r\n        <\/div>\r\n\r\n        <div class=\"skoom-bar\">\r\n\r\n          <span style=\"width:76%;\">\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n        <div>\r\n          07\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<!-- ======================================================\r\n     05 \u2014 COMMENT CA FONCTIONNE\r\n====================================================== -->\r\n\r\n<section class=\"skoom-section skoom-process\">\r\n\r\n  <div class=\"skoom-container\">\r\n\r\n\r\n    <div class=\"skoom-process-head\">\r\n\r\n\r\n      <span class=\"skoom-eyebrow\">\r\n\r\n        Comment \u00e7a fonctionne\r\n\r\n      <\/span>\r\n\r\n\r\n      <h2 class=\"skoom-title-medium\">\r\n\r\n        SKOOM s\u2019int\u00e8gre\r\n        \u00e0 votre environnement.\r\n\r\n      <\/h2>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <div class=\"skoom-steps\">\r\n\r\n\r\n      <div class=\"skoom-step\">\r\n\r\n\r\n        <div class=\"skoom-step-number\">\r\n\r\n          01\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"skoom-step-visual\">\r\n\r\n          \u221e\r\n\r\n        <\/div>\r\n\r\n\r\n        <h3>\r\n\r\n          Connecter\r\n\r\n        <\/h3>\r\n\r\n\r\n        <p>\r\n\r\n          API, logiciels existants,\r\n          fichiers Excel ou CSV.\r\n\r\n        <\/p>\r\n\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <div class=\"skoom-step\">\r\n\r\n\r\n        <div class=\"skoom-step-number\">\r\n\r\n          02\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"skoom-step-visual\">\r\n\r\n          \u2261\r\n\r\n        <\/div>\r\n\r\n\r\n        <h3>\r\n\r\n          Analyser\r\n\r\n        <\/h3>\r\n\r\n\r\n        <p>\r\n\r\n          SKOOM rassemble\r\n          et structure les donn\u00e9es\r\n          n\u00e9cessaires au processus.\r\n\r\n        <\/p>\r\n\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <div class=\"skoom-step\">\r\n\r\n\r\n        <div class=\"skoom-step-number\">\r\n\r\n          03\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"skoom-step-visual\">\r\n\r\n          \u2933\r\n\r\n        <\/div>\r\n\r\n\r\n        <h3>\r\n\r\n          Orchestrer\r\n\r\n        <\/h3>\r\n\r\n\r\n        <p>\r\n\r\n          Les r\u00e8gles,\r\n          responsabilit\u00e9s\r\n          et \u00e9tapes de validation\r\n          sont appliqu\u00e9es.\r\n\r\n        <\/p>\r\n\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <div class=\"skoom-step\">\r\n\r\n\r\n        <div class=\"skoom-step-number\">\r\n\r\n          04\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"skoom-step-visual\">\r\n\r\n          \u25eb\r\n\r\n        <\/div>\r\n\r\n\r\n        <h3>\r\n\r\n          Piloter\r\n\r\n        <\/h3>\r\n\r\n\r\n        <p>\r\n\r\n          Les d\u00e9cideurs disposent\r\n          d\u2019une vision consolid\u00e9e\r\n          pour arbitrer et agir.\r\n\r\n        <\/p>\r\n\r\n\r\n      <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<script>\r\n(function () {\r\n\r\n  function initSkoomAnimations() {\r\n\r\n\r\n    const dashboards =\r\n      document.querySelectorAll(\r\n        \".skoom-dashboard\"\r\n      );\r\n\r\n\r\n    dashboards.forEach(\r\n      function (dashboard) {\r\n\r\n\r\n        if (\r\n          dashboard.dataset.skoomObserver === \"true\"\r\n        ) {\r\n          return;\r\n        }\r\n\r\n\r\n        dashboard.dataset.skoomObserver =\r\n          \"true\";\r\n\r\n\r\n        const counters =\r\n          dashboard.querySelectorAll(\r\n            \".skoom-counter\"\r\n          );\r\n\r\n\r\n        const chart =\r\n          dashboard.querySelector(\r\n            \".skoom-chart\"\r\n          );\r\n\r\n\r\n        let animationRunId = 0;\r\n\r\n        let sectionVisible = false;\r\n\r\n\r\n\r\n        \/* =============================================\r\n           RESET\r\n        ============================================= *\/\r\n\r\n        function resetAnimations() {\r\n\r\n\r\n          sectionVisible = false;\r\n\r\n          animationRunId++;\r\n\r\n\r\n          counters.forEach(\r\n            function (counter) {\r\n\r\n              counter.textContent = \"0\";\r\n\r\n            }\r\n          );\r\n\r\n\r\n          if (chart) {\r\n\r\n            chart.classList.remove(\r\n              \"skoom-visible\"\r\n            );\r\n\r\n            void chart.offsetWidth;\r\n\r\n          }\r\n\r\n        }\r\n\r\n\r\n\r\n        \/* =============================================\r\n           COMPTEURS\r\n        ============================================= *\/\r\n\r\n        function animateCounter(\r\n          counter,\r\n          runId\r\n        ) {\r\n\r\n\r\n          const target =\r\n            parseInt(\r\n              counter.getAttribute(\r\n                \"data-target\"\r\n              ),\r\n              10\r\n            );\r\n\r\n\r\n          if (\r\n            isNaN(target)\r\n          ) {\r\n            return;\r\n          }\r\n\r\n\r\n          const duration =\r\n            1800;\r\n\r\n\r\n          const start =\r\n            performance.now();\r\n\r\n\r\n\r\n          function frame(now) {\r\n\r\n\r\n            if (\r\n              !sectionVisible ||\r\n              runId !== animationRunId\r\n            ) {\r\n\r\n              return;\r\n\r\n            }\r\n\r\n\r\n            const progress =\r\n              Math.min(\r\n                (now - start) \/ duration,\r\n                1\r\n              );\r\n\r\n\r\n            const eased =\r\n              1 -\r\n              Math.pow(\r\n                1 - progress,\r\n                4\r\n              );\r\n\r\n\r\n            counter.textContent =\r\n              Math.round(\r\n                target * eased\r\n              );\r\n\r\n\r\n            if (\r\n              progress < 1\r\n            ) {\r\n\r\n              requestAnimationFrame(\r\n                frame\r\n              );\r\n\r\n            } else {\r\n\r\n              counter.textContent =\r\n                target;\r\n\r\n            }\r\n\r\n          }\r\n\r\n\r\n          requestAnimationFrame(\r\n            frame\r\n          );\r\n\r\n        }\r\n\r\n\r\n\r\n        \/* =============================================\r\n           PLAY\r\n        ============================================= *\/\r\n\r\n        function playAnimations() {\r\n\r\n\r\n          sectionVisible =\r\n            true;\r\n\r\n\r\n          animationRunId++;\r\n\r\n\r\n          const currentRun =\r\n            animationRunId;\r\n\r\n\r\n          counters.forEach(\r\n            function (counter) {\r\n\r\n              counter.textContent =\r\n                \"0\";\r\n\r\n            }\r\n          );\r\n\r\n\r\n          if (chart) {\r\n\r\n            chart.classList.remove(\r\n              \"skoom-visible\"\r\n            );\r\n\r\n            void chart.offsetWidth;\r\n\r\n          }\r\n\r\n\r\n\r\n          counters.forEach(\r\n            function (\r\n              counter,\r\n              index\r\n            ) {\r\n\r\n\r\n              setTimeout(\r\n                function () {\r\n\r\n\r\n                  if (\r\n                    sectionVisible &&\r\n                    currentRun ===\r\n                    animationRunId\r\n                  ) {\r\n\r\n                    animateCounter(\r\n                      counter,\r\n                      currentRun\r\n                    );\r\n\r\n                  }\r\n\r\n                },\r\n\r\n                index * 80\r\n              );\r\n\r\n            }\r\n          );\r\n\r\n\r\n\r\n          if (chart) {\r\n\r\n            setTimeout(\r\n              function () {\r\n\r\n\r\n                if (\r\n                  sectionVisible &&\r\n                  currentRun ===\r\n                  animationRunId\r\n                ) {\r\n\r\n                  chart.classList.add(\r\n                    \"skoom-visible\"\r\n                  );\r\n\r\n                }\r\n\r\n              },\r\n\r\n              120\r\n            );\r\n\r\n          }\r\n\r\n        }\r\n\r\n\r\n\r\n        \/* =============================================\r\n           SCROLL OBSERVER\r\n        ============================================= *\/\r\n\r\n        const observer =\r\n          new IntersectionObserver(\r\n\r\n            function (entries) {\r\n\r\n\r\n              entries.forEach(\r\n                function (entry) {\r\n\r\n\r\n                  if (\r\n                    entry.isIntersecting\r\n                  ) {\r\n\r\n\r\n                    if (\r\n                      !sectionVisible\r\n                    ) {\r\n\r\n                      playAnimations();\r\n\r\n                    }\r\n\r\n\r\n                  } else {\r\n\r\n\r\n                    resetAnimations();\r\n\r\n                  }\r\n\r\n                }\r\n              );\r\n\r\n            },\r\n\r\n            {\r\n\r\n              threshold: .28,\r\n\r\n              rootMargin:\r\n                \"-5% 0px -5% 0px\"\r\n\r\n            }\r\n\r\n          );\r\n\r\n\r\n        observer.observe(\r\n          dashboard\r\n        );\r\n\r\n\r\n        resetAnimations();\r\n\r\n      }\r\n    );\r\n\r\n  }\r\n\r\n\r\n\r\n  if (\r\n    document.readyState ===\r\n    \"loading\"\r\n  ) {\r\n\r\n    document.addEventListener(\r\n      \"DOMContentLoaded\",\r\n      initSkoomAnimations\r\n    );\r\n\r\n  } else {\r\n\r\n    initSkoomAnimations();\r\n\r\n  }\r\n\r\n\r\n\r\n  window.addEventListener(\r\n    \"load\",\r\n    function () {\r\n\r\n      setTimeout(\r\n        initSkoomAnimations,\r\n        300\r\n      );\r\n\r\n    }\r\n  );\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Le constat Vos outils RH sont l\u00e0. La vision d\u2019ensemble, beaucoup moins. SIRH, fichiers Excel, outils financiers, solutions locales, validations par e-mail\u2026 Les informations existent, mais elles restent souvent dispers\u00e9es entre les \u00e9quipes, les pays et les outils. SKOOM cr\u00e9e le lien. \u25a3 SIRH \u25a6 Excel \u25a5 Finance \u2699 Outils locaux \u2709 E-mails \u25a4 CSV&#8230;<\/p>","protected":false},"author":1,"featured_media":43,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-39","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/skoom.fr\/en\/wp-json\/wp\/v2\/pages\/39","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/skoom.fr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/skoom.fr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/skoom.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/skoom.fr\/en\/wp-json\/wp\/v2\/comments?post=39"}],"version-history":[{"count":371,"href":"https:\/\/skoom.fr\/en\/wp-json\/wp\/v2\/pages\/39\/revisions"}],"predecessor-version":[{"id":1737,"href":"https:\/\/skoom.fr\/en\/wp-json\/wp\/v2\/pages\/39\/revisions\/1737"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/skoom.fr\/en\/wp-json\/wp\/v2\/media\/43"}],"wp:attachment":[{"href":"https:\/\/skoom.fr\/en\/wp-json\/wp\/v2\/media?parent=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}