{"id":23,"date":"2026-08-09T08:36:55","date_gmt":"2026-08-09T08:36:55","guid":{"rendered":"https:\/\/skoom.fr\/?page_id=23"},"modified":"2026-08-28T11:13:51","modified_gmt":"2026-08-28T11:13:51","slug":"a-propos","status":"publish","type":"page","link":"https:\/\/skoom.fr\/en\/a-propos\/","title":{"rendered":"The SkOOmers"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"23\" class=\"elementor elementor-23\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-db93599 e-con e-atomic-element e-flexbox-base e-74ef1dc \" data-id=\"db93599\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"db93599\">\n    \t\t<div class=\"elementor-element elementor-element-6fcfd6d elementor-absolute elementor-widget elementor-widget-shortcode\" data-id=\"6fcfd6d\" 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<div class=\"elementor-element elementor-element-e35b41a elementor-absolute elementor-widget-mobile__width-initial elementor-widget elementor-widget-theme-site-logo elementor-widget-image\" data-id=\"e35b41a\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"theme-site-logo.default\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/skoom.fr\/en\">\n\t\t\t<img decoding=\"async\" width=\"300\" height=\"144\" src=\"https:\/\/skoom.fr\/wp-content\/uploads\/2026\/08\/Logo-png-Blanc-1-1.png\" class=\"attachment-medium size-medium wp-image-494\" alt=\"\" \/>\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" class=\"e-image-base e-a861b37-f3c2e99\" data-interaction-id=\"a861b37\" id=\"556\" src=\"https:\/\/skoom.fr\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-11-aout-2026-08_26_36.png\" width=\"1535\" height=\"1024\" srcset=\"https:\/\/skoom.fr\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-11-aout-2026-08_26_36.png 1535w, https:\/\/skoom.fr\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-11-aout-2026-08_26_36-300x200.png 300w, https:\/\/skoom.fr\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-11-aout-2026-08_26_36-1024x683.png 1024w, https:\/\/skoom.fr\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-11-aout-2026-08_26_36-768x512.png 768w\" alt=\"\"\/>\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-b1f2193 e-con e-atomic-element e-flexbox-base e-abc5ef1 \" data-id=\"b1f2193\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"b1f2193\">\n    \t\t\t<h1 data-interaction-id=\"5e51a11\" class=\"e-5e51a11-6b38ffd skoom-hero-h1 e-heading-base\">La bonne information,<\/h1>\n\t\t\t\t\t<h2 data-interaction-id=\"f3dceb4\" class=\"e-f3dceb4-3008450 skoom-hero-h2 e-heading-base\">au bon niveau de d\u00e9cision.<\/h2>\n\t\t\t\t\t<p class=\"e-d542e37-2e74980 skoom-hero-text e-paragraph-base\" data-interaction-id=\"d542e37\">Direction, RH, finance, managers ou responsables locaux : chaque Skoomer acc\u00e8de \u00e0 la vision, aux actions et aux validations qui correspondent \u00e0 son r\u00f4le.<\/p>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-ff2f0d1 e-con e-atomic-element e-flexbox-base e-8e56ee6 \" data-id=\"ff2f0d1\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"ff2f0d1\">\n    \t\t<div class=\"elementor-element elementor-element-ffbc0a8 elementor-widget elementor-widget-html\" data-id=\"ffbc0a8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n     SKOOM \u2014 PAGE LES SKOOMERS\r\n     PROFILS + DASHBOARD + CTA\r\n\r\n     FAVICON OFFICIEL :\r\n     https:\/\/skoom.fr\/wp-content\/uploads\/2026\/08\/FAVICON-2.png\r\n\r\n     \u00c0 COLLER DANS UN WIDGET HTML ELEMENTOR\r\n========================================================= -->\r\n\r\n\r\n<section class=\"skoomers-section\" id=\"profils-skoomers\">\r\n\r\n\r\n    <!-- =====================================================\r\n         TITRE SECTION\r\n    ====================================================== -->\r\n\r\n    <div class=\"skoomers-container skoomers-intro\">\r\n\r\n        <div class=\"skoomers-eyebrow\">\r\n            TOUS CONNECT\u00c9S, TOUS ALIGN\u00c9S\r\n        <\/div>\r\n\r\n        <h2 class=\"skoomers-title\">\r\n            Des r\u00f4les cl\u00e9s, une plateforme commune\r\n        <\/h2>\r\n\r\n        <div class=\"skoomers-title-line\"><\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- =====================================================\r\n         CARTES PROFILS\r\n    ====================================================== -->\r\n\r\n    <div class=\"skoomers-container\">\r\n\r\n        <div class=\"skoomers-grid\">\r\n\r\n\r\n            <!-- =============================================\r\n                 CEO & DIRECTION\r\n            ============================================== -->\r\n\r\n            <article class=\"skoomer-card\">\r\n\r\n                <div class=\"skoomer-card-header\">\r\n\r\n                    <div class=\"skoomer-role-icon\">\r\n\r\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n\r\n                            <path\r\n                                d=\"M3 7l4 4 5-7 5 7 4-4-2 11H5L3 7z\"\r\n                            \/>\r\n\r\n                        <\/svg>\r\n\r\n                    <\/div>\r\n\r\n                    <h3>\r\n                        PDG &amp; Direction\r\n                    <\/h3>\r\n\r\n                <\/div>\r\n\r\n\r\n                <p class=\"skoomer-card-description\">\r\n                    Pilotez la strat\u00e9gie RH et prenez\r\n                    des d\u00e9cisions \u00e9clair\u00e9es.\r\n                <\/p>\r\n\r\n\r\n                <ul>\r\n\r\n                    <li>\r\n                        Vision consolid\u00e9e des effectifs\r\n                        et des budgets\r\n                    <\/li>\r\n\r\n                    <li>\r\n                        Tableaux de bord ex\u00e9cutifs\r\n                    <\/li>\r\n\r\n                    <li>\r\n                        Alertes et recommandations cl\u00e9s\r\n                    <\/li>\r\n\r\n                <\/ul>\r\n\r\n            <\/article>\r\n\r\n\r\n\r\n            <!-- =============================================\r\n                 DRH & HRBP\r\n            ============================================== -->\r\n\r\n            <article class=\"skoomer-card\">\r\n\r\n                <div class=\"skoomer-card-header\">\r\n\r\n                    <div class=\"skoomer-role-icon\">\r\n\r\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n\r\n                            <circle\r\n                                cx=\"9\"\r\n                                cy=\"8\"\r\n                                r=\"3\"\r\n                            \/>\r\n\r\n                            <circle\r\n                                cx=\"16\"\r\n                                cy=\"9\"\r\n                                r=\"2.5\"\r\n                            \/>\r\n\r\n                            <path\r\n                                d=\"M3 20c0-4 2.6-7 6-7s6 3 6 7\"\r\n                            \/>\r\n\r\n                            <path\r\n                                d=\"M14 14c3.5 0 6 2.2 6 5\"\r\n                            \/>\r\n\r\n                        <\/svg>\r\n\r\n                    <\/div>\r\n\r\n                    <h3>\r\n                        Direction des Ressources Humaines\r\n                    <\/h3>\r\n\r\n                <\/div>\r\n\r\n\r\n                <p class=\"skoomer-card-description\">\r\n                    Orchestrez les processus RH\r\n                    et alignez les \u00e9quipes.\r\n                <\/p>\r\n\r\n\r\n                <ul>\r\n\r\n                    <li>\r\n                        Gouvernance des recrutements\r\n                    <\/li>\r\n\r\n                    <li>\r\n                        Pilotage des campagnes salariales\r\n                    <\/li>\r\n\r\n                    <li>\r\n                        Suivi des initiatives RH par pays\r\n                    <\/li>\r\n\r\n                <\/ul>\r\n\r\n            <\/article>\r\n\r\n\r\n\r\n            <!-- =============================================\r\n                 MANAGERS\r\n            ============================================== -->\r\n\r\n            <article class=\"skoomer-card\">\r\n\r\n                <div class=\"skoomer-card-header\">\r\n\r\n                    <div class=\"skoomer-role-icon\">\r\n\r\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n\r\n                            <rect\r\n                                x=\"3\"\r\n                                y=\"7\"\r\n                                width=\"18\"\r\n                                height=\"13\"\r\n                                rx=\"2\"\r\n                            \/>\r\n\r\n                            <path\r\n                                d=\"M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"\r\n                            \/>\r\n\r\n                            <path\r\n                                d=\"M3 12h18\"\r\n                            \/>\r\n\r\n                        <\/svg>\r\n\r\n                    <\/div>\r\n\r\n                    <h3>\r\n                        Managers\r\n                    <\/h3>\r\n\r\n                <\/div>\r\n\r\n\r\n                <p class=\"skoomer-card-description\">\r\n                    G\u00e9rez vos \u00e9quipes et vos besoins\r\n                    en toute autonomie.\r\n                <\/p>\r\n\r\n\r\n                <ul>\r\n\r\n                    <li>\r\n                        Demandes et validations simplifi\u00e9es\r\n                    <\/li>\r\n\r\n                    <li>\r\n                        Suivi des arriv\u00e9es et des effectifs\r\n                    <\/li>\r\n\r\n                    <li>\r\n                        Visibilit\u00e9 sur les budgets\r\n                        de votre \u00e9quipe\r\n                    <\/li>\r\n\r\n                <\/ul>\r\n\r\n            <\/article>\r\n\r\n\r\n\r\n            <!-- =============================================\r\n                 COUNTRY MANAGERS\r\n            ============================================== -->\r\n\r\n            <article class=\"skoomer-card\">\r\n\r\n                <div class=\"skoomer-card-header\">\r\n\r\n                    <div class=\"skoomer-role-icon\">\r\n\r\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n\r\n                            <circle\r\n                                cx=\"12\"\r\n                                cy=\"12\"\r\n                                r=\"9\"\r\n                            \/>\r\n\r\n                            <path\r\n                                d=\"M3 12h18\"\r\n                            \/>\r\n\r\n                            <path\r\n                                d=\"M12 3c3 3 4 6 4 9s-1 6-4 9\"\r\n                            \/>\r\n\r\n                            <path\r\n                                d=\"M12 3c-3 3-4 6-4 9s1 6 4 9\"\r\n                            \/>\r\n\r\n                        <\/svg>\r\n\r\n                    <\/div>\r\n\r\n                    <h3>\r\n                        Directeur de R\u00e9gion\r\n                    <\/h3>\r\n\r\n                <\/div>\r\n\r\n\r\n                <p class=\"skoomer-card-description\">\r\n                    Adaptez l'ex\u00e9cution RH\r\n                    \u00e0 votre r\u00e9alit\u00e9 locale.\r\n                <\/p>\r\n\r\n\r\n                <ul>\r\n\r\n                    <li>\r\n                        Visibilit\u00e9 sur votre entit\u00e9\r\n                    <\/li>\r\n\r\n                    <li>\r\n                        Respect des cadres de gouvernance\r\n                    <\/li>\r\n\r\n                    <li>\r\n                        Remont\u00e9e d'informations structur\u00e9e\r\n                    <\/li>\r\n\r\n                <\/ul>\r\n\r\n            <\/article>\r\n\r\n\r\n\r\n            <!-- =============================================\r\n                 CFO \/ FINANCE\r\n            ============================================== -->\r\n\r\n            <article class=\"skoomer-card\">\r\n\r\n                <div class=\"skoomer-card-header\">\r\n\r\n                    <div class=\"skoomer-role-icon\">\r\n\r\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n\r\n                            <circle\r\n                                cx=\"12\"\r\n                                cy=\"12\"\r\n                                r=\"9\"\r\n                            \/>\r\n\r\n                            <path\r\n                                d=\"M12 3v9h9\"\r\n                            \/>\r\n\r\n                            <path\r\n                                d=\"M12 12l-6 7\"\r\n                            \/>\r\n\r\n                        <\/svg>\r\n\r\n                    <\/div>\r\n\r\n                    <h3>\r\n                        DAF \/ Finance\r\n                    <\/h3>\r\n\r\n                <\/div>\r\n\r\n\r\n                <p class=\"skoomer-card-description\">\r\n                    Ma\u00eetrisez les engagements\r\n                    et s\u00e9curisez les budgets.\r\n                <\/p>\r\n\r\n\r\n                <ul>\r\n\r\n                    <li>\r\n                        Contr\u00f4le des enveloppes\r\n                    <\/li>\r\n\r\n                    <li>\r\n                        Suivi de la consommation\r\n                    <\/li>\r\n\r\n                    <li>\r\n                        Historique et tra\u00e7abilit\u00e9\r\n                        des d\u00e9cisions\r\n                    <\/li>\r\n\r\n                <\/ul>\r\n\r\n            <\/article>\r\n\r\n\r\n\r\n            <!-- =============================================\r\n                 \u00c9QUIPES SUPPORT\r\n            ============================================== -->\r\n\r\n            <article class=\"skoomer-card\">\r\n\r\n                <div class=\"skoomer-card-header\">\r\n\r\n                    <div class=\"skoomer-role-icon\">\r\n\r\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n\r\n                            <path\r\n                                d=\"M4 13v-2a8 8 0 0 1 16 0v2\"\r\n                            \/>\r\n\r\n                            <path\r\n                                d=\"M4 13v4a2 2 0 0 0 2 2h2v-7H6a2 2 0 0 0-2 1z\"\r\n                            \/>\r\n\r\n                            <path\r\n                                d=\"M20 13v4a2 2 0 0 1-2 2h-2v-7h2a2 2 0 0 1 2 1z\"\r\n                            \/>\r\n\r\n                        <\/svg>\r\n\r\n                    <\/div>\r\n\r\n                    <h3>\r\n                        \u00c9quipes support\r\n                    <\/h3>\r\n\r\n                <\/div>\r\n\r\n\r\n                <p class=\"skoomer-card-description\">\r\n                    Coordonnez les op\u00e9rations\r\n                    et pr\u00e9parez chaque arriv\u00e9e.\r\n                <\/p>\r\n\r\n\r\n                <ul>\r\n\r\n                    <li>\r\n                        Pr\u00e9-onboarding &amp; logistique\r\n                    <\/li>\r\n\r\n                    <li>\r\n                        Gestion des acc\u00e8s\r\n                        et des \u00e9quipements\r\n                    <\/li>\r\n\r\n                    <li>\r\n                        Workflows et checklists partag\u00e9s\r\n                    <\/li>\r\n\r\n                <\/ul>\r\n\r\n            <\/article>\r\n\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- =====================================================\r\n         EXP\u00c9RIENCE ADAPT\u00c9E\r\n    ====================================================== -->\r\n\r\n    <div class=\"skoomers-container skoomers-experience\">\r\n\r\n\r\n        <!-- =============================================\r\n             TEXTE\r\n        ============================================== -->\r\n\r\n        <div class=\"skoomers-experience-copy\">\r\n\r\n\r\n            <!-- FAVICON OFFICIEL SKOOM -->\r\n\r\n            <div class=\"skoom-brand-icon skoom-brand-icon-small\">\r\n\r\n                <img decoding=\"async\"\r\n                    src=\"https:\/\/skoom.fr\/wp-content\/uploads\/2026\/08\/FAVICON-2.png\"\r\n                    alt=\"SKOOM\"\r\n                >\r\n\r\n            <\/div>\r\n\r\n\r\n            <h2>\r\n                Une exp\u00e9rience adapt\u00e9e<br>\r\n                \u00e0 chacun.\r\n            <\/h2>\r\n\r\n\r\n            <p>\r\n                SKOOM adapte l'interface, les donn\u00e9es et les actions\r\n                aux responsabilit\u00e9s de chaque Skoomer pour fournir\r\n                la bonne information, au bon moment,\r\n                dans le bon contexte.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- =============================================\r\n             DASHBOARD\r\n        ============================================== -->\r\n\r\n        <div class=\"dashboard-wrapper\">\r\n\r\n\r\n            <!-- PROFILS DASHBOARD -->\r\n\r\n            <div class=\"dashboard-personas\">\r\n\r\n                <span>\r\n                    <i><\/i>\r\n                    CEO\r\n                <\/span>\r\n\r\n                <span>\r\n                    <i><\/i>\r\n                    DRH\r\n                <\/span>\r\n\r\n                <span>\r\n                    <i><\/i>\r\n                    Manager\r\n                <\/span>\r\n\r\n                <span>\r\n                    <i><\/i>\r\n                    Country Manager\r\n                <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- =========================================\r\n                 DASHBOARD PRINCIPAL\r\n            ========================================== -->\r\n\r\n            <div class=\"skoom-dashboard\">\r\n\r\n\r\n                <!-- =====================================\r\n                     SIDEBAR\r\n                ====================================== -->\r\n\r\n                <aside class=\"dashboard-sidebar\">\r\n\r\n\r\n                    <!-- FAVICON OFFICIEL DANS LE DASHBOARD -->\r\n\r\n                    <div class=\"dashboard-brand\">\r\n\r\n                        <img decoding=\"async\"\r\n                            src=\"https:\/\/skoom.fr\/wp-content\/uploads\/2026\/08\/FAVICON-2.png\"\r\n                            alt=\"SKOOM\"\r\n                        >\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"sidebar-icon active\">\r\n\r\n                        <svg viewBox=\"0 0 24 24\">\r\n\r\n                            <rect\r\n                                x=\"4\"\r\n                                y=\"4\"\r\n                                width=\"16\"\r\n                                height=\"16\"\r\n                                rx=\"3\"\r\n                            \/>\r\n\r\n                            <path d=\"M8 15V11\" \/>\r\n                            <path d=\"M12 15V8\" \/>\r\n                            <path d=\"M16 15V6\" \/>\r\n\r\n                        <\/svg>\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"sidebar-icon\">\r\n\r\n                        <svg viewBox=\"0 0 24 24\">\r\n\r\n                            <circle\r\n                                cx=\"12\"\r\n                                cy=\"8\"\r\n                                r=\"3\"\r\n                            \/>\r\n\r\n                            <path\r\n                                d=\"M6 20c0-4 2.6-7 6-7s6 3 6 7\"\r\n                            \/>\r\n\r\n                        <\/svg>\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"sidebar-icon\">\r\n\r\n                        <svg viewBox=\"0 0 24 24\">\r\n\r\n                            <rect\r\n                                x=\"4\"\r\n                                y=\"6\"\r\n                                width=\"16\"\r\n                                height=\"14\"\r\n                                rx=\"2\"\r\n                            \/>\r\n\r\n                            <path d=\"M8 6V4\" \/>\r\n                            <path d=\"M16 6V4\" \/>\r\n                            <path d=\"M4 10h16\" \/>\r\n\r\n                        <\/svg>\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"sidebar-icon\">\r\n\r\n                        <svg viewBox=\"0 0 24 24\">\r\n\r\n                            <circle\r\n                                cx=\"12\"\r\n                                cy=\"12\"\r\n                                r=\"8\"\r\n                            \/>\r\n\r\n                            <path d=\"M12 8v5\" \/>\r\n                            <path d=\"M12 16h.01\" \/>\r\n\r\n                        <\/svg>\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"sidebar-icon\">\r\n\r\n                        <svg viewBox=\"0 0 24 24\">\r\n\r\n                            <circle\r\n                                cx=\"12\"\r\n                                cy=\"12\"\r\n                                r=\"3\"\r\n                            \/>\r\n\r\n                            <path\r\n                                d=\"M19 12a7 7 0 0 0-.1-1l2-1.5-2-3.5-2.4 1a7 7 0 0 0-1.7-1L14.5 3h-5L9 6a7 7 0 0 0-1.7 1L5 6 3 9.5 5 11a7 7 0 0 0 0 2l-2 1.5L5 18l2.3-1a7 7 0 0 0 1.7 1l.5 3h5l.5-3a7 7 0 0 0 1.7-1l2.3 1 2-3.5-2-1.5a7 7 0 0 0 0-2z\"\r\n                            \/>\r\n\r\n                        <\/svg>\r\n\r\n                    <\/div>\r\n\r\n                <\/aside>\r\n\r\n\r\n\r\n                <!-- =====================================\r\n                     CENTRE DASHBOARD\r\n                ====================================== -->\r\n\r\n                <div class=\"dashboard-main\">\r\n\r\n\r\n                    <div class=\"dashboard-topbar\">\r\n\r\n                        <div>\r\n\r\n                            <span class=\"dashboard-small-label\">\r\n                                CENTRE DE PILOTAGE RH\r\n                            <\/span>\r\n\r\n                            <h4>\r\n                                Vue consolid\u00e9e\r\n                            <\/h4>\r\n\r\n                        <\/div>\r\n\r\n\r\n                        <div class=\"dashboard-user\">\r\n                            DK\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n\r\n\r\n                    <!-- =================================\r\n                         KPI\r\n                    ================================== -->\r\n\r\n                    <div class=\"dashboard-kpi-grid\">\r\n\r\n\r\n                        <div class=\"dashboard-kpi\">\r\n\r\n                            <span>\r\n                                Effectif total\r\n                            <\/span>\r\n\r\n                            <strong>\r\n                                1 250\r\n                            <\/strong>\r\n\r\n                            <small>\r\n                                +2,6 % vs N-1\r\n                            <\/small>\r\n\r\n                        <\/div>\r\n\r\n\r\n\r\n                        <div class=\"dashboard-kpi\">\r\n\r\n                            <span>\r\n                                Demandes en cours\r\n                            <\/span>\r\n\r\n                            <strong>\r\n                                36\r\n                            <\/strong>\r\n\r\n                            <small>\r\n                                8 \u00e0 valider\r\n                            <\/small>\r\n\r\n                        <\/div>\r\n\r\n\r\n\r\n                        <div class=\"dashboard-kpi\">\r\n\r\n                            <span>\r\n                                Budget salarial\r\n                            <\/span>\r\n\r\n                            <strong>\r\n                                2,48 M\u20ac\r\n                            <\/strong>\r\n\r\n                            <small>\r\n                                74 % consomm\u00e9\r\n                            <\/small>\r\n\r\n                        <\/div>\r\n\r\n\r\n                    <\/div>\r\n\r\n\r\n\r\n                    <!-- =================================\r\n                         GRAPHIQUES\r\n                    ================================== -->\r\n\r\n                    <div class=\"dashboard-data-grid\">\r\n\r\n\r\n                        <!-- COURBE -->\r\n\r\n                        <div class=\"dashboard-chart\">\r\n\r\n                            <div class=\"dashboard-widget-title\">\r\n                                \u00c9volution des effectifs\r\n                            <\/div>\r\n\r\n\r\n                            <svg\r\n                                viewBox=\"0 0 500 180\"\r\n                                class=\"line-chart\"\r\n                                preserveAspectRatio=\"none\"\r\n                                aria-hidden=\"true\"\r\n                            >\r\n\r\n                                <defs>\r\n\r\n                                    <linearGradient\r\n                                        id=\"skoomChartFill\"\r\n                                        x1=\"0\"\r\n                                        y1=\"0\"\r\n                                        x2=\"0\"\r\n                                        y2=\"1\"\r\n                                    >\r\n\r\n                                        <stop\r\n                                            offset=\"0%\"\r\n                                            stop-color=\"#A836FF\"\r\n                                            stop-opacity=\".32\"\r\n                                        \/>\r\n\r\n                                        <stop\r\n                                            offset=\"100%\"\r\n                                            stop-color=\"#A836FF\"\r\n                                            stop-opacity=\"0\"\r\n                                        \/>\r\n\r\n                                    <\/linearGradient>\r\n\r\n                                <\/defs>\r\n\r\n\r\n                                <line\r\n                                    x1=\"0\"\r\n                                    y1=\"150\"\r\n                                    x2=\"500\"\r\n                                    y2=\"150\"\r\n                                    class=\"chart-grid\"\r\n                                \/>\r\n\r\n                                <line\r\n                                    x1=\"0\"\r\n                                    y1=\"105\"\r\n                                    x2=\"500\"\r\n                                    y2=\"105\"\r\n                                    class=\"chart-grid\"\r\n                                \/>\r\n\r\n                                <line\r\n                                    x1=\"0\"\r\n                                    y1=\"60\"\r\n                                    x2=\"500\"\r\n                                    y2=\"60\"\r\n                                    class=\"chart-grid\"\r\n                                \/>\r\n\r\n\r\n                                <path\r\n                                    class=\"chart-area\"\r\n                                    d=\"\r\n                                        M0 145\r\n                                        L45 128\r\n                                        L88 134\r\n                                        L130 112\r\n                                        L175 118\r\n                                        L215 92\r\n                                        L260 102\r\n                                        L305 73\r\n                                        L350 84\r\n                                        L400 50\r\n                                        L450 62\r\n                                        L500 30\r\n                                        L500 180\r\n                                        L0 180 Z\r\n                                    \"\r\n                                \/>\r\n\r\n\r\n                                <path\r\n                                    class=\"chart-line\"\r\n                                    d=\"\r\n                                        M0 145\r\n                                        L45 128\r\n                                        L88 134\r\n                                        L130 112\r\n                                        L175 118\r\n                                        L215 92\r\n                                        L260 102\r\n                                        L305 73\r\n                                        L350 84\r\n                                        L400 50\r\n                                        L450 62\r\n                                        L500 30\r\n                                    \"\r\n                                \/>\r\n\r\n                            <\/svg>\r\n\r\n\r\n                            <div class=\"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                        <\/div>\r\n\r\n\r\n\r\n                        <!-- DONUT -->\r\n\r\n                        <div class=\"dashboard-donut-card\">\r\n\r\n                            <div class=\"dashboard-widget-title\">\r\n                                R\u00e9partition par entit\u00e9\r\n                            <\/div>\r\n\r\n\r\n                            <div class=\"dashboard-donut\">\r\n\r\n                                <div class=\"dashboard-donut-center\">\r\n\r\n                                    <strong>\r\n                                        France\r\n                                    <\/strong>\r\n\r\n                                    <span>\r\n                                        60 %\r\n                                    <\/span>\r\n\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n\r\n                <!-- =====================================\r\n                     PANEL ENTIT\u00c9S\r\n                ====================================== -->\r\n\r\n                <div class=\"dashboard-panel\">\r\n\r\n                    <div class=\"dashboard-panel-title\">\r\n                        Entit\u00e9s\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"dashboard-panel-item\">\r\n\r\n                        <span class=\"panel-dot\"><\/span>\r\n\r\n                        France\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"dashboard-panel-item\">\r\n\r\n                        <span class=\"panel-dot\"><\/span>\r\n\r\n                        Royaume-Uni\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"dashboard-panel-item\">\r\n\r\n                        <span class=\"panel-dot\"><\/span>\r\n\r\n                        Belgique\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"dashboard-panel-item\">\r\n\r\n                        <span class=\"panel-dot\"><\/span>\r\n\r\n                        Singapour\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"dashboard-panel-item\">\r\n\r\n                        <span class=\"panel-dot\"><\/span>\r\n\r\n                        Kenya\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- =====================================================\r\n         CTA FINAL\r\n    ====================================================== -->\r\n\r\n    <div class=\"skoomers-container\">\r\n\r\n        <div class=\"skoomers-cta\">\r\n\r\n\r\n            <!-- FAVICON OFFICIEL -->\r\n\r\n            <div class=\"skoomers-cta-logo\">\r\n\r\n                <img decoding=\"async\"\r\n                    src=\"https:\/\/skoom.fr\/wp-content\/uploads\/2026\/08\/FAVICON-2.png\"\r\n                    alt=\"SKOOM\"\r\n                >\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <div class=\"skoomers-cta-content\">\r\n\r\n                <h2>\r\n                    Ensemble, faisons avancer vos \u00e9quipes.\r\n                <\/h2>\r\n\r\n                <p>\r\n                    Rejoignez les Skoomers qui pilotent\r\n                    leurs op\u00e9rations RH avec plus de visibilit\u00e9,\r\n                    de fluidit\u00e9 et de ma\u00eetrise.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <div class=\"skoomers-cta-actions\">\r\n\r\n\r\n                <a\r\n                    href=\"\/contactez-nous\/\"\r\n                    class=\"skoom-btn skoom-btn-primary\"\r\n                >\r\n\r\n                    Demander une d\u00e9mo\r\n\r\n                    <span>\r\n                        \u2192\r\n                    <\/span>\r\n\r\n                <\/a>\r\n\r\n\r\n                <a\r\n                    href=\"\/decouvrir-skoom\/\"\r\n                    class=\"skoom-btn skoom-btn-secondary\"\r\n                >\r\n\r\n                    En savoir plus sur SKOOM\r\n\r\n                    <span>\r\n                        \u2192\r\n                    <\/span>\r\n\r\n                <\/a>\r\n\r\n\r\n                <div class=\"skoomers-trust\">\r\n\r\n                    <span>\r\n\r\n                        <b>\u2713<\/b>\r\n\r\n                        D\u00e9mo personnalis\u00e9e\r\n\r\n                    <\/span>\r\n\r\n\r\n                    <span>\r\n\r\n                        <b>\u2713<\/b>\r\n\r\n                        Sans engagement\r\n\r\n                    <\/span>\r\n\r\n                <\/div>\r\n\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n<\/section>\r\n\r\n\r\n\r\n\r\n\r\n<style>\r\n\r\n\r\n\/* ==========================================================\r\n   VARIABLES\r\n========================================================== *\/\r\n\r\n.skoomers-section {\r\n\r\n    --skoom-black: #090A0F;\r\n    --skoom-card: #101117;\r\n\r\n    --skoom-purple: #8703B3;\r\n    --skoom-purple-bright: #B400F0;\r\n    --skoom-violet: #7047FF;\r\n\r\n    --skoom-text: #111114;\r\n    --skoom-grey: #65656D;\r\n\r\n\r\n    position: relative;\r\n\r\n    width: 100vw !important;\r\n    max-width: 100vw !important;\r\n\r\n    margin-left: calc(50% - 50vw) !important;\r\n    margin-right: calc(50% - 50vw) !important;\r\n\r\n    padding:\r\n        clamp(65px, 6vw, 110px)\r\n        0\r\n        clamp(60px, 6vw, 100px);\r\n\r\n    overflow: hidden;\r\n\r\n    background:\r\n\r\n        radial-gradient(\r\n            circle at 50% 62%,\r\n            rgba(135, 3, 179, 0.035),\r\n            transparent 32%\r\n        ),\r\n\r\n        #FFFFFF;\r\n\r\n    color:\r\n        var(--skoom-text);\r\n\r\n    font-family:\r\n        \"Manrope\",\r\n        Arial,\r\n        sans-serif;\r\n\r\n    box-sizing:\r\n        border-box;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   RESET LOCAL\r\n========================================================== *\/\r\n\r\n.skoomers-section *,\r\n.skoomers-section *::before,\r\n.skoomers-section *::after {\r\n\r\n    box-sizing:\r\n        border-box;\r\n\r\n}\r\n\r\n\r\n.skoomers-section h2,\r\n.skoomers-section h3,\r\n.skoomers-section h4,\r\n.skoomers-section p {\r\n\r\n    margin:\r\n        0;\r\n\r\n}\r\n\r\n\r\n.skoomers-section ul {\r\n\r\n    margin:\r\n        0;\r\n\r\n    padding:\r\n        0;\r\n\r\n    list-style:\r\n        none;\r\n\r\n}\r\n\r\n\r\n.skoomers-section a {\r\n\r\n    text-decoration:\r\n        none;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   CONTENEUR\r\n\r\n   GRAND \u00c9CRAN :\r\n   94 % DE LA LARGEUR\r\n========================================================== *\/\r\n\r\n.skoomers-container {\r\n\r\n    width:\r\n        min(\r\n            94vw,\r\n            1800px\r\n        ) !important;\r\n\r\n    max-width:\r\n        none !important;\r\n\r\n    margin-left:\r\n        auto !important;\r\n\r\n    margin-right:\r\n        auto !important;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   TITRE\r\n========================================================== *\/\r\n\r\n.skoomers-intro {\r\n\r\n    margin-bottom:\r\n        44px;\r\n\r\n    text-align:\r\n        center;\r\n\r\n}\r\n\r\n\r\n.skoomers-eyebrow {\r\n\r\n    margin-bottom:\r\n        12px;\r\n\r\n    color:\r\n        var(--skoom-purple-bright);\r\n\r\n    font-family:\r\n        \"Poppins\",\r\n        sans-serif;\r\n\r\n    font-size:\r\n        11px;\r\n\r\n    font-weight:\r\n        700;\r\n\r\n    letter-spacing:\r\n        .16em;\r\n\r\n    text-transform:\r\n        uppercase;\r\n\r\n}\r\n\r\n\r\n.skoomers-title {\r\n\r\n    color:\r\n        #101014;\r\n\r\n    font-family:\r\n        \"Poppins\",\r\n        sans-serif;\r\n\r\n    font-size:\r\n        clamp(\r\n            28px,\r\n            2.6vw,\r\n            45px\r\n        );\r\n\r\n    font-weight:\r\n        600;\r\n\r\n    line-height:\r\n        1.15;\r\n\r\n    letter-spacing:\r\n        -.04em;\r\n\r\n}\r\n\r\n\r\n.skoomers-title-line {\r\n\r\n    width:\r\n        48px;\r\n\r\n    height:\r\n        3px;\r\n\r\n    margin:\r\n        18px\r\n        auto\r\n        0;\r\n\r\n    border-radius:\r\n        10px;\r\n\r\n    background:\r\n\r\n        linear-gradient(\r\n            90deg,\r\n            var(--skoom-purple),\r\n            var(--skoom-purple-bright)\r\n        );\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   GRID PROFILS\r\n========================================================== *\/\r\n\r\n.skoomers-grid {\r\n\r\n    display:\r\n        grid;\r\n\r\n    grid-template-columns:\r\n        repeat(\r\n            3,\r\n            minmax(0, 1fr)\r\n        );\r\n\r\n    gap:\r\n        clamp(\r\n            16px,\r\n            1.35vw,\r\n            28px\r\n        );\r\n\r\n    width:\r\n        100%;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   CARTES PROFILS\r\n========================================================== *\/\r\n\r\n.skoomer-card {\r\n\r\n    position:\r\n        relative;\r\n\r\n    width:\r\n        100%;\r\n\r\n    min-width:\r\n        0;\r\n\r\n    min-height:\r\n        270px;\r\n\r\n    padding:\r\n        clamp(24px, 1.8vw, 35px);\r\n\r\n    overflow:\r\n        hidden;\r\n\r\n    border:\r\n\r\n        1px solid\r\n        rgba(255,255,255,.10);\r\n\r\n    border-radius:\r\n        18px;\r\n\r\n    background:\r\n\r\n        radial-gradient(\r\n            circle at 10% 0%,\r\n            rgba(135,3,179,.16),\r\n            transparent 38%\r\n        ),\r\n\r\n        linear-gradient(\r\n            145deg,\r\n            #14151B 0%,\r\n            #090A0F 100%\r\n        );\r\n\r\n    color:\r\n        #FFFFFF;\r\n\r\n    box-shadow:\r\n\r\n        0\r\n        14px\r\n        40px\r\n        rgba(10,10,18,.14),\r\n\r\n        inset\r\n        0\r\n        1px\r\n        0\r\n        rgba(255,255,255,.06);\r\n\r\n    transition:\r\n\r\n        transform\r\n        .38s\r\n        cubic-bezier(.2,.8,.2,1),\r\n\r\n        box-shadow\r\n        .38s\r\n        ease,\r\n\r\n        border-color\r\n        .38s\r\n        ease;\r\n\r\n}\r\n\r\n\r\n.skoomer-card::before {\r\n\r\n    content:\r\n        \"\";\r\n\r\n    position:\r\n        absolute;\r\n\r\n    top:\r\n        -100px;\r\n\r\n    left:\r\n        -100px;\r\n\r\n    width:\r\n        240px;\r\n\r\n    height:\r\n        240px;\r\n\r\n    border-radius:\r\n        50%;\r\n\r\n    pointer-events:\r\n        none;\r\n\r\n    background:\r\n\r\n        radial-gradient(\r\n            circle,\r\n            rgba(180,0,240,.12),\r\n            transparent 70%\r\n        );\r\n\r\n}\r\n\r\n\r\n.skoomer-card:hover {\r\n\r\n    transform:\r\n        translateY(-8px)\r\n        scale(1.016);\r\n\r\n    border-color:\r\n        rgba(180,0,240,.48);\r\n\r\n    box-shadow:\r\n\r\n        0\r\n        24px\r\n        60px\r\n        rgba(80,0,120,.17),\r\n\r\n        0\r\n        0\r\n        0\r\n        1px\r\n        rgba(180,0,240,.08);\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   CARD HEADER\r\n========================================================== *\/\r\n\r\n.skoomer-card-header {\r\n\r\n    position:\r\n        relative;\r\n\r\n    z-index:\r\n        2;\r\n\r\n    display:\r\n        flex;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    gap:\r\n        15px;\r\n\r\n    margin-bottom:\r\n        17px;\r\n\r\n}\r\n\r\n\r\n.skoomer-card-header h3 {\r\n\r\n    color:\r\n        #FFFFFF;\r\n\r\n    font-family:\r\n        \"Poppins\",\r\n        sans-serif;\r\n\r\n    font-size:\r\n        clamp(\r\n            17px,\r\n            1.15vw,\r\n            21px\r\n        );\r\n\r\n    font-weight:\r\n        600;\r\n\r\n    line-height:\r\n        1.2;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   PICTOGRAMMES DE R\u00d4LES\r\n   CE NE SONT PAS DES FAVICONS\r\n========================================================== *\/\r\n\r\n.skoomer-role-icon {\r\n\r\n    flex:\r\n        0 0\r\n        49px;\r\n\r\n    width:\r\n        49px;\r\n\r\n    height:\r\n        49px;\r\n\r\n    display:\r\n        flex;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    justify-content:\r\n        center;\r\n\r\n    border:\r\n\r\n        1px solid\r\n        rgba(180,0,240,.30);\r\n\r\n    border-radius:\r\n        14px;\r\n\r\n    background:\r\n\r\n        linear-gradient(\r\n            145deg,\r\n            rgba(135,3,179,.30),\r\n            rgba(112,71,255,.10)\r\n        );\r\n\r\n}\r\n\r\n\r\n.skoomer-role-icon svg {\r\n\r\n    width:\r\n        25px;\r\n\r\n    height:\r\n        25px;\r\n\r\n    fill:\r\n        none;\r\n\r\n    stroke:\r\n        #C34DFF;\r\n\r\n    stroke-width:\r\n        1.7;\r\n\r\n    stroke-linecap:\r\n        round;\r\n\r\n    stroke-linejoin:\r\n        round;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   TEXTE CARTES\r\n========================================================== *\/\r\n\r\n.skoomer-card-description {\r\n\r\n    position:\r\n        relative;\r\n\r\n    z-index:\r\n        2;\r\n\r\n    min-height:\r\n        47px;\r\n\r\n    max-width:\r\n        340px;\r\n\r\n    margin-bottom:\r\n        19px !important;\r\n\r\n    color:\r\n        rgba(255,255,255,.73);\r\n\r\n    font-size:\r\n        clamp(\r\n            12px,\r\n            .84vw,\r\n            14px\r\n        );\r\n\r\n    line-height:\r\n        1.7;\r\n\r\n}\r\n\r\n\r\n.skoomer-card ul {\r\n\r\n    position:\r\n        relative;\r\n\r\n    z-index:\r\n        2;\r\n\r\n    display:\r\n        flex;\r\n\r\n    flex-direction:\r\n        column;\r\n\r\n    gap:\r\n        11px;\r\n\r\n}\r\n\r\n\r\n.skoomer-card li {\r\n\r\n    position:\r\n        relative;\r\n\r\n    padding-left:\r\n        27px;\r\n\r\n    color:\r\n        rgba(255,255,255,.88);\r\n\r\n    font-size:\r\n        clamp(\r\n            12px,\r\n            .8vw,\r\n            13.5px\r\n        );\r\n\r\n    line-height:\r\n        1.5;\r\n\r\n}\r\n\r\n\r\n.skoomer-card li::before {\r\n\r\n    content:\r\n        \"\u2713\";\r\n\r\n    position:\r\n        absolute;\r\n\r\n    left:\r\n        0;\r\n\r\n    top:\r\n        1px;\r\n\r\n    width:\r\n        17px;\r\n\r\n    height:\r\n        17px;\r\n\r\n    display:\r\n        flex;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    justify-content:\r\n        center;\r\n\r\n    border:\r\n\r\n        1px solid\r\n        var(--skoom-purple-bright);\r\n\r\n    border-radius:\r\n        50%;\r\n\r\n    color:\r\n        var(--skoom-purple-bright);\r\n\r\n    font-size:\r\n        9px;\r\n\r\n    font-weight:\r\n        800;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   FAVICON OFFICIEL SKOOM\r\n========================================================== *\/\r\n\r\n.skoom-brand-icon {\r\n\r\n    display:\r\n        flex;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    justify-content:\r\n        center;\r\n\r\n    overflow:\r\n        hidden;\r\n\r\n}\r\n\r\n\r\n.skoom-brand-icon img {\r\n\r\n    display:\r\n        block;\r\n\r\n    width:\r\n        auto;\r\n\r\n    height:\r\n        auto;\r\n\r\n    max-width:\r\n        100%;\r\n\r\n    object-fit:\r\n        contain;\r\n\r\n}\r\n\r\n\r\n.skoom-brand-icon-small {\r\n\r\n    width:\r\n        56px;\r\n\r\n    height:\r\n        56px;\r\n\r\n    margin-bottom:\r\n        24px;\r\n\r\n}\r\n\r\n\r\n.skoom-brand-icon-small img {\r\n\r\n    width:\r\n        44px;\r\n\r\n    max-height:\r\n        44px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   EXP\u00c9RIENCE\r\n========================================================== *\/\r\n\r\n.skoomers-experience {\r\n\r\n    display:\r\n        grid;\r\n\r\n    grid-template-columns:\r\n\r\n        minmax(260px, .65fr)\r\n\r\n        minmax(0, 1.9fr);\r\n\r\n    align-items:\r\n        center;\r\n\r\n    gap:\r\n        clamp(\r\n            40px,\r\n            5vw,\r\n            95px\r\n        );\r\n\r\n    margin-top:\r\n        clamp(\r\n            55px,\r\n            5vw,\r\n            90px\r\n        );\r\n\r\n    margin-bottom:\r\n        clamp(\r\n            55px,\r\n            5vw,\r\n            85px\r\n        );\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   TEXTE EXPERIENCE\r\n========================================================== *\/\r\n\r\n.skoomers-experience-copy h2 {\r\n\r\n    max-width:\r\n        420px;\r\n\r\n    margin-bottom:\r\n        22px !important;\r\n\r\n    color:\r\n        #101014;\r\n\r\n    font-family:\r\n        \"Poppins\",\r\n        sans-serif;\r\n\r\n    font-size:\r\n        clamp(\r\n            28px,\r\n            2.7vw,\r\n            45px\r\n        );\r\n\r\n    font-weight:\r\n        600;\r\n\r\n    line-height:\r\n        1.15;\r\n\r\n    letter-spacing:\r\n        -.04em;\r\n\r\n}\r\n\r\n\r\n.skoomers-experience-copy p {\r\n\r\n    max-width:\r\n        430px;\r\n\r\n    color:\r\n        #52525A;\r\n\r\n    font-size:\r\n        clamp(\r\n            13px,\r\n            .9vw,\r\n            15px\r\n        );\r\n\r\n    line-height:\r\n        1.8;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   DASHBOARD WRAPPER\r\n========================================================== *\/\r\n\r\n.dashboard-wrapper {\r\n\r\n    position:\r\n        relative;\r\n\r\n    width:\r\n        100%;\r\n\r\n    min-width:\r\n        0;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   PERSONAS\r\n========================================================== *\/\r\n\r\n.dashboard-personas {\r\n\r\n    position:\r\n        relative;\r\n\r\n    z-index:\r\n        5;\r\n\r\n    display:\r\n        flex;\r\n\r\n    justify-content:\r\n        center;\r\n\r\n    gap:\r\n        9px;\r\n\r\n    margin-bottom:\r\n        11px;\r\n\r\n}\r\n\r\n\r\n.dashboard-personas span {\r\n\r\n    display:\r\n        inline-flex;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    gap:\r\n        7px;\r\n\r\n    min-height:\r\n        29px;\r\n\r\n    padding:\r\n        0\r\n        12px;\r\n\r\n    border-radius:\r\n        8px;\r\n\r\n    background:\r\n        #FFFFFF;\r\n\r\n    color:\r\n        #292830;\r\n\r\n    font-size:\r\n        9px;\r\n\r\n    font-weight:\r\n        700;\r\n\r\n    box-shadow:\r\n\r\n        0\r\n        7px\r\n        22px\r\n        rgba(42,0,70,.10);\r\n\r\n}\r\n\r\n\r\n.dashboard-personas i {\r\n\r\n    width:\r\n        7px;\r\n\r\n    height:\r\n        7px;\r\n\r\n    border-radius:\r\n        50%;\r\n\r\n    background:\r\n\r\n        linear-gradient(\r\n            135deg,\r\n            var(--skoom-purple),\r\n            var(--skoom-purple-bright)\r\n        );\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   DASHBOARD PRINCIPAL\r\n========================================================== *\/\r\n\r\n.skoom-dashboard {\r\n\r\n    position:\r\n        relative;\r\n\r\n    display:\r\n        grid;\r\n\r\n    grid-template-columns:\r\n\r\n        58px\r\n\r\n        minmax(0, 1fr)\r\n\r\n        clamp(\r\n            130px,\r\n            10vw,\r\n            180px\r\n        );\r\n\r\n    width:\r\n        100%;\r\n\r\n    min-height:\r\n        370px;\r\n\r\n    overflow:\r\n        hidden;\r\n\r\n    border:\r\n\r\n        1px solid\r\n        rgba(255,255,255,.10);\r\n\r\n    border-radius:\r\n        16px;\r\n\r\n    background:\r\n        #090A0F;\r\n\r\n    box-shadow:\r\n\r\n        0\r\n        30px\r\n        80px\r\n        rgba(20,0,35,.20);\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   SIDEBAR\r\n========================================================== *\/\r\n\r\n.dashboard-sidebar {\r\n\r\n    display:\r\n        flex;\r\n\r\n    flex-direction:\r\n        column;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    padding:\r\n        15px\r\n        8px;\r\n\r\n    border-right:\r\n\r\n        1px solid\r\n        rgba(255,255,255,.06);\r\n\r\n    background:\r\n        #0C0D13;\r\n\r\n}\r\n\r\n\r\n.dashboard-brand {\r\n\r\n    width:\r\n        32px;\r\n\r\n    height:\r\n        32px;\r\n\r\n    display:\r\n        flex;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    justify-content:\r\n        center;\r\n\r\n    margin-bottom:\r\n        19px;\r\n\r\n}\r\n\r\n\r\n.dashboard-brand img {\r\n\r\n    display:\r\n        block;\r\n\r\n    width:\r\n        26px;\r\n\r\n    height:\r\n        26px;\r\n\r\n    object-fit:\r\n        contain;\r\n\r\n}\r\n\r\n\r\n.sidebar-icon {\r\n\r\n    width:\r\n        29px;\r\n\r\n    height:\r\n        29px;\r\n\r\n    display:\r\n        flex;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    justify-content:\r\n        center;\r\n\r\n    margin-bottom:\r\n        9px;\r\n\r\n    border-radius:\r\n        8px;\r\n\r\n    color:\r\n        rgba(255,255,255,.40);\r\n\r\n}\r\n\r\n\r\n.sidebar-icon svg {\r\n\r\n    width:\r\n        15px;\r\n\r\n    height:\r\n        15px;\r\n\r\n    fill:\r\n        none;\r\n\r\n    stroke:\r\n        currentColor;\r\n\r\n    stroke-width:\r\n        1.6;\r\n\r\n    stroke-linecap:\r\n        round;\r\n\r\n    stroke-linejoin:\r\n        round;\r\n\r\n}\r\n\r\n\r\n.sidebar-icon.active {\r\n\r\n    background:\r\n\r\n        linear-gradient(\r\n            135deg,\r\n            #7200CA,\r\n            #A832FF\r\n        );\r\n\r\n    color:\r\n        #FFFFFF;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   DASHBOARD MAIN\r\n========================================================== *\/\r\n\r\n.dashboard-main {\r\n\r\n    min-width:\r\n        0;\r\n\r\n    padding:\r\n        clamp(\r\n            15px,\r\n            1.3vw,\r\n            23px\r\n        );\r\n\r\n}\r\n\r\n\r\n.dashboard-topbar {\r\n\r\n    display:\r\n        flex;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    justify-content:\r\n        space-between;\r\n\r\n    margin-bottom:\r\n        17px;\r\n\r\n}\r\n\r\n\r\n.dashboard-small-label {\r\n\r\n    color:\r\n        #A839FF;\r\n\r\n    font-size:\r\n        7px;\r\n\r\n    font-weight:\r\n        800;\r\n\r\n    letter-spacing:\r\n        .10em;\r\n\r\n}\r\n\r\n\r\n.dashboard-topbar h4 {\r\n\r\n    margin-top:\r\n        4px !important;\r\n\r\n    color:\r\n        #FFFFFF;\r\n\r\n    font-size:\r\n        12px;\r\n\r\n}\r\n\r\n\r\n.dashboard-user {\r\n\r\n    width:\r\n        27px;\r\n\r\n    height:\r\n        27px;\r\n\r\n    display:\r\n        flex;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    justify-content:\r\n        center;\r\n\r\n    border-radius:\r\n        50%;\r\n\r\n    background:\r\n        #191A22;\r\n\r\n    color:\r\n        #FFFFFF;\r\n\r\n    font-size:\r\n        7px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   KPI\r\n========================================================== *\/\r\n\r\n.dashboard-kpi-grid {\r\n\r\n    display:\r\n        grid;\r\n\r\n    grid-template-columns:\r\n        repeat(\r\n            3,\r\n            minmax(0,1fr)\r\n        );\r\n\r\n    gap:\r\n        10px;\r\n\r\n}\r\n\r\n\r\n.dashboard-kpi {\r\n\r\n    min-height:\r\n        78px;\r\n\r\n    padding:\r\n        12px;\r\n\r\n    border:\r\n\r\n        1px solid\r\n        rgba(255,255,255,.035);\r\n\r\n    border-radius:\r\n        8px;\r\n\r\n    background:\r\n        #13141A;\r\n\r\n}\r\n\r\n\r\n.dashboard-kpi span {\r\n\r\n    display:\r\n        block;\r\n\r\n    margin-bottom:\r\n        6px;\r\n\r\n    color:\r\n        rgba(255,255,255,.52);\r\n\r\n    font-size:\r\n        7px;\r\n\r\n}\r\n\r\n\r\n.dashboard-kpi strong {\r\n\r\n    display:\r\n        block;\r\n\r\n    color:\r\n        #FFFFFF;\r\n\r\n    font-family:\r\n        \"Poppins\",\r\n        sans-serif;\r\n\r\n    font-size:\r\n        clamp(\r\n            18px,\r\n            1.45vw,\r\n            26px\r\n        );\r\n\r\n    font-weight:\r\n        500;\r\n\r\n    line-height:\r\n        1.1;\r\n\r\n}\r\n\r\n\r\n.dashboard-kpi small {\r\n\r\n    display:\r\n        block;\r\n\r\n    margin-top:\r\n        5px;\r\n\r\n    color:\r\n        #36BF84;\r\n\r\n    font-size:\r\n        6.5px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   DATA GRID\r\n========================================================== *\/\r\n\r\n.dashboard-data-grid {\r\n\r\n    display:\r\n        grid;\r\n\r\n    grid-template-columns:\r\n        1.75fr .8fr;\r\n\r\n    gap:\r\n        10px;\r\n\r\n    margin-top:\r\n        10px;\r\n\r\n}\r\n\r\n\r\n.dashboard-chart,\r\n.dashboard-donut-card {\r\n\r\n    padding:\r\n        12px;\r\n\r\n    border-radius:\r\n        8px;\r\n\r\n    background:\r\n        #121319;\r\n\r\n}\r\n\r\n\r\n.dashboard-widget-title {\r\n\r\n    color:\r\n        rgba(255,255,255,.72);\r\n\r\n    font-size:\r\n        7px;\r\n\r\n    font-weight:\r\n        600;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   COURBE\r\n========================================================== *\/\r\n\r\n.line-chart {\r\n\r\n    display:\r\n        block;\r\n\r\n    width:\r\n        100%;\r\n\r\n    height:\r\n        135px;\r\n\r\n    margin-top:\r\n        8px;\r\n\r\n}\r\n\r\n\r\n.chart-grid {\r\n\r\n    stroke:\r\n        rgba(255,255,255,.045);\r\n\r\n    stroke-width:\r\n        1;\r\n\r\n}\r\n\r\n\r\n.chart-line {\r\n\r\n    fill:\r\n        none;\r\n\r\n    stroke:\r\n        #9B2CFF;\r\n\r\n    stroke-width:\r\n        3;\r\n\r\n    stroke-linecap:\r\n        round;\r\n\r\n    stroke-linejoin:\r\n        round;\r\n\r\n}\r\n\r\n\r\n.chart-area {\r\n\r\n    fill:\r\n        url(#skoomChartFill);\r\n\r\n}\r\n\r\n\r\n.chart-months {\r\n\r\n    display:\r\n        flex;\r\n\r\n    justify-content:\r\n        space-between;\r\n\r\n    color:\r\n        rgba(255,255,255,.30);\r\n\r\n    font-size:\r\n        6px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   DONUT\r\n========================================================== *\/\r\n\r\n.dashboard-donut-card {\r\n\r\n    display:\r\n        flex;\r\n\r\n    flex-direction:\r\n        column;\r\n\r\n}\r\n\r\n\r\n.dashboard-donut {\r\n\r\n    position:\r\n        relative;\r\n\r\n    width:\r\n        112px;\r\n\r\n    max-width:\r\n        100%;\r\n\r\n    aspect-ratio:\r\n        1 \/ 1;\r\n\r\n    margin:\r\n        auto;\r\n\r\n    border-radius:\r\n        50%;\r\n\r\n    background:\r\n\r\n        conic-gradient(\r\n            #A42AFF 0deg 215deg,\r\n            #6846DF 215deg 285deg,\r\n            #343545 285deg 360deg\r\n        );\r\n\r\n}\r\n\r\n\r\n.dashboard-donut::after {\r\n\r\n    content:\r\n        \"\";\r\n\r\n    position:\r\n        absolute;\r\n\r\n    inset:\r\n        24px;\r\n\r\n    border-radius:\r\n        50%;\r\n\r\n    background:\r\n        #121319;\r\n\r\n}\r\n\r\n\r\n.dashboard-donut-center {\r\n\r\n    position:\r\n        absolute;\r\n\r\n    z-index:\r\n        2;\r\n\r\n    inset:\r\n        0;\r\n\r\n    display:\r\n        flex;\r\n\r\n    flex-direction:\r\n        column;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    justify-content:\r\n        center;\r\n\r\n}\r\n\r\n\r\n.dashboard-donut-center strong {\r\n\r\n    color:\r\n        #FFFFFF;\r\n\r\n    font-size:\r\n        8px;\r\n\r\n}\r\n\r\n\r\n.dashboard-donut-center span {\r\n\r\n    color:\r\n        rgba(255,255,255,.55);\r\n\r\n    font-size:\r\n        7px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   PANEL ENTIT\u00c9S\r\n========================================================== *\/\r\n\r\n.dashboard-panel {\r\n\r\n    padding:\r\n        18px\r\n        14px;\r\n\r\n    border-left:\r\n\r\n        1px solid\r\n        rgba(255,255,255,.06);\r\n\r\n    background:\r\n        #111217;\r\n\r\n}\r\n\r\n\r\n.dashboard-panel-title {\r\n\r\n    margin-bottom:\r\n        19px;\r\n\r\n    color:\r\n        #FFFFFF;\r\n\r\n    font-size:\r\n        10px;\r\n\r\n    font-weight:\r\n        700;\r\n\r\n}\r\n\r\n\r\n.dashboard-panel-item {\r\n\r\n    display:\r\n        flex;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    gap:\r\n        7px;\r\n\r\n    padding:\r\n        8px\r\n        0;\r\n\r\n    border-bottom:\r\n\r\n        1px solid\r\n        rgba(255,255,255,.035);\r\n\r\n    color:\r\n        rgba(255,255,255,.55);\r\n\r\n    font-size:\r\n        7px;\r\n\r\n}\r\n\r\n\r\n.panel-dot {\r\n\r\n    width:\r\n        6px;\r\n\r\n    height:\r\n        6px;\r\n\r\n    border-radius:\r\n        50%;\r\n\r\n    background:\r\n        #9D2AFF;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   CTA FINAL\r\n========================================================== *\/\r\n\r\n.skoomers-cta {\r\n\r\n    position:\r\n        relative;\r\n\r\n    display:\r\n        grid;\r\n\r\n    grid-template-columns:\r\n\r\n        75px\r\n\r\n        minmax(0,1fr)\r\n\r\n        auto;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    gap:\r\n        28px;\r\n\r\n    width:\r\n        100%;\r\n\r\n    padding:\r\n        clamp(\r\n            26px,\r\n            2.2vw,\r\n            38px\r\n        );\r\n\r\n    overflow:\r\n        hidden;\r\n\r\n    border:\r\n\r\n        1px solid\r\n        rgba(135,3,179,.08);\r\n\r\n    border-radius:\r\n        18px;\r\n\r\n    background:\r\n\r\n        linear-gradient(\r\n            100deg,\r\n            #F9F6FF 0%,\r\n            #F3EAFF 52%,\r\n            #FAF7FF 100%\r\n        );\r\n\r\n}\r\n\r\n\r\n.skoomers-cta::before {\r\n\r\n    content:\r\n        \"\";\r\n\r\n    position:\r\n        absolute;\r\n\r\n    top:\r\n        -130px;\r\n\r\n    right:\r\n        130px;\r\n\r\n    width:\r\n        330px;\r\n\r\n    height:\r\n        230px;\r\n\r\n    border-radius:\r\n        50%;\r\n\r\n    background:\r\n\r\n        radial-gradient(\r\n            circle,\r\n            rgba(135,3,179,.08),\r\n            transparent 68%\r\n        );\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   FAVICON CTA\r\n========================================================== *\/\r\n\r\n.skoomers-cta-logo {\r\n\r\n    position:\r\n        relative;\r\n\r\n    z-index:\r\n        2;\r\n\r\n    width:\r\n        64px;\r\n\r\n    height:\r\n        64px;\r\n\r\n    display:\r\n        flex;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    justify-content:\r\n        center;\r\n\r\n}\r\n\r\n\r\n.skoomers-cta-logo img {\r\n\r\n    display:\r\n        block;\r\n\r\n    width:\r\n        54px;\r\n\r\n    height:\r\n        54px;\r\n\r\n    object-fit:\r\n        contain;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   CTA TEXT\r\n========================================================== *\/\r\n\r\n.skoomers-cta-content {\r\n\r\n    position:\r\n        relative;\r\n\r\n    z-index:\r\n        2;\r\n\r\n}\r\n\r\n\r\n.skoomers-cta-content h2 {\r\n\r\n    margin-bottom:\r\n        8px !important;\r\n\r\n    color:\r\n        #111114;\r\n\r\n    font-family:\r\n        \"Poppins\",\r\n        sans-serif;\r\n\r\n    font-size:\r\n        clamp(\r\n            21px,\r\n            1.7vw,\r\n            30px\r\n        );\r\n\r\n    line-height:\r\n        1.25;\r\n\r\n    letter-spacing:\r\n        -.03em;\r\n\r\n}\r\n\r\n\r\n.skoomers-cta-content p {\r\n\r\n    max-width:\r\n        560px;\r\n\r\n    color:\r\n        #55535B;\r\n\r\n    font-size:\r\n        12.5px;\r\n\r\n    line-height:\r\n        1.65;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   CTA ACTIONS\r\n========================================================== *\/\r\n\r\n.skoomers-cta-actions {\r\n\r\n    position:\r\n        relative;\r\n\r\n    z-index:\r\n        2;\r\n\r\n    display:\r\n        grid;\r\n\r\n    grid-template-columns:\r\n        auto auto;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    gap:\r\n        11px\r\n        12px;\r\n\r\n}\r\n\r\n\r\n.skoom-btn {\r\n\r\n    min-height:\r\n        45px;\r\n\r\n    display:\r\n        inline-flex;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    justify-content:\r\n        center;\r\n\r\n    gap:\r\n        14px;\r\n\r\n    padding:\r\n        0\r\n        22px;\r\n\r\n    border-radius:\r\n        8px;\r\n\r\n    font-size:\r\n        11px;\r\n\r\n    font-weight:\r\n        700;\r\n\r\n    white-space:\r\n        nowrap;\r\n\r\n    transition:\r\n\r\n        transform\r\n        .3s\r\n        ease,\r\n\r\n        box-shadow\r\n        .3s\r\n        ease,\r\n\r\n        background\r\n        .3s\r\n        ease;\r\n\r\n}\r\n\r\n\r\n.skoom-btn:hover {\r\n\r\n    transform:\r\n        translateY(-3px);\r\n\r\n}\r\n\r\n\r\n.skoom-btn-primary {\r\n\r\n    color:\r\n        #FFFFFF !important;\r\n\r\n    background:\r\n\r\n        linear-gradient(\r\n            135deg,\r\n            #7821EC,\r\n            #9D20ED\r\n        );\r\n\r\n    box-shadow:\r\n\r\n        0\r\n        12px\r\n        30px\r\n        rgba(135,3,179,.18);\r\n\r\n}\r\n\r\n\r\n.skoom-btn-primary:hover {\r\n\r\n    box-shadow:\r\n\r\n        0\r\n        18px\r\n        35px\r\n        rgba(135,3,179,.28);\r\n\r\n}\r\n\r\n\r\n.skoom-btn-secondary {\r\n\r\n    color:\r\n        #7012BD !important;\r\n\r\n    background:\r\n        rgba(255,255,255,.28);\r\n\r\n}\r\n\r\n\r\n.skoom-btn-secondary:hover {\r\n\r\n    background:\r\n        #FFFFFF;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   TRUST\r\n========================================================== *\/\r\n\r\n.skoomers-trust {\r\n\r\n    grid-column:\r\n        1 \/ -1;\r\n\r\n    display:\r\n        flex;\r\n\r\n    justify-content:\r\n        center;\r\n\r\n    gap:\r\n        25px;\r\n\r\n    margin-top:\r\n        2px;\r\n\r\n}\r\n\r\n\r\n.skoomers-trust span {\r\n\r\n    display:\r\n        flex;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    gap:\r\n        6px;\r\n\r\n    color:\r\n        #5D5265;\r\n\r\n    font-size:\r\n        9px;\r\n\r\n}\r\n\r\n\r\n.skoomers-trust b {\r\n\r\n    width:\r\n        18px;\r\n\r\n    height:\r\n        18px;\r\n\r\n    display:\r\n        inline-flex;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    justify-content:\r\n        center;\r\n\r\n    border:\r\n\r\n        1px solid\r\n        #8F27E9;\r\n\r\n    border-radius:\r\n        50%;\r\n\r\n    color:\r\n        #8F27E9;\r\n\r\n    font-size:\r\n        9px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   ANIMATION\r\n========================================================== *\/\r\n\r\n.skoomer-card,\r\n.skoomers-experience-copy,\r\n.dashboard-wrapper,\r\n.skoomers-cta {\r\n\r\n    opacity:\r\n        0;\r\n\r\n    transform:\r\n        translateY(28px);\r\n\r\n    transition:\r\n\r\n        opacity\r\n        .65s\r\n        ease,\r\n\r\n        transform\r\n        .65s\r\n        cubic-bezier(.2,.8,.2,1);\r\n\r\n}\r\n\r\n\r\n.skoomer-card.skoom-visible,\r\n.skoomers-experience-copy.skoom-visible,\r\n.dashboard-wrapper.skoom-visible,\r\n.skoomers-cta.skoom-visible {\r\n\r\n    opacity:\r\n        1;\r\n\r\n    transform:\r\n        translateY(0);\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   GRAND \u00c9CRAN\r\n========================================================== *\/\r\n\r\n@media (min-width: 1600px) {\r\n\r\n    .skoomers-container {\r\n\r\n        width:\r\n            min(\r\n                94vw,\r\n                1800px\r\n            ) !important;\r\n\r\n    }\r\n\r\n\r\n    .skoomer-card {\r\n\r\n        min-height:\r\n            290px;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   \u00c9CRANS 2000PX+\r\n========================================================== *\/\r\n\r\n@media (min-width: 2000px) {\r\n\r\n    .skoomers-container {\r\n\r\n        width:\r\n            min(\r\n                92vw,\r\n                2100px\r\n            ) !important;\r\n\r\n    }\r\n\r\n\r\n    .skoomer-card {\r\n\r\n        min-height:\r\n            310px;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   TABLETTE\r\n========================================================== *\/\r\n\r\n@media (max-width: 1024px) {\r\n\r\n    .skoomers-container {\r\n\r\n        width:\r\n            calc(100% - 48px) !important;\r\n\r\n    }\r\n\r\n\r\n    .skoomers-grid {\r\n\r\n        grid-template-columns:\r\n            repeat(\r\n                2,\r\n                minmax(0,1fr)\r\n            );\r\n\r\n    }\r\n\r\n\r\n    .skoomers-experience {\r\n\r\n        grid-template-columns:\r\n            1fr;\r\n\r\n        gap:\r\n            36px;\r\n\r\n    }\r\n\r\n\r\n    .skoomers-experience-copy {\r\n\r\n        text-align:\r\n            center;\r\n\r\n    }\r\n\r\n\r\n    .skoomers-experience-copy h2,\r\n    .skoomers-experience-copy p {\r\n\r\n        margin-left:\r\n            auto;\r\n\r\n        margin-right:\r\n            auto;\r\n\r\n    }\r\n\r\n\r\n    .skoom-brand-icon-small {\r\n\r\n        margin-left:\r\n            auto;\r\n\r\n        margin-right:\r\n            auto;\r\n\r\n    }\r\n\r\n\r\n    .skoomers-cta {\r\n\r\n        grid-template-columns:\r\n\r\n            65px\r\n\r\n            minmax(0,1fr);\r\n\r\n    }\r\n\r\n\r\n    .skoomers-cta-actions {\r\n\r\n        grid-column:\r\n            1 \/ -1;\r\n\r\n        padding-left:\r\n            92px;\r\n\r\n        justify-content:\r\n            start;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   MOBILE\r\n========================================================== *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n    .skoomers-section {\r\n\r\n        padding-top:\r\n            55px;\r\n\r\n        padding-bottom:\r\n            45px;\r\n\r\n    }\r\n\r\n\r\n    .skoomers-container {\r\n\r\n        width:\r\n            calc(100% - 30px) !important;\r\n\r\n    }\r\n\r\n\r\n    .skoomers-grid {\r\n\r\n        grid-template-columns:\r\n            1fr;\r\n\r\n        gap:\r\n            14px;\r\n\r\n    }\r\n\r\n\r\n    .skoomer-card {\r\n\r\n        min-height:\r\n            auto;\r\n\r\n        padding:\r\n            23px\r\n            20px;\r\n\r\n    }\r\n\r\n\r\n    .skoomer-card-description {\r\n\r\n        min-height:\r\n            0;\r\n\r\n    }\r\n\r\n\r\n    .dashboard-personas {\r\n\r\n        justify-content:\r\n            flex-start;\r\n\r\n        overflow-x:\r\n            auto;\r\n\r\n        padding-bottom:\r\n            4px;\r\n\r\n        scrollbar-width:\r\n            none;\r\n\r\n    }\r\n\r\n\r\n    .dashboard-personas::-webkit-scrollbar {\r\n\r\n        display:\r\n            none;\r\n\r\n    }\r\n\r\n\r\n    .skoom-dashboard {\r\n\r\n        grid-template-columns:\r\n\r\n            43px\r\n\r\n            minmax(0,1fr);\r\n\r\n        min-height:\r\n            auto;\r\n\r\n    }\r\n\r\n\r\n    .dashboard-panel {\r\n\r\n        display:\r\n            none;\r\n\r\n    }\r\n\r\n\r\n    .dashboard-main {\r\n\r\n        padding:\r\n            12px;\r\n\r\n    }\r\n\r\n\r\n    .dashboard-kpi-grid {\r\n\r\n        grid-template-columns:\r\n            1fr;\r\n\r\n    }\r\n\r\n\r\n    .dashboard-data-grid {\r\n\r\n        grid-template-columns:\r\n            1fr;\r\n\r\n    }\r\n\r\n\r\n    .dashboard-donut-card {\r\n\r\n        display:\r\n            none;\r\n\r\n    }\r\n\r\n\r\n    .line-chart {\r\n\r\n        height:\r\n            105px;\r\n\r\n    }\r\n\r\n\r\n    .skoomers-cta {\r\n\r\n        grid-template-columns:\r\n            1fr;\r\n\r\n        padding:\r\n            27px\r\n            20px;\r\n\r\n        text-align:\r\n            center;\r\n\r\n    }\r\n\r\n\r\n    .skoomers-cta-logo {\r\n\r\n        margin:\r\n            0\r\n            auto;\r\n\r\n    }\r\n\r\n\r\n    .skoomers-cta-actions {\r\n\r\n        grid-column:\r\n            auto;\r\n\r\n        grid-template-columns:\r\n            1fr;\r\n\r\n        width:\r\n            100%;\r\n\r\n        padding-left:\r\n            0;\r\n\r\n    }\r\n\r\n\r\n    .skoomers-trust {\r\n\r\n        flex-wrap:\r\n            wrap;\r\n\r\n        gap:\r\n            12px\r\n            18px;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   PETITS MOBILES\r\n========================================================== *\/\r\n\r\n@media (max-width: 420px) {\r\n\r\n    .skoomers-title {\r\n\r\n        font-size:\r\n            27px;\r\n\r\n    }\r\n\r\n\r\n    .skoomers-experience-copy h2 {\r\n\r\n        font-size:\r\n            28px;\r\n\r\n    }\r\n\r\n\r\n    .skoomer-card-header h3 {\r\n\r\n        font-size:\r\n            17px;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================================\r\n   ANTI D\u00c9BORDEMENT HORIZONTAL\r\n========================================================== *\/\r\n\r\nhtml,\r\nbody {\r\n\r\n    max-width:\r\n        100%;\r\n\r\n    overflow-x:\r\n        clip;\r\n\r\n}\r\n\r\n\r\n@supports not (overflow: clip) {\r\n\r\n    html,\r\n    body {\r\n\r\n        overflow-x:\r\n            hidden;\r\n\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n\r\n\r\n\r\n<script>\r\n\r\n\/* ==========================================================\r\n   SKOOM\r\n   ANIMATION AU SCROLL\r\n========================================================== *\/\r\n\r\n(function () {\r\n\r\n\r\n    const elements =\r\n        document.querySelectorAll(\r\n\r\n            '.skoomer-card,' +\r\n            '.skoomers-experience-copy,' +\r\n            '.dashboard-wrapper,' +\r\n            '.skoomers-cta'\r\n\r\n        );\r\n\r\n\r\n    if (!('IntersectionObserver' in window)) {\r\n\r\n        elements.forEach(function(element) {\r\n\r\n            element.classList.add(\r\n                'skoom-visible'\r\n            );\r\n\r\n        });\r\n\r\n        return;\r\n\r\n    }\r\n\r\n\r\n    const observer =\r\n        new IntersectionObserver(\r\n\r\n            function(entries) {\r\n\r\n                entries.forEach(\r\n                    function(entry) {\r\n\r\n                        if (entry.isIntersecting) {\r\n\r\n                            entry.target.classList.add(\r\n                                'skoom-visible'\r\n                            );\r\n\r\n                        }\r\n\r\n                    }\r\n                );\r\n\r\n            },\r\n\r\n            {\r\n\r\n                threshold:\r\n                    0.10,\r\n\r\n                rootMargin:\r\n                    '0px 0px -5% 0px'\r\n\r\n            }\r\n\r\n        );\r\n\r\n\r\n    elements.forEach(\r\n        function(element, index) {\r\n\r\n            element.style.transitionDelay =\r\n                Math.min(\r\n                    index % 3,\r\n                    2\r\n                ) * 80 + 'ms';\r\n\r\n            observer.observe(\r\n                element\r\n            );\r\n\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>La bonne information, au bon niveau de d\u00e9cision. Direction, RH, finance, managers ou responsables locaux : chaque Skoomer acc\u00e8de \u00e0 la vision, aux actions et aux validations qui correspondent \u00e0 son r\u00f4le. TOUS CONNECT\u00c9S, TOUS ALIGN\u00c9S Des r\u00f4les cl\u00e9s, une plateforme commune PDG &amp; Direction Pilotez la strat\u00e9gie RH et prenez des d\u00e9cisions \u00e9clair\u00e9es. Vision&#8230;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_theme","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-23","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/skoom.fr\/en\/wp-json\/wp\/v2\/pages\/23","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=23"}],"version-history":[{"count":332,"href":"https:\/\/skoom.fr\/en\/wp-json\/wp\/v2\/pages\/23\/revisions"}],"predecessor-version":[{"id":1734,"href":"https:\/\/skoom.fr\/en\/wp-json\/wp\/v2\/pages\/23\/revisions\/1734"}],"wp:attachment":[{"href":"https:\/\/skoom.fr\/en\/wp-json\/wp\/v2\/media?parent=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}