{"id":9,"date":"2026-07-31T18:46:28","date_gmt":"2026-07-31T18:46:28","guid":{"rendered":"http:\/\/scale-group.fr\/?page_id=9"},"modified":"2026-09-23T12:57:37","modified_gmt":"2026-09-23T12:57:37","slug":"accueil","status":"publish","type":"page","link":"https:\/\/scale-group.fr\/","title":{"rendered":"ACCUEIL"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"9\" class=\"elementor elementor-9\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8ded9bc e-con-full e-flex e-con e-parent\" data-id=\"8ded9bc\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9a246cc elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"9a246cc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<!-- =========================================================\n    SCALE GROUP \u2014 MODULE GLOBAL (version compl\u00e8te, pr\u00eate \u00e0 coller)\n    Remplace ENTI\u00c8REMENT le contenu de ton widget \"module global\" par ceci.\n    \u26a0\ufe0f Une seule fois sur la page, avant le Hero.\n========================================================= -->\n\n<style>\n\n\/* ===== Animations de titres \u2014 8 styles, chacun avec son propre effet au survol ===== *\/\n\n[class*=\"tfx-\"]{ will-change:transform,opacity,filter; }\n\n\/* 1 \u2014 Flou vers net *\/\n.tfx-1{\n    opacity:0;\n    filter:blur(14px);\n    transform:translateY(24px);\n    transition:opacity 1s ease, filter 1s ease, transform 1s ease;\n}\n.tfx-1.tfx-in{ opacity:1; filter:blur(0); transform:translateY(0); }\n\n\/* 2 \u2014 Rideau qui se l\u00e8ve (clip-path) + reflet dor\u00e9 au survol *\/\n.tfx-2{\n    position:relative;\n    clip-path:inset(0 100% 0 0);\n    transition:clip-path 1.1s cubic-bezier(.2,.8,.2,1);\n}\n.tfx-2.tfx-in{ clip-path:inset(0 0% 0 0); }\n.tfx-2::after{\n    content:\"\";\n    position:absolute;\n    top:0; left:-150%;\n    width:55%; height:100%;\n    background:linear-gradient(115deg,transparent,rgba(232,197,108,.4),transparent);\n    transform:skewX(-20deg);\n    transition:left .8s ease;\n    pointer-events:none;\n}\n.tfx-2:hover::after{ left:150%; }\n\n\/* 3 \u2014 Rebond \u00e9lastique *\/\n.tfx-3{\n    opacity:0;\n    transform:scale(.85);\n    transition:transform .9s cubic-bezier(.34,1.56,.64,1), opacity .7s ease;\n}\n.tfx-3.tfx-in{ opacity:1; transform:scale(1); }\n\n\/* 4 \u2014 Glissement depuis la gauche + accent dor\u00e9 au survol *\/\n.tfx-4{\n    position:relative;\n    opacity:0;\n    transform:translateX(-40px);\n    transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1);\n}\n.tfx-4.tfx-in{ opacity:1; transform:translateX(0); }\n.tfx-4::before{\n    content:\"\";\n    position:absolute;\n    left:2px; bottom:-10px;\n    width:56px; height:3px;\n    background:linear-gradient(90deg,#E8C56C,#FFF0B8);\n    transform:scaleX(0);\n    transform-origin:left;\n    transition:transform .4s ease;\n}\n.tfx-4:hover::before{ transform:scaleX(1); }\n\n\/* 5 \u2014 Glissement depuis la droite + espacement au survol *\/\n.tfx-5{\n    opacity:0;\n    transform:translateX(40px);\n    transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1);\n}\n.tfx-5.tfx-in{ opacity:1; transform:translateX(0); }\n\n\/* 6 \u2014 Bascule 3D (bookcase) + l\u00e9ger tilt au survol *\/\n.tfx-6{\n    opacity:0;\n    transform:perspective(700px) rotateX(55deg);\n    transform-origin:top center;\n    transition:opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1);\n}\n.tfx-6.tfx-in{ opacity:1; transform:perspective(700px) rotateX(0deg); }\n\n\/* 7 \u2014 Espacement des lettres qui se resserre *\/\n.tfx-7{\n    opacity:0;\n    letter-spacing:14px;\n    transition:opacity 1s ease, letter-spacing 1s cubic-bezier(.2,.8,.2,1);\n}\n.tfx-7.tfx-in{ opacity:1; letter-spacing:normal; }\n\n\/* 8 \u2014 Lueur qui se pose (glow) *\/\n.tfx-8{\n    opacity:0;\n    transform:scale(.92);\n    text-shadow:0 0 0 rgba(232,197,108,0);\n    transition:opacity .9s ease, transform .9s ease, text-shadow 1.1s ease;\n}\n.tfx-8.tfx-in{ opacity:1; transform:scale(1); text-shadow:0 0 30px rgba(232,197,108,.35); }\n\n\/* ===== Effets au survol \u2014 apr\u00e8s l'apparition, distincts par style ===== *\/\n.tfx-1.tfx-in:hover{ filter:brightness(1.15); transform:scale(1.015); }\n.tfx-3.tfx-in:hover{ transform:scale(1.045); }\n.tfx-5.tfx-in:hover{ letter-spacing:1px; }\n.tfx-6.tfx-in:hover{ transform:perspective(700px) rotateX(-5deg); }\n.tfx-7.tfx-in:hover{ letter-spacing:1.5px; }\n.tfx-8.tfx-in:hover{ text-shadow:0 0 42px rgba(232,197,108,.6); transform:scale(1.02); }\n\n.tfx-1, .tfx-3, .tfx-5, .tfx-6, .tfx-7, .tfx-8{ transition-property:opacity,filter,transform,letter-spacing,text-shadow; }\n.tfx-1:hover, .tfx-3:hover, .tfx-5:hover, .tfx-6:hover, .tfx-7:hover, .tfx-8:hover{ transition-duration:.35s; }\n\n\n\/* ===== Lumi\u00e8re mouvante \u2014 halo dor\u00e9 qui se d\u00e9place lentement dans chaque section =====\n   Optimisation anti-lag : l'animation ne tourne QUE quand la section est visible\n   \u00e0 l'\u00e9cran (voir le script plus bas). \u00c7a \u00e9vite d'avoir 10+ halos flous anim\u00e9s\n   en m\u00eame temps, ce qui est la cause la plus probable du ralentissement au scroll. *\/\n\n.sg-light-sweep{\n    position:absolute;\n    top:-10%;\n    left:-10%;\n    width:55%;\n    height:55%;\n    background:radial-gradient(circle,rgba(232,197,108,.22),transparent 65%);\n    filter:blur(60px);\n    pointer-events:none;\n    z-index:1;\n    animation:sgLightMove 17s ease-in-out infinite;\n    animation-play-state:paused;\n    will-change:transform;\n}\n\n.sg-light-sweep.sg-light-active{\n    animation-play-state:running;\n}\n\n.sg-light-sweep.sg-light-soft{\n    background:radial-gradient(circle,rgba(214,175,74,.13),transparent 65%);\n}\n\n@keyframes sgLightMove{\n    0%{   transform:translate(0%,0%) scale(1); }\n    25%{  transform:translate(220%,50%) scale(1.3); }\n    50%{  transform:translate(140%,230%) scale(.9); }\n    75%{  transform:translate(-30%,150%) scale(1.15); }\n    100%{ transform:translate(0%,0%) scale(1); }\n}\n\n@media (prefers-reduced-motion: reduce){\n    .sg-light-sweep{ animation:none; opacity:.5; }\n    [class*=\"tfx-\"]{ transition:none !important; opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; letter-spacing:normal !important; }\n}\n\n\n\/* ===== Effet \"glass\" lumineux automatique sur tous les boutons CTA dor\u00e9s =====\n   Se joue en boucle, m\u00eame sans survol de la souris. *\/\n\n.sg2-btn-gold, .sg3-btn, .sg4-cta-btn, .sg5-btn-gold, .sg3-sb-btn, .btn-primary, .gold-btn{\n    position:relative;\n    overflow:hidden;\n}\n\n.sg2-btn-gold::before, .sg3-btn::before, .sg4-cta-btn::before, .sg5-btn-gold::before,\n.sg3-sb-btn::before, .btn-primary::before, .gold-btn::before{\n    content:\"\";\n    position:absolute;\n    top:0;\n    left:-60%;\n    width:35%;\n    height:100%;\n    background:linear-gradient(115deg,transparent,rgba(255,255,255,.65),transparent);\n    transform:skewX(-20deg);\n    animation:sgShineLoop 3.6s ease-in-out infinite;\n    pointer-events:none;\n}\n\n@keyframes sgShineLoop{\n    0%{ left:-60%; }\n    35%{ left:130%; }\n    100%{ left:130%; }\n}\n\n@media (prefers-reduced-motion: reduce){\n    .sg2-btn-gold::before, .sg3-btn::before, .sg4-cta-btn::before, .sg5-btn-gold::before,\n    .sg3-sb-btn::before, .btn-primary::before, .gold-btn::before{ animation:none; display:none; }\n}\n\n\n\/* ===== FIX PLEIN \u00c9CRAN =====\n   Force chaque section du site \u00e0 occuper toute la largeur de l'\u00e9cran,\n   m\u00eame si le conteneur Elementor qui l'entoure est r\u00e9gl\u00e9 en \"boxed\"\n   (largeur limit\u00e9e) plut\u00f4t qu'en \"pleine largeur\". *\/\n\n#sg3-hero, #sg4-problem, #sg5-solution, #sg4-resultats, #sg3-process,\n#sg4-pourquoi, #sg4-slider, #sg5-testi, #sg4-urgence, #sg4-faq,\n#sg4-cta-final, #sg4-footer{\n    width:100vw !important;\n    max-width:100vw !important;\n    margin-left:calc(50% - 50vw) !important;\n    margin-right:calc(50% - 50vw) !important;\n}\n\nhtml, body{\n    overflow-x:hidden;\n}\n\n<\/style>\n\n<script>\n(function(){\n\n    function initTitleAnimations(){\n        var titles = document.querySelectorAll(\n            \".tfx-1, .tfx-2, .tfx-3, .tfx-4, .tfx-5, .tfx-6, .tfx-7, .tfx-8\"\n        );\n\n        if(\"IntersectionObserver\" in window){\n            var io = new IntersectionObserver(function(entries){\n                entries.forEach(function(entry){\n                    if(entry.isIntersecting){\n                        entry.target.classList.add(\"tfx-in\");\n                        io.unobserve(entry.target);\n                    }\n                });\n            }, { threshold:0.15 });\n            titles.forEach(function(t){ io.observe(t); });\n        } else {\n            titles.forEach(function(t){ t.classList.add(\"tfx-in\"); });\n        }\n\n        setTimeout(function(){\n            titles.forEach(function(t){\n                if(!t.classList.contains(\"tfx-in\")){\n                    t.classList.add(\"tfx-in\");\n                }\n            });\n        }, 2500);\n    }\n\n    \/\/ Anti-lag : les halos lumineux ne tournent que si visibles \u00e0 l'\u00e9cran\n    function initLightSweeps(){\n        var sweeps = document.querySelectorAll(\".sg-light-sweep\");\n        if(!sweeps.length) return;\n\n        if(\"IntersectionObserver\" in window){\n            var io2 = new IntersectionObserver(function(entries){\n                entries.forEach(function(entry){\n                    if(entry.isIntersecting){\n                        entry.target.classList.add(\"sg-light-active\");\n                    } else {\n                        entry.target.classList.remove(\"sg-light-active\");\n                    }\n                });\n            }, { threshold:0.01 });\n            sweeps.forEach(function(s){ io2.observe(s); });\n        } else {\n            sweeps.forEach(function(s){ s.classList.add(\"sg-light-active\"); });\n        }\n    }\n\n    function boot(){\n        initTitleAnimations();\n        initLightSweeps();\n    }\n\n    if(document.readyState === \"complete\"){\n        boot();\n    } else {\n        window.addEventListener(\"load\", boot);\n    }\n\n})();\n<\/script>\n<!-- =========================================================\n    SCALE GROUP \u2014 HERO V2 (nouveau style anim\u00e9)\n    Widget HTML Elementor \u2014 remplace l'ancien Hero si tu pr\u00e9f\u00e8res celui-ci\n========================================================= -->\n\n<section id=\"sg3-hero\">\n\n    <div class=\"sg-light-sweep\"><\/div>\n    <div class=\"sg3-grid-bg\"><\/div>\n    <div class=\"sg3-blob sg3-blob-a\"><\/div>\n    <div class=\"sg3-blob sg3-blob-b\"><\/div>\n\n    <div class=\"sg3-wrap\">\n\n        <div class=\"sg3-badge\">\n            <span class=\"sg3-badge-dot\"><\/span>\n            Agence Scale Group \u2014 Sites internet premium\n        <\/div>\n\n        <h1 class=\"sg3-h1\">\n            <span class=\"sg3-line sg3-line1\"><span>L'apparence attire.<\/span><\/span>\n            <span class=\"sg3-line sg3-line2\"><span>La confiance  <em>fait acheter.<\/em><\/span><\/span>\n        <\/h1>\n\n        <svg class=\"sg3-underline\" viewBox=\"0 0 420 20\" preserveAspectRatio=\"none\">\n            <path id=\"sg3-underline-path\" d=\"M5,12 C100,2 300,18 415,8\" fill=\"none\" stroke=\"#E8C56C\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n        <\/svg>\n\n        <p class=\"sg3-lead\">\n           Nous concevons des sites qui inspirent confiance d\u00e8s les premi\u00e8res secondes.\n        <\/p>\n\n        <div class=\"sg3-cta-zone\">\n            <a href=\"https:\/\/wa.me\/262693467741?text=Bonjour%2C%20je%20souhaite%20en%20savoir%20plus%20sur%20vos%20services%20et%20voir%20si%20mon%20projet%20est%20%C3%A9ligible.\" target=\"_blank\" rel=\"noopener\" class=\"sg3-btn\" id=\"sg3-magnetic-btn\">\n                <span>Je veux voir ce que vous pouvez construire pour moi<\/span>\n                <span class=\"sg3-btn-arrow\">\u2192<\/span>\n            <\/a>\n            <div class=\"sg3-micro\">2 min \u00b7 Audit offert \u00b7 Sans engagement<\/div>\n        <\/div>\n\n        <div class=\"sg3-live\">\n            <span class=\"sg3-live-dot\"><\/span>\n            <span id=\"sg3-live-count\">24<\/span> personnes regardent cette page en ce moment\n        <\/div>\n\n    <\/div>\n\n    <div class=\"sg3-scroll-line\">\n        <svg viewBox=\"0 0 4 200\" preserveAspectRatio=\"none\">\n            <line x1=\"2\" y1=\"0\" x2=\"2\" y2=\"200\" stroke=\"#E8C56C\" stroke-width=\"2\" stroke-dasharray=\"6 10\"\/>\n        <\/svg>\n    <\/div>\n\n<\/section>\n\n<style>\n\n#sg3-hero{\n    position:relative;\n    overflow:hidden;\n    background:#050505;\n    color:#fff;\n    font-family:Inter,sans-serif;\n    min-height:100vh;\n    display:flex;\n    align-items:center;\n    padding:120px 0 60px;\n}\n\n#sg3-hero *{ box-sizing:border-box; }\n\n.sg3-grid-bg{\n    position:absolute;\n    inset:0;\n    background-image:\n        linear-gradient(rgba(232,197,108,.06) 1px,transparent 1px),\n        linear-gradient(90deg,rgba(232,197,108,.06) 1px,transparent 1px);\n    background-size:64px 64px;\n    -webkit-mask-image:radial-gradient(circle at 50% 35%,black 0%,transparent 70%);\n    mask-image:radial-gradient(circle at 50% 35%,black 0%,transparent 70%);\n    animation:sg3GridDrift 30s linear infinite;\n    z-index:0;\n}\n\n@keyframes sg3GridDrift{\n    from{ background-position:0 0,0 0; }\n    to{ background-position:64px 64px,64px 64px; }\n}\n\n.sg3-blob{\n    position:absolute;\n    border-radius:50%;\n    filter:blur(90px);\n    z-index:0;\n    animation:sg3Float 9s ease-in-out infinite;\n}\n\n.sg3-blob-a{\n    width:520px;\n    height:520px;\n    background:radial-gradient(circle,rgba(232,197,108,.28),transparent 70%);\n    top:-120px;\n    left:-100px;\n}\n\n.sg3-blob-b{\n    width:460px;\n    height:460px;\n    background:radial-gradient(circle,rgba(232,197,108,.18),transparent 70%);\n    bottom:-140px;\n    right:-100px;\n    animation-delay:2s;\n}\n\n@keyframes sg3Float{\n    0%,100%{ transform:translateY(0) scale(1); }\n    50%{ transform:translateY(-30px) scale(1.06); }\n}\n\n.sg3-wrap{\n    position:relative;\n    z-index:5;\n    width:92%;\n    max-width:920px;\n    margin:0 auto;\n    text-align:center;\n}\n\n.sg3-badge{\n    display:inline-flex;\n    align-items:center;\n    gap:9px;\n    padding:11px 22px;\n    border-radius:999px;\n    background:rgba(232,197,108,.08);\n    border:1px solid rgba(232,197,108,.25);\n    color:#E8C56C;\n    font-size:13.5px;\n    margin-bottom:38px;\n    opacity:0;\n    animation:sg3FadeUp .7s ease forwards;\n}\n\n.sg3-badge-dot{\n    width:6px;\n    height:6px;\n    border-radius:50%;\n    background:#E8C56C;\n    box-shadow:0 0 10px #E8C56C;\n}\n\n.sg3-h1{\n    margin:0;\n    font-size:clamp(32px,5.6vw,64px);\n    font-weight:900;\n    line-height:1.18;\n}\n\n.sg3-line{\n    display:block;\n    overflow:hidden;\n}\n\n.sg3-line span{\n    display:block;\n    transform:translateY(110%);\n    animation:sg3RevealLine .8s cubic-bezier(.2,.8,.2,1) forwards;\n}\n\n.sg3-line1 span{ animation-delay:.15s; }\n.sg3-line2 span{ animation-delay:.32s; }\n\n.sg3-line2 em{\n    font-style:normal;\n    background:linear-gradient(90deg,#E8C56C,#FFF0B8);\n    -webkit-background-clip:text;\n    -webkit-text-fill-color:transparent;\n}\n\n@keyframes sg3RevealLine{\n    to{ transform:translateY(0); }\n}\n\n.sg3-underline{\n    width:220px;\n    height:14px;\n    display:block;\n    margin:14px auto 0;\n}\n\n#sg3-underline-path{\n    stroke-dasharray:600;\n    stroke-dashoffset:600;\n    animation:sg3Draw 1s ease .9s forwards;\n}\n\n@keyframes sg3Draw{\n    to{ stroke-dashoffset:0; }\n}\n\n.sg3-lead{\n    max-width:600px;\n    margin:30px auto 0;\n    font-size:17.5px;\n    line-height:1.75;\n    color:#a8a8a8;\n    opacity:0;\n    animation:sg3FadeUp .7s .55s ease forwards;\n}\n\n.sg3-cta-zone{\n    margin-top:42px;\n    opacity:0;\n    animation:sg3FadeUp .7s .68s ease forwards;\n}\n\n@keyframes sg3FadeUp{\n    from{ opacity:0; transform:translateY(16px); }\n    to{ opacity:1; transform:translateY(0); }\n}\n\n.sg3-btn{\n    position:relative;\n    display:inline-flex;\n    align-items:center;\n    gap:12px;\n    background:linear-gradient(135deg,#FFD978,#A67818);\n    color:#111;\n    font-weight:700;\n    font-size:15.5px;\n    padding:19px 32px;\n    border-radius:999px;\n    text-decoration:none;\n    box-shadow:0 0 40px rgba(255,210,90,.3);\n    transition:box-shadow .3s;\n}\n\n.sg3-btn:hover{ box-shadow:0 20px 50px rgba(255,210,90,.4); }\n\n.sg3-btn-arrow{ transition:transform .3s; }\n.sg3-btn:hover .sg3-btn-arrow{ transform:translateX(4px); }\n\n.sg3-micro{\n    margin-top:14px;\n    font-size:13px;\n    color:#7a7a7a;\n}\n\n.sg3-live{\n    margin-top:26px;\n    display:inline-flex;\n    align-items:center;\n    gap:8px;\n    font-size:13px;\n    color:#8a8a8a;\n    opacity:0;\n    animation:sg3FadeUp .7s .8s ease forwards;\n}\n\n.sg3-live-dot{\n    width:7px;\n    height:7px;\n    border-radius:50%;\n    background:#4ade80;\n    box-shadow:0 0 8px #4ade80;\n    animation:sg3Pulse 1.6s infinite;\n}\n\n@keyframes sg3Pulse{\n    0%,100%{ opacity:1; }\n    50%{ opacity:.35; }\n}\n\n.sg3-scroll-line{\n    position:absolute;\n    bottom:26px;\n    left:50%;\n    transform:translateX(-50%);\n    width:4px;\n    height:70px;\n    z-index:5;\n    opacity:.6;\n}\n\n@media(max-width:640px){\n    #sg3-hero{ padding:100px 0 50px; }\n    .sg3-h1{ font-size:30px; }\n    .sg3-lead{ font-size:16px; }\n    .sg3-btn{ font-size:14px; padding:16px 24px; text-align:left; }\n}\n\n<\/style>\n\n<script>\n(function(){\n    \/\/ bouton magn\u00e9tique : suit l\u00e9g\u00e8rement le curseur\n    var btn = document.getElementById(\"sg3-magnetic-btn\");\n    if(btn){\n        btn.addEventListener(\"mousemove\", function(e){\n            var rect = btn.getBoundingClientRect();\n            var x = (e.clientX - rect.left - rect.width\/2) * 0.25;\n            var y = (e.clientY - rect.top - rect.height\/2) * 0.4;\n            btn.style.transform = \"translate(\" + x + \"px,\" + y + \"px)\";\n        });\n        btn.addEventListener(\"mouseleave\", function(){\n            btn.style.transform = \"translate(0,0)\";\n        });\n    }\n\n    \/\/ compteur \"en ligne\" \u2014 \u00e0 brancher sur une vraie source si tu veux du r\u00e9el\n    var el = document.getElementById(\"sg3-live-count\");\n    if(el){\n        setInterval(function(){\n            var base = 24;\n            var variation = Math.floor(Math.random()*7)-3;\n            el.textContent = Math.max(12, base+variation);\n        }, 4000);\n    }\n})();\n<\/script>\n<!-- =========================================================\n    SECTION 2 \u2014 LE PROBL\u00c8ME (6 cartes)\n========================================================= -->\n\n<section id=\"sg4-problem\">\n\n    <div class=\"sg-light-sweep\"><\/div>\n\n    <div class=\"sg4-wrap\">\n\n        <div class=\"sg4-head reveal4\">\n            <div class=\"sg4-eyebrow\">Le constat<\/div>\n            <h2 class=\"tfx-1\">Pourquoi votre site ne g\u00e9n\u00e8re pas<br>suffisamment de clients ?<\/h2>\n            <p>La plupart des entreprises perdent des prospects sans m\u00eame s'en rendre compte. Voici les raisons les plus fr\u00e9quentes.<\/p>\n        <\/div>\n\n        <div class=\"sg4-cards-grid\">\n\n            <div class=\"sg4-card reveal4\">\n                <div class=\"sg4-card-icon\">\ud83d\udcc9<\/div>\n                <h3>Peu de trafic qualifi\u00e9<\/h3>\n                <p>Vous attirez des visiteurs qui ne correspondent pas \u00e0 votre client id\u00e9al \u2014 ils ne convertiront jamais.<\/p>\n            <\/div>\n\n            <div class=\"sg4-card reveal4\">\n                <div class=\"sg4-card-icon\">\ud83d\udeab<\/div>\n                <h3>Site qui ne convertit pas<\/h3>\n                <p>Le trafic arrive, mais rien n'est pens\u00e9 pour transformer un visiteur en prospect.<\/p>\n            <\/div>\n\n            <div class=\"sg4-card reveal4\">\n                <div class=\"sg4-card-icon\">\u2699\ufe0f<\/div>\n                <h3>Aucun syst\u00e8me commercial<\/h3>\n                <p>Sans parcours structur\u00e9, chaque vente d\u00e9pend du hasard \u2014 pas d'un processus fiable.<\/p>\n            <\/div>\n\n            <div class=\"sg4-card reveal4\">\n                <div class=\"sg4-card-icon\">\ud83e\udd16<\/div>\n                <h3>Pas d'automatisation<\/h3>\n                <p>Vous perdez un temps pr\u00e9cieux sur des t\u00e2ches qui devraient tourner seules, 24h\/24.<\/p>\n            <\/div>\n\n            <div class=\"sg4-card reveal4\">\n                <div class=\"sg4-card-icon\">\ud83d\udc8e<\/div>\n                <h3>Mauvaise image<\/h3>\n                <p>Un design dat\u00e9 ou g\u00e9n\u00e9rique renvoie une image qui ne refl\u00e8te pas votre vraie valeur.<\/p>\n            <\/div>\n\n            <div class=\"sg4-card reveal4\">\n                <div class=\"sg4-card-icon\">\ud83c\udfc6<\/div>\n                <h3>Les concurrents prennent vos clients<\/h3>\n                <p>Pendant que vous h\u00e9sitez, ceux qui ont un syst\u00e8me en place captent vos prospects.<\/p>\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<style>\n\n#sg4-problem{\n    position:relative;\n    overflow:hidden;\n    background:#050505;\n    color:#fff;\n    font-family:Inter,sans-serif;\n    padding:130px 0;\n}\n\n#sg4-problem *{ box-sizing:border-box; }\n\n.sg4-wrap{ width:90%; max-width:1180px; margin:0 auto; }\n\n.sg4-head{\n    text-align:center;\n    max-width:720px;\n    margin:0 auto 70px;\n}\n\n.sg4-eyebrow{\n    display:inline-flex;\n    padding:10px 20px;\n    border-radius:999px;\n    background:rgba(232,197,108,.08);\n    border:1px solid rgba(232,197,108,.25);\n    color:#E8C56C;\n    font-size:13px;\n    font-weight:600;\n    margin-bottom:26px;\n}\n\n.sg4-head h2{\n    font-size:clamp(28px,4vw,44px);\n    line-height:1.18;\n    font-weight:900;\n    margin:0;\n}\n\n.sg4-head p{\n    margin-top:22px;\n    font-size:16.5px;\n    line-height:1.75;\n    color:#9a9a9a;\n}\n\n.sg4-cards-grid{\n    display:grid;\n    grid-template-columns:repeat(3,1fr);\n    gap:22px;\n}\n\n.sg4-card{\n    background:rgba(255,255,255,.03);\n    border:1px solid rgba(255,255,255,.08);\n    border-radius:20px;\n    padding:36px 30px;\n    transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .4s;\n}\n\n.sg4-card:hover{\n    transform:translateY(-8px);\n    border-color:rgba(232,197,108,.35);\n    box-shadow:0 30px 60px rgba(0,0,0,.4), 0 0 40px rgba(232,197,108,.08);\n}\n\n.sg4-card-icon{\n    font-size:28px;\n    margin-bottom:20px;\n}\n\n.sg4-card h3{\n    font-size:18.5px;\n    font-weight:800;\n    margin:0 0 12px;\n}\n\n.sg4-card p{\n    font-size:14.5px;\n    line-height:1.7;\n    color:#9a9a9a;\n    margin:0;\n}\n\n.reveal4{\n    opacity:0;\n    transform:translateY(28px);\n    transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);\n}\n.reveal4.sg4-in{ opacity:1; transform:translateY(0); }\n\n.sg4-cards-grid .sg4-card:nth-child(1){ transition-delay:.05s; }\n.sg4-cards-grid .sg4-card:nth-child(2){ transition-delay:.1s; }\n.sg4-cards-grid .sg4-card:nth-child(3){ transition-delay:.15s; }\n.sg4-cards-grid .sg4-card:nth-child(4){ transition-delay:.2s; }\n.sg4-cards-grid .sg4-card:nth-child(5){ transition-delay:.25s; }\n.sg4-cards-grid .sg4-card:nth-child(6){ transition-delay:.3s; }\n\n@media(max-width:900px){\n    .sg4-cards-grid{ grid-template-columns:1fr 1fr; }\n}\n@media(max-width:600px){\n    .sg4-cards-grid{ grid-template-columns:1fr; }\n}\n\n<\/style>\n\n<script>\n(function(){\n    var els = document.querySelectorAll(\"#sg4-problem .reveal4\");\n    var io = new IntersectionObserver(function(entries){\n        entries.forEach(function(e){\n            if(e.isIntersecting){ e.target.classList.add(\"sg4-in\"); io.unobserve(e.target); }\n        });\n    }, { threshold:0.15 });\n    els.forEach(function(el){ io.observe(el); });\n})();\n<\/script>\n<!-- =========================================================\n    SECTION 3 \u2014 LA SOLUTION SCALE GROUP (fond blanc)\n========================================================= -->\n\n<section id=\"sg5-solution\">\n\n    <div class=\"sg-light-sweep sg-light-soft\"><\/div>\n\n    <div class=\"sg5-wrap sg5-sol-grid\">\n\n        <div class=\"sg5-sol-text reveal5\">\n            <div class=\"sg5-eyebrow\">Notre approche<\/div>\n            <h2 class=\"tfx-2\">Nous construisons des syst\u00e8mes qui travaillent pendant que vous d\u00e9veloppez votre entreprise.<\/h2>\n            <p>\n                On ne livre pas un site qu'on oublie une fois en ligne. On construit un syst\u00e8me complet\n                design, structure, automatisation pens\u00e9 pour capter, convaincre et convertir,\n                sans que vous ayez \u00e0 y penser.\n            <\/p>\n            <ul class=\"sg5-sol-list\">\n                <li>Un parcours qui guide chaque visiteur vers l'action<\/li>\n                <li>Des automatisations qui travaillent 24h\/24<\/li>\n                <li>Un design qui inspire confiance d\u00e8s la premi\u00e8re seconde<\/li>\n            <\/ul>\n            <a href=\"https:\/\/wa.me\/262693467741?text=Bonjour%2C%20je%20souhaite%20en%20savoir%20plus%20sur%20vos%20services%20et%20voir%20si%20mon%20projet%20est%20%C3%A9ligible.\" target=\"_blank\" rel=\"noopener\" class=\"sg5-btn-gold\">\n                D\u00e9couvrir notre m\u00e9thode\n                <span class=\"sg5-arrow\">\u2192<\/span>\n            <\/a>\n        <\/div>\n\n        <div class=\"sg5-sol-visual reveal5\">\n            <div class=\"sg5-orbit\">\n                <div class=\"sg5-orbit-core\"><span>S<\/span><\/div>\n                <div class=\"sg5-orbit-ring sg5-ring-1\"><\/div>\n                <div class=\"sg5-orbit-ring sg5-ring-2\"><\/div>\n                <div class=\"sg5-node sg5-node-1\">Design<\/div>\n                <div class=\"sg5-node sg5-node-2\">Conversion<\/div>\n                <div class=\"sg5-node sg5-node-3\">Automatisation<\/div>\n                <div class=\"sg5-node sg5-node-4\">Croissance<\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<style>\n\n#sg5-solution{\n    position:relative;\n    background:#ffffff;\n    color:#0a0a0a;\n    font-family:Inter,sans-serif;\n    padding:130px 0;\n    overflow:hidden;\n}\n\n#sg5-solution *{ box-sizing:border-box; }\n\n.sg5-wrap{ width:90%; max-width:1180px; margin:0 auto; }\n\n.sg5-sol-grid{\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    gap:70px;\n    align-items:center;\n}\n\n.sg5-eyebrow{\n    display:inline-flex;\n    padding:10px 20px;\n    border-radius:999px;\n    background:#FBF3E1;\n    border:1px solid rgba(214,175,74,.25);\n    color:#B8891E;\n    font-size:13px;\n    font-weight:700;\n}\n\n.sg5-sol-text h2{\n    font-size:clamp(28px,3.6vw,42px);\n    line-height:1.22;\n    font-weight:900;\n    margin:26px 0 24px;\n    color:#0a0a0a;\n}\n\n.sg5-sol-text p{\n    font-size:16.5px;\n    line-height:1.8;\n    color:#555;\n    margin-bottom:30px;\n}\n\n.sg5-sol-list{ list-style:none; margin:0 0 40px; padding:0; }\n\n.sg5-sol-list li{\n    position:relative;\n    padding-left:30px;\n    margin-bottom:16px;\n    font-size:15.5px;\n    color:#333;\n}\n\n.sg5-sol-list li::before{\n    content:\"\u2713\";\n    position:absolute;\n    left:0;\n    color:#B8891E;\n    font-weight:900;\n}\n\n.sg5-btn-gold{\n    display:inline-flex;\n    align-items:center;\n    gap:10px;\n    background:linear-gradient(135deg,#FFD978,#A67818);\n    color:#111;\n    font-weight:700;\n    font-size:15px;\n    padding:17px 30px;\n    border-radius:999px;\n    text-decoration:none;\n    box-shadow:0 15px 35px rgba(214,175,74,.25);\n    transition:.35s;\n}\n.sg5-btn-gold:hover{ transform:translateY(-3px); box-shadow:0 22px 45px rgba(214,175,74,.35); }\n.sg5-arrow{ transition:.3s; }\n.sg5-btn-gold:hover .sg5-arrow{ transform:translateX(4px); }\n\n.sg5-sol-visual{\n    position:relative;\n    height:460px;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n}\n\n.sg5-orbit{ position:relative; width:380px; height:380px; }\n\n.sg5-orbit-core{\n    position:absolute;\n    top:50%; left:50%;\n    transform:translate(-50%,-50%);\n    width:100px; height:100px;\n    border-radius:50%;\n    background:linear-gradient(135deg,#FFD978,#A67818);\n    display:flex; align-items:center; justify-content:center;\n    box-shadow:0 20px 50px rgba(214,175,74,.35);\n    z-index:5;\n    animation:sg5CorePulse 3s ease-in-out infinite;\n}\n\n.sg5-orbit-core span{\n    font-family:'Space Grotesk',Inter,sans-serif;\n    font-size:38px; font-weight:900; color:#111;\n}\n\n@keyframes sg5CorePulse{\n    0%,100%{ transform:translate(-50%,-50%) scale(1); }\n    50%{ transform:translate(-50%,-50%) scale(1.06); }\n}\n\n.sg5-orbit-ring{\n    position:absolute; top:50%; left:50%;\n    border-radius:50%;\n    border:1px dashed rgba(184,137,30,.3);\n    transform:translate(-50%,-50%);\n}\n\n.sg5-ring-1{ width:260px; height:260px; animation:sg5Spin 20s linear infinite; }\n.sg5-ring-2{ width:380px; height:380px; animation:sg5Spin 30s linear infinite reverse; }\n\n@keyframes sg5Spin{\n    from{ transform:translate(-50%,-50%) rotate(0deg); }\n    to{ transform:translate(-50%,-50%) rotate(360deg); }\n}\n\n.sg5-node{\n    position:absolute;\n    padding:12px 20px;\n    border-radius:999px;\n    background:#fff;\n    border:1px solid rgba(214,175,74,.3);\n    box-shadow:0 10px 30px rgba(0,0,0,.06);\n    font-size:13.5px;\n    font-weight:700;\n    color:#B8891E;\n    animation:sg5NodeFloat 5s ease-in-out infinite;\n    z-index:4;\n}\n\n.sg5-node-1{ top:0; left:10%; animation-delay:0s; }\n.sg5-node-2{ top:20%; right:-4%; animation-delay:.7s; }\n.sg5-node-3{ bottom:10%; right:6%; animation-delay:1.4s; }\n.sg5-node-4{ bottom:-2%; left:14%; animation-delay:2.1s; }\n\n@keyframes sg5NodeFloat{\n    0%,100%{ transform:translateY(0); }\n    50%{ transform:translateY(-14px); }\n}\n\n.reveal5{\n    opacity:0;\n    transform:translateY(28px);\n    transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);\n}\n.reveal5.sg5-in{ opacity:1; transform:translateY(0); }\n\n@media(max-width:900px){\n    .sg5-sol-grid{ grid-template-columns:1fr; gap:60px; }\n    .sg5-sol-visual{ height:360px; }\n    .sg5-orbit{ width:300px; height:300px; }\n    .sg5-ring-2{ width:300px; height:300px; }\n    .sg5-ring-1{ width:200px; height:200px; }\n}\n\n<\/style>\n\n<script>\n(function(){\n    var els = document.querySelectorAll(\"#sg5-solution .reveal5\");\n    var io = new IntersectionObserver(function(entries){\n        entries.forEach(function(e){\n            if(e.isIntersecting){ e.target.classList.add(\"sg5-in\"); io.unobserve(e.target); }\n        });\n    }, { threshold:0.15 });\n    els.forEach(function(el){ io.observe(el); });\n})();\n<\/script>\n<!-- =========================================================\n    SECTION 4 \u2014 NOS R\u00c9SULTATS (grande section premium)\n    Remplace les images par tes vraies captures si tu en as de plus r\u00e9centes.\n========================================================= -->\n\n<section id=\"sg4-resultats\">\n\n    <div class=\"sg4-res-glow\"><\/div>\n    <div class=\"sg-light-sweep\"><\/div>\n\n    <div class=\"sg4-wrap\">\n\n        <div class=\"sg4-head reveal4\">\n            <div class=\"sg4-eyebrow\" style=\"margin-inline:auto;display:inline-flex;\">R\u00e9sultats clients<\/div>\n            <h2 class=\"tfx-6\">Plus de <span>2 millions d'euros<\/span><br>g\u00e9n\u00e9r\u00e9s pour nos clients.<\/h2>\n            <p>Chaque site est pens\u00e9 pour attirer plus de prospects, convertir davantage de visiteurs et automatiser votre croissance.<\/p>\n        <\/div>\n\n        <div class=\"sg4-stats-row reveal4\">\n            <div class=\"sg4-stat\">\n                <div class=\"sg4-stat-num\">\u20ac<span class=\"sg4-counter\" data-target=\"2\">0<\/span>M+<\/div>\n                <div class=\"sg4-stat-label\">G\u00e9n\u00e9r\u00e9s pour nos clients<\/div>\n            <\/div>\n            <div class=\"sg4-stat\">\n                <div class=\"sg4-stat-num\"><span class=\"sg4-counter\" data-target=\"150\">0<\/span>+<\/div>\n                <div class=\"sg4-stat-label\">Sites livr\u00e9s<\/div>\n            <\/div>\n            <div class=\"sg4-stat\">\n                <div class=\"sg4-stat-num\"><span class=\"sg4-counter\" data-target=\"38\">0<\/span>%<\/div>\n                <div class=\"sg4-stat-label\">Conversion moyenne en hausse<\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"sg4-phone-stage reveal4\">\n\n            <img decoding=\"async\" class=\"sg4-phone-img\" src=\"http:\/\/scale-group.fr\/wp-content\/uploads\/2026\/08\/iphone-.png\" alt=\"R\u00e9sultats Scale Group\">\n\n            <img decoding=\"async\" class=\"sg4-float sg4-float-1\" src=\"http:\/\/scale-group.fr\/wp-content\/uploads\/2026\/08\/cadre-1.png\" alt=\"Volume net des ventes\">\n            <img decoding=\"async\" class=\"sg4-float sg4-float-2\" src=\"http:\/\/scale-group.fr\/wp-content\/uploads\/2026\/08\/cadre-2.png\" alt=\"Volume net des ventes\">\n            <img decoding=\"async\" class=\"sg4-float sg4-float-3\" src=\"http:\/\/scale-group.fr\/wp-content\/uploads\/2026\/08\/cadre-3.png\" alt=\"Volume brut\">\n            <img decoding=\"async\" class=\"sg4-float sg4-float-4\" src=\"http:\/\/scale-group.fr\/wp-content\/uploads\/2026\/08\/cadre-4.png\" alt=\"Accueil dashboard\">\n            <img decoding=\"async\" class=\"sg4-float sg4-float-5\" src=\"http:\/\/scale-group.fr\/wp-content\/uploads\/2026\/08\/cadre-5.png\" alt=\"Volume brut\">\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<style>\n\n#sg4-resultats{\n    position:relative;\n    overflow:hidden;\n    background:#050505;\n    color:#fff;\n    font-family:Inter,sans-serif;\n    padding:150px 0 170px;\n}\n\n#sg4-resultats *{ box-sizing:border-box; }\n\n.sg4-res-glow{\n    position:absolute;\n    top:10%;\n    left:50%;\n    transform:translateX(-50%);\n    width:900px;\n    height:900px;\n    background:radial-gradient(circle,rgba(232,197,108,.14),transparent 70%);\n    filter:blur(100px);\n    pointer-events:none;\n}\n\n.sg4-head{\n    text-align:center;\n    max-width:760px;\n    margin:0 auto 60px;\n    position:relative;\n    z-index:5;\n}\n\n.sg4-head h2{\n    font-size:clamp(30px,4.6vw,54px);\n    line-height:1.15;\n    font-weight:900;\n    margin:24px 0 0;\n}\n\n.sg4-head h2 span{\n    background:linear-gradient(90deg,#E8C56C,#FFF0B8);\n    -webkit-background-clip:text;\n    -webkit-text-fill-color:transparent;\n}\n\n.sg4-head p{\n    margin-top:22px;\n    font-size:16.5px;\n    line-height:1.75;\n    color:#9a9a9a;\n}\n\n.sg4-stats-row{\n    display:flex;\n    justify-content:center;\n    gap:70px;\n    flex-wrap:wrap;\n    position:relative;\n    z-index:5;\n    margin-bottom:90px;\n}\n\n.sg4-stat{ text-align:center; }\n\n.sg4-stat-num{\n    font-size:clamp(32px,4vw,52px);\n    font-weight:900;\n    color:#E8C56C;\n}\n\n.sg4-stat-label{\n    margin-top:8px;\n    font-size:13.5px;\n    color:#8a8a8a;\n}\n\n.sg4-phone-stage{\n    position:relative;\n    max-width:520px;\n    margin:0 auto;\n    z-index:5;\n}\n\n.sg4-phone-img{\n    width:100%;\n    display:block;\n    filter:drop-shadow(0 50px 90px rgba(0,0,0,.55));\n    animation:sg4PhoneFloat 6s ease-in-out infinite;\n}\n\n@keyframes sg4PhoneFloat{\n    0%,100%{ transform:translateY(0); }\n    50%{ transform:translateY(-16px); }\n}\n\n.sg4-float{\n    position:absolute;\n    width:200px;\n    border-radius:16px;\n    box-shadow:0 25px 50px rgba(0,0,0,.45), 0 0 40px rgba(232,197,108,.08);\n    animation:sg4FloatCard 5s ease-in-out infinite;\n    z-index:6;\n}\n\n.sg4-float-1{ top:2%; left:-16%; width:210px; animation-delay:0s; }\n.sg4-float-2{ top:16%; right:-18%; width:190px; animation-delay:.7s; }\n.sg4-float-3{ bottom:26%; left:-20%; width:180px; animation-delay:1.4s; }\n.sg4-float-4{ bottom:4%; right:-14%; width:210px; animation-delay:2.1s; }\n.sg4-float-5{ top:44%; right:-22%; width:160px; animation-delay:2.8s; }\n\n@keyframes sg4FloatCard{\n    0%,100%{ transform:translateY(0); }\n    50%{ transform:translateY(-14px); }\n}\n\n.reveal4{\n    opacity:0;\n    transform:translateY(28px);\n    transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);\n}\n.reveal4.sg4-in{ opacity:1; transform:translateY(0); }\n\n.sg4-eyebrow{\n    padding:10px 20px;\n    border-radius:999px;\n    background:rgba(232,197,108,.08);\n    border:1px solid rgba(232,197,108,.25);\n    color:#E8C56C;\n    font-size:13px;\n    font-weight:600;\n}\n\n@media(max-width:900px){\n    .sg4-float{ display:none; }\n    .sg4-stats-row{ gap:40px; }\n}\n\n<\/style>\n\n<script>\n(function(){\n    var counters = document.querySelectorAll(\"#sg4-resultats .sg4-counter\");\n    var io = new IntersectionObserver(function(entries){\n        entries.forEach(function(e){\n            if(e.isIntersecting){\n                var el = e.target;\n                var target = parseFloat(el.dataset.target);\n                var cur = 0;\n                var step = target\/40;\n                var t = setInterval(function(){\n                    cur += step;\n                    if(cur >= target){ cur = target; clearInterval(t); }\n                    el.textContent = Math.round(cur);\n                }, 30);\n                io.unobserve(el);\n            }\n        });\n    }, { threshold:0.5 });\n    counters.forEach(function(c){ io.observe(c); });\n\n    var els = document.querySelectorAll(\"#sg4-resultats .reveal4\");\n    var io2 = new IntersectionObserver(function(entries){\n        entries.forEach(function(e){\n            if(e.isIntersecting){ e.target.classList.add(\"sg4-in\"); io2.unobserve(e.target); }\n        });\n    }, { threshold:0.1 });\n    els.forEach(function(el){ io2.observe(el); });\n})();\n<\/script>\n<!-- =========================================================\n    SCALE GROUP \u2014 PROCESS STYLE \"GETFUNNELS\" (fond blanc, trait anim\u00e9)\n    Widget HTML Elementor\n========================================================= -->\n\n<section id=\"sg3-process\">\n\n    <div class=\"sg-light-sweep sg-light-soft\"><\/div>\n\n    <svg class=\"sg3-flow-line\" id=\"sg3-flow-svg\" viewBox=\"0 0 1000 2200\" preserveAspectRatio=\"none\">\n        <path id=\"sg3-flow-path\"\n            d=\"M 850,60\n               C 950,220 700,320 500,420\n               C 250,540 150,650 300,780\n               C 450,900 850,950 800,1100\n               C 760,1230 350,1280 250,1420\n               C 170,1530 350,1620 550,1720\n               C 720,1800 900,1900 780,2050\"\n            fill=\"none\" stroke=\"#E8C56C\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n    <\/svg>\n\n    <div class=\"sg3-wrap2\">\n\n        <div class=\"sg3-p-head reveal3\">\n            <div class=\"sg3-eyebrow\">Comment on travaille<\/div>\n            <h2 class=\"tfx-3\">Voici exactement<br><span>ce qui se passe.<\/span><\/h2>\n            <p>Chaque projet suit une m\u00e9thode pr\u00e9cise. Aucun hasard. Aucun \"\u00e0 peu pr\u00e8s\".<br>Seulement un syst\u00e8me pens\u00e9 pour g\u00e9n\u00e9rer des r\u00e9sultats.<\/p>\n        <\/div>\n\n        <!-- \u00c9TAPE 1 -->\n        <div class=\"sg3-stage reveal3\">\n            <div class=\"sg3-stage-media\">\n                <img decoding=\"async\" src=\"http:\/\/scale-group.fr\/wp-content\/uploads\/2026\/08\/Cerveau.png\" alt=\"Cadrage strat\u00e9gique\">\n            <\/div>\n            <div class=\"sg3-stage-card\">\n                <span class=\"sg3-step-tag\">\u00c9TAPE 01<\/span>\n                <h3>Strat\u00e9gie & Structure<\/h3>\n                <ul>\n                    <li>On verrouille : offre, cible, angle, objectif.<\/li>\n                    <li>On dessine le parcours + le plan de conversion.<\/li>\n                    <li>Tu sais exactement ce qu'on construit (avant de construire).<\/li>\n                <\/ul>\n            <\/div>\n        <\/div>\n\n        <!-- \u00c9TAPE 2 -->\n        <div class=\"sg3-stage sg3-reverse reveal3\">\n            <div class=\"sg3-stage-media\">\n                <img decoding=\"async\" src=\"http:\/\/scale-group.fr\/wp-content\/uploads\/2026\/08\/Design-sans-titre-24.png\" alt=\"Design et d\u00e9veloppement\">\n            <\/div>\n            <div class=\"sg3-stage-card\">\n                <span class=\"sg3-step-tag\">\u00c9TAPE 02<\/span>\n                <h3>Design & Conception<\/h3>\n                <ul>\n                    <li>Design premium sur-mesure, pens\u00e9 pour convertir.<\/li>\n                    <li>Copywriting orient\u00e9 d\u00e9cision, pas juste \"joli\".<\/li>\n                    <li>QA complet (mobile, vitesse, tracking, erreurs).<\/li>\n                <\/ul>\n            <\/div>\n        <\/div>\n\n        <!-- \u00c9TAPE 3 -->\n        <div class=\"sg3-stage reveal3\">\n            <div class=\"sg3-stage-media\">\n                <img decoding=\"async\" src=\"http:\/\/scale-group.fr\/wp-content\/uploads\/2026\/08\/Design-sans-titre-23.png\" alt=\"Lancement et optimisation\">\n            <\/div>\n            <div class=\"sg3-stage-card\">\n                <span class=\"sg3-step-tag\">\u00c9TAPE 03<\/span>\n                <h3>Lancement & Optimisation<\/h3>\n                <ul>\n                    <li>Mise en ligne s\u00e9curis\u00e9e, tests complets.<\/li>\n                    <li>Optimisation des performances et de la vitesse.<\/li>\n                    <li>Suivi et am\u00e9liorations continues apr\u00e8s livraison.<\/li>\n                <\/ul>\n            <\/div>\n        <\/div>\n\n        <div class=\"sg3-delay reveal3\">\n            D\u00e9lai r\u00e9el : entre <strong>1 et 6 semaines<\/strong> selon le projet \u2014 confirm\u00e9 au cadrage, jamais au doigt mouill\u00e9.\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<style>\n\n#sg3-process{\n    position:relative;\n    overflow:hidden;\n    background:#ffffff;\n    color:#111;\n    font-family:Inter,sans-serif;\n    padding:120px 0 100px;\n}\n\n#sg3-process *{ box-sizing:border-box; }\n\n.sg3-flow-line{\n    position:absolute;\n    top:0;\n    left:0;\n    width:100%;\n    height:100%;\n    z-index:0;\n    pointer-events:none;\n}\n\n#sg3-flow-path{\n    stroke-dasharray:4200;\n    stroke-dashoffset:4200;\n    opacity:.55;\n    transition:stroke-dashoffset .1s linear;\n}\n\n.sg3-wrap2{\n    position:relative;\n    z-index:5;\n    width:90%;\n    max-width:1100px;\n    margin:0 auto;\n}\n\n.sg3-p-head{\n    text-align:center;\n    max-width:720px;\n    margin:0 auto 100px;\n}\n\n.sg3-eyebrow{\n    display:inline-flex;\n    padding:10px 20px;\n    border-radius:999px;\n    background:#FBF3E1;\n    border:1px solid rgba(214,175,74,.25);\n    color:#B8891E;\n    font-weight:700;\n    font-size:13px;\n    margin-bottom:28px;\n}\n\n.sg3-p-head h2{\n    font-size:clamp(32px,4.6vw,54px);\n    line-height:1.12;\n    font-weight:900;\n    margin:0;\n}\n\n.sg3-p-head h2 span{\n    background:linear-gradient(90deg,#8c6612,#d6af4a,#E8C56C);\n    -webkit-background-clip:text;\n    -webkit-text-fill-color:transparent;\n}\n\n.sg3-p-head p{\n    margin-top:26px;\n    font-size:17px;\n    line-height:1.8;\n    color:#666;\n}\n\n.sg3-stage{\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    align-items:center;\n    gap:50px;\n    margin-bottom:110px;\n}\n\n.sg3-reverse{ direction:rtl; }\n.sg3-reverse > *{ direction:ltr; }\n\n.sg3-stage-media{\n    display:flex;\n    justify-content:center;\n}\n\n.sg3-stage-media img{\n    max-width:100%;\n    width:420px;\n    filter:drop-shadow(0 30px 50px rgba(0,0,0,.12));\n}\n\n.sg3-stage-card{\n    background:#F4F4F4;\n    border:1px solid rgba(0,0,0,.05);\n    border-radius:26px;\n    padding:40px 38px;\n}\n\n.sg3-step-tag{\n    display:inline-flex;\n    padding:8px 16px;\n    border-radius:999px;\n    background:#FFF3D6;\n    color:#B8891E;\n    font-size:12.5px;\n    font-weight:800;\n    letter-spacing:.06em;\n    margin-bottom:20px;\n}\n\n.sg3-stage-card h3{\n    font-size:30px;\n    font-weight:900;\n    margin:0 0 22px;\n    line-height:1.1;\n}\n\n.sg3-stage-card ul{\n    margin:0;\n    padding:0;\n    list-style:none;\n}\n\n.sg3-stage-card li{\n    position:relative;\n    padding-left:28px;\n    margin-bottom:14px;\n    font-size:15.5px;\n    line-height:1.65;\n    color:#444;\n}\n\n.sg3-stage-card li::before{\n    content:\"\u203a\";\n    position:absolute;\n    left:0;\n    top:0;\n    color:#D6AF4A;\n    font-weight:900;\n    font-size:18px;\n}\n\n.sg3-delay{\n    text-align:center;\n    font-size:15.5px;\n    color:#777;\n}\n\n.sg3-delay strong{ color:#B8891E; }\n\n.reveal3{\n    opacity:0;\n    transform:translateY(28px);\n    transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);\n}\n.reveal3.sg3-in{ opacity:1; transform:translateY(0); }\n\n@media(max-width:900px){\n    .sg3-stage, .sg3-reverse{\n        grid-template-columns:1fr;\n        direction:ltr;\n        gap:26px;\n    }\n    .sg3-stage-card{ padding:30px 26px; }\n    .sg3-stage-card h3{ font-size:26px; }\n}\n\n<\/style>\n\n<script>\n(function(){\n    \/\/ le trait se dessine au fil du scroll de la section\n    \/\/ (calcul limit\u00e9 via requestAnimationFrame + \u00e9coute passive pour \u00e9viter\n    \/\/ de saturer le thread principal \u00e0 chaque pixel scroll\u00e9 \u2014 c'est ce qui\n    \/\/ provoquait des saccades\/sauts pendant le scroll)\n    var path = document.getElementById(\"sg3-flow-path\");\n    var section = document.getElementById(\"sg3-process\");\n    var ticking3 = false;\n\n    function updateFlow(){\n        var rect = section.getBoundingClientRect();\n        var vh = window.innerHeight;\n        var total = rect.height + vh;\n        var seen = vh - rect.top;\n        var progress = Math.min(1, Math.max(0, seen \/ total));\n        var len = 4200;\n        path.style.strokeDashoffset = len - (len * progress);\n        ticking3 = false;\n    }\n    function onScrollProcess(){\n        if(!ticking3){\n            requestAnimationFrame(updateFlow);\n            ticking3 = true;\n        }\n    }\n    window.addEventListener(\"scroll\", onScrollProcess, { passive:true });\n    updateFlow();\n\n    \/\/ apparition au scroll des blocs\n    var els = document.querySelectorAll(\"#sg3-process .reveal3\");\n    var io = new IntersectionObserver(function(entries){\n        entries.forEach(function(e){\n            if(e.isIntersecting){ e.target.classList.add(\"sg3-in\"); io.unobserve(e.target); }\n        });\n    }, { threshold:0.15 });\n    els.forEach(function(el){ io.observe(el); });\n})();\n<\/script>\n<!-- =========================================================\n    SECTION 6 \u2014 POURQUOI SCALE GROUP (4 cartes)\n========================================================= -->\n\n<section id=\"sg4-pourquoi\">\n\n    <div class=\"sg-light-sweep\"><\/div>\n\n    <div class=\"sg4-wrap\">\n\n        <div class=\"sg4-head reveal4\">\n            <div class=\"sg4-eyebrow\">Ce qui nous diff\u00e9rencie<\/div>\n            <h2 class=\"tfx-4\">Pourquoi Scale Group.<\/h2>\n        <\/div>\n\n        <div class=\"sg4-why-grid\">\n\n            <div class=\"sg4-why-card reveal4\">\n                <div class=\"sg4-why-icon\">\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M13 2L3 14h7l-1 8 11-14h-7l1-6z\" stroke=\"#E8C56C\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/><\/svg>\n                <\/div>\n                <h3>Performance<\/h3>\n                <p>Des sites ultra-rapides, optimis\u00e9s pour le r\u00e9f\u00e9rencement et pour convertir d\u00e8s la premi\u00e8re seconde.<\/p>\n            <\/div>\n\n            <div class=\"sg4-why-card reveal4\">\n                <div class=\"sg4-why-icon\">\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"#E8C56C\" stroke-width=\"1.6\"\/><path d=\"M12 7v5l3 3\" stroke=\"#E8C56C\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/><\/svg>\n                <\/div>\n                <h3>Design<\/h3>\n                <p>Un design premium sur-mesure \u2014 jamais un template \u2014 qui refl\u00e8te l'excellence de votre entreprise.<\/p>\n            <\/div>\n\n            <div class=\"sg4-why-card reveal4\">\n                <div class=\"sg4-why-icon\">\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"4\" stroke=\"#E8C56C\" stroke-width=\"1.6\"\/><path d=\"M8 12h8M12 8v8\" stroke=\"#E8C56C\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/><\/svg>\n                <\/div>\n                <h3>Automatisation<\/h3>\n                <p>Des syst\u00e8mes qui captent, relancent et qualifient vos prospects automatiquement, 24h\/24.<\/p>\n            <\/div>\n\n            <div class=\"sg4-why-card reveal4\">\n                <div class=\"sg4-why-icon\">\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 2l3 6 6 1-4.5 4.5L18 20l-6-3-6 3 1.5-6.5L3 9l6-1 3-6z\" stroke=\"#E8C56C\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/><\/svg>\n                <\/div>\n                <h3>Accompagnement<\/h3>\n                <p>Un vrai suivi apr\u00e8s la livraison \u2014 on optimise en continu, pas juste au lancement.<\/p>\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<style>\n\n#sg4-pourquoi{\n    position:relative;\n    overflow:hidden;\n    background:#0a0a0a;\n    color:#fff;\n    font-family:Inter,sans-serif;\n    padding:130px 0;\n}\n\n#sg4-pourquoi *{ box-sizing:border-box; }\n\n.sg4-why-grid{\n    display:grid;\n    grid-template-columns:repeat(4,1fr);\n    gap:22px;\n    margin-top:64px;\n}\n\n.sg4-why-card{\n    background:rgba(255,255,255,.03);\n    border:1px solid rgba(255,255,255,.08);\n    border-radius:22px;\n    padding:38px 28px;\n    text-align:left;\n    transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .4s;\n}\n\n.sg4-why-card:hover{\n    transform:translateY(-8px);\n    border-color:rgba(232,197,108,.4);\n    box-shadow:0 30px 60px rgba(0,0,0,.45), 0 0 50px rgba(232,197,108,.1);\n}\n\n.sg4-why-icon{\n    width:52px;\n    height:52px;\n    border-radius:14px;\n    background:rgba(232,197,108,.08);\n    border:1px solid rgba(232,197,108,.2);\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    margin-bottom:24px;\n    transition:transform .4s;\n}\n\n.sg4-why-card:hover .sg4-why-icon{ transform:scale(1.1) rotate(-4deg); }\n\n.sg4-why-icon svg{ width:24px; height:24px; }\n\n.sg4-why-card h3{\n    font-size:19px;\n    font-weight:800;\n    margin:0 0 12px;\n}\n\n.sg4-why-card p{\n    font-size:14.5px;\n    line-height:1.7;\n    color:#9a9a9a;\n    margin:0;\n}\n\n.reveal4{\n    opacity:0;\n    transform:translateY(28px);\n    transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);\n}\n.reveal4.sg4-in{ opacity:1; transform:translateY(0); }\n\n.sg4-why-grid .sg4-why-card:nth-child(1){ transition-delay:.05s; }\n.sg4-why-grid .sg4-why-card:nth-child(2){ transition-delay:.15s; }\n.sg4-why-grid .sg4-why-card:nth-child(3){ transition-delay:.25s; }\n.sg4-why-grid .sg4-why-card:nth-child(4){ transition-delay:.35s; }\n\n.sg4-head{ text-align:center; }\n\n.sg4-eyebrow{\n    display:inline-flex;\n    padding:10px 20px;\n    border-radius:999px;\n    background:rgba(232,197,108,.08);\n    border:1px solid rgba(232,197,108,.25);\n    color:#E8C56C;\n    font-size:13px;\n    font-weight:600;\n    margin-bottom:24px;\n}\n\n.sg4-head h2{\n    font-size:clamp(28px,4vw,44px);\n    font-weight:900;\n    margin:0;\n}\n\n@media(max-width:900px){\n    .sg4-why-grid{ grid-template-columns:1fr 1fr; }\n}\n@media(max-width:600px){\n    .sg4-why-grid{ grid-template-columns:1fr; }\n}\n\n<\/style>\n\n<script>\n(function(){\n    var els = document.querySelectorAll(\"#sg4-pourquoi .reveal4\");\n    var io = new IntersectionObserver(function(entries){\n        entries.forEach(function(e){\n            if(e.isIntersecting){ e.target.classList.add(\"sg4-in\"); io.unobserve(e.target); }\n        });\n    }, { threshold:0.15 });\n    els.forEach(function(el){ io.observe(el); });\n})();\n<\/script>\n<!-- =========================================================\n    SECTION 7 \u2014 NOS R\u00c9ALISATIONS \n========================================================= -->\n<section id=\"sg-portfolio\">\n\n  <div class=\"sg-portfolio-inner\">\n\n    <div class=\"sg-portfolio-header\">\n\n      <div class=\"sg-eyebrow\">\n        NOS R\u00c9ALISATIONS\n      <\/div>\n\n      <h2>\n        Des projets concrets.\n        <span>Des r\u00e9sultats r\u00e9els.<\/span>\n      <\/h2>\n\n      <p>\n        D\u00e9couvrez une s\u00e9lection de sites que nous avons imagin\u00e9s,\n        con\u00e7us et d\u00e9velopp\u00e9s pour des marques ambitieuses.\n      <\/p>\n\n    <\/div>\n\n\n    <div class=\"sg-filters\">\n\n      <button class=\"sg-filter active\" data-filter=\"all\">\n        Tous\n      <\/button>\n\n      <button class=\"sg-filter\" data-filter=\"ecommerce\">\n        E-commerce\n      <\/button>\n\n      <button class=\"sg-filter\" data-filter=\"services\">\n        Services\n      <\/button>\n\n      <button class=\"sg-filter\" data-filter=\"beaute\">\n        Beaut\u00e9\n      <\/button>\n\n      <button class=\"sg-filter\" data-filter=\"restauration\">\n        Restauration\n      <\/button>\n\n      <button class=\"sg-filter\" data-filter=\"sport\">\n        Sport\n      <\/button>\n\n      <button class=\"sg-filter\" data-filter=\"autres\">\n        Autres\n      <\/button>\n\n    <\/div>\n\n\n    <div class=\"sg-stage\">\n\n      <button\n        class=\"sg-arrow sg-arrow-left\"\n        type=\"button\"\n        aria-label=\"Projet pr\u00e9c\u00e9dent\">\n        \u2039\n      <\/button>\n\n\n      <div\n        class=\"sg-carousel\"\n        id=\"sg-carousel\">\n      <\/div>\n\n\n      <button\n        class=\"sg-arrow sg-arrow-right\"\n        type=\"button\"\n        aria-label=\"Projet suivant\">\n        \u203a\n      <\/button>\n\n    <\/div>\n\n\n    <div\n      class=\"sg-dots\"\n      id=\"sg-dots\">\n    <\/div>\n\n\n    <div class=\"sg-carousel-hint\">\n      Cliquez sur un projet pour d\u00e9couvrir sa r\u00e9alisation\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<div\n  id=\"sg-project-modal\"\n  class=\"sg-modal\"\n  aria-hidden=\"true\">\n\n  <div class=\"sg-modal-backdrop\"><\/div>\n\n\n  <div\n    class=\"sg-modal-box\"\n    role=\"dialog\"\n    aria-modal=\"true\">\n\n\n    <button\n      type=\"button\"\n      class=\"sg-modal-close\"\n      aria-label=\"Fermer\">\n\n      <span>\u00d7<\/span>\n\n    <\/button>\n\n\n    <div class=\"sg-modal-left\">\n\n      <div class=\"sg-modal-image-wrapper\">\n\n        <img decoding=\"async\"\n          id=\"sg-modal-image\"\n          src=\"\"\n          alt=\"\">\n\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"sg-modal-right\">\n\n      <span\n        id=\"sg-modal-category\"\n        class=\"sg-modal-category\">\n      <\/span>\n\n\n      <h2 id=\"sg-modal-title\">\n      <\/h2>\n\n\n      <p id=\"sg-modal-description\">\n      <\/p>\n\n\n      <h4>\n        Prestations r\u00e9alis\u00e9es\n      <\/h4>\n\n\n      <ul\n        id=\"sg-modal-services\"\n        class=\"sg-services\">\n      <\/ul>\n\n\n      <div class=\"sg-modal-actions\">\n\n        <button\n          type=\"button\"\n          id=\"sg-contact-project\"\n          class=\"sg-primary-button\">\n\n          <span>\n            Je veux un site comme celui-ci\n          <\/span>\n\n          <span class=\"sg-button-arrow\">\n            \u2192\n          <\/span>\n\n        <\/button>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n\n\n<style>\n\n\/* =========================================================\n   SCALE GROUP \u2014 PORTFOLIO 3D\n========================================================= *\/\n\n#sg-portfolio{\n\n  position:relative;\n\n  overflow:hidden;\n\n  padding:100px 0 90px;\n\n  background:#070707;\n\n  color:#fff;\n\n  font-family:\n    Inter,\n    Arial,\n    sans-serif;\n\n}\n\n\n#sg-portfolio *,\n#sg-project-modal *{\n\n  box-sizing:border-box;\n\n}\n\n\n\/* =========================================================\n   BACKGROUND\n========================================================= *\/\n\n#sg-portfolio:before{\n\n  content:\"\";\n\n  position:absolute;\n\n  width:1000px;\n\n  height:700px;\n\n  left:50%;\n\n  top:180px;\n\n  transform:translateX(-50%);\n\n  background:\n    radial-gradient(\n      ellipse,\n      rgba(210,157,61,.16),\n      transparent 65%\n    );\n\n  pointer-events:none;\n\n}\n\n\n#sg-portfolio:after{\n\n  content:\"\";\n\n  position:absolute;\n\n  width:500px;\n\n  height:500px;\n\n  left:50%;\n\n  top:500px;\n\n  transform:translateX(-50%);\n\n  background:\n    radial-gradient(\n      circle,\n      rgba(255,255,255,.035),\n      transparent 70%\n    );\n\n  pointer-events:none;\n\n}\n\n\n\/* =========================================================\n   CONTAINER\n========================================================= *\/\n\n.sg-portfolio-inner{\n\n  width:94%;\n\n  max-width:1350px;\n\n  margin:auto;\n\n  position:relative;\n\n  z-index:2;\n\n}\n\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n.sg-portfolio-header{\n\n  text-align:center;\n\n  max-width:900px;\n\n  margin:\n    0\n    auto\n    35px;\n\n}\n\n\n.sg-eyebrow{\n\n  color:#E2B25D;\n\n  font-size:12px;\n\n  letter-spacing:.22em;\n\n  font-weight:600;\n\n}\n\n\n.sg-portfolio-header h2{\n\n  font-size:\n    clamp(\n      38px,\n      5vw,\n      64px\n    );\n\n  line-height:1.04;\n\n  letter-spacing:-.04em;\n\n  margin:15px 0;\n\n  font-weight:700;\n\n}\n\n\n.sg-portfolio-header h2 span{\n\n  color:#DDAE58;\n\n}\n\n\n.sg-portfolio-header p{\n\n  color:#999;\n\n  font-size:15px;\n\n  line-height:1.7;\n\n  max-width:700px;\n\n  margin:auto;\n\n}\n\n\n\/* =========================================================\n   FILTRES\n========================================================= *\/\n\n.sg-filters{\n\n  display:flex;\n\n  justify-content:center;\n\n  flex-wrap:wrap;\n\n  gap:9px;\n\n  margin:\n    30px\n    0\n    40px;\n\n  position:relative;\n\n  z-index:20;\n\n}\n\n\n.sg-filter{\n\n  appearance:none;\n\n  border:\n    1px solid\n    rgba(255,255,255,.14);\n\n  background:\n    rgba(255,255,255,.04);\n\n  color:#aaa;\n\n  border-radius:999px;\n\n  padding:\n    11px\n    20px;\n\n  cursor:pointer;\n\n  font-size:13px;\n\n  transition:\n    .25s\n    ease;\n\n}\n\n\n.sg-filter:hover{\n\n  color:#fff;\n\n  border-color:#DDAE58;\n\n  background:\n    rgba(221,174,88,.08);\n\n}\n\n\n.sg-filter.active{\n\n  color:#111;\n\n  border-color:#DDAE58;\n\n  background:\n    linear-gradient(\n      135deg,\n      #F4CC78,\n      #B97D22\n    );\n\n  box-shadow:\n    0 8px 25px\n    rgba(221,174,88,.16);\n\n}\n\n\n\/* =========================================================\n   STAGE 3D\n========================================================= *\/\n\n.sg-stage{\n\n  position:relative;\n\n  height:650px;\n\n  perspective:1700px;\n\n  transform-style:preserve-3d;\n\n}\n\n\n\/* =========================================================\n   CARROUSEL\n========================================================= *\/\n\n.sg-carousel{\n\n  position:relative;\n\n  width:100%;\n\n  height:100%;\n\n  transform-style:preserve-3d;\n\n}\n\n\n\/* =========================================================\n   PROJET\n========================================================= *\/\n\n.sg-project{\n\n  position:absolute;\n\n  width:350px;\n\n  left:50%;\n\n  top:25px;\n\n  cursor:pointer;\n\n  transform-style:preserve-3d;\n\n  transition:\n    transform\n    .65s\n    cubic-bezier(.2,.8,.2,1),\n\n    opacity\n    .5s\n    ease,\n\n    filter\n    .5s\n    ease;\n\n  user-select:none;\n\n}\n\n\n.sg-project:hover{\n\n  filter:\n    brightness(1.08);\n\n}\n\n\n\/* =========================================================\n   IMAGE\n========================================================= *\/\n\n.sg-project-image{\n\n  position:relative;\n\n  height:475px;\n\n  border-radius:20px;\n\n  overflow:hidden;\n\n  background:#111;\n\n  border:\n    1px solid\n    rgba(255,255,255,.14);\n\n  box-shadow:\n    0 35px 100px\n    rgba(0,0,0,.7);\n\n}\n\n\n.sg-project-image img{\n\n  width:100%;\n\n  height:100%;\n\n  object-fit:cover;\n\n  display:block;\n\n}\n\n\n.sg-image-overlay{\n\n  position:absolute;\n\n  inset:0;\n\n  background:\n    linear-gradient(\n      to bottom,\n      rgba(0,0,0,.02) 25%,\n      rgba(0,0,0,.75) 100%\n    );\n\n  pointer-events:none;\n\n}\n\n\n\/* =========================================================\n   CATEGORY\n========================================================= *\/\n\n.sg-category{\n\n  position:absolute;\n\n  bottom:15px;\n\n  left:15px;\n\n  padding:\n    7px\n    13px;\n\n  border-radius:999px;\n\n  background:\n    rgba(0,0,0,.62);\n\n  border:\n    1px solid\n    rgba(255,255,255,.18);\n\n  backdrop-filter:blur(12px);\n\n  -webkit-backdrop-filter:blur(12px);\n\n  font-size:11px;\n\n}\n\n\n\/* =========================================================\n   EN SAVOIR PLUS\n========================================================= *\/\n\n.sg-more{\n\n  position:absolute;\n\n  top:15px;\n\n  right:15px;\n\n  border:\n    1px solid\n    rgba(255,255,255,.3);\n\n  background:\n    rgba(0,0,0,.42);\n\n  backdrop-filter:blur(12px);\n\n  -webkit-backdrop-filter:blur(12px);\n\n  color:#fff;\n\n  padding:\n    10px\n    15px;\n\n  border-radius:999px;\n\n  cursor:pointer;\n\n  transition:\n    .25s\n    ease;\n\n  font-size:12px;\n\n}\n\n\n.sg-more:hover{\n\n  background:#fff;\n\n  color:#111;\n\n  transform:\n    translateY(-1px);\n\n}\n\n\n\/* =========================================================\n   INFO\n========================================================= *\/\n\n.sg-project-info{\n\n  display:flex;\n\n  justify-content:space-between;\n\n  align-items:center;\n\n  gap:15px;\n\n  padding:\n    17px\n    3px;\n\n}\n\n\n.sg-project-info h3{\n\n  margin:\n    0\n    0\n    5px;\n\n  font-size:21px;\n\n}\n\n\n.sg-project-info p{\n\n  margin:0;\n\n  color:#858585;\n\n  font-size:12px;\n\n}\n\n\n\/* =========================================================\n   BOUTON VOIR LE PROJET\n========================================================= *\/\n\n.sg-project-button{\n\n  border:\n    1px solid\n    #DDAE58;\n\n  background:transparent;\n\n  color:#DDAE58;\n\n  padding:\n    10px\n    15px;\n\n  border-radius:999px;\n\n  white-space:nowrap;\n\n  cursor:pointer;\n\n  transition:\n    .25s;\n\n}\n\n\n.sg-project-button:hover{\n\n  background:#DDAE58;\n\n  color:#111;\n\n}\n\n\n\/* =========================================================\n   DOTS\n========================================================= *\/\n\n.sg-dots{\n\n  display:flex;\n\n  justify-content:center;\n\n  align-items:center;\n\n  gap:8px;\n\n}\n\n\n.sg-dot{\n\n  width:8px;\n\n  height:8px;\n\n  padding:0;\n\n  border:0;\n\n  border-radius:50%;\n\n  background:#444;\n\n  cursor:pointer;\n\n  transition:\n    .3s;\n\n}\n\n\n.sg-dot.active{\n\n  width:27px;\n\n  border-radius:20px;\n\n  background:#DDAE58;\n\n  box-shadow:\n    0 0 12px\n    rgba(221,174,88,.35);\n\n}\n\n\n\/* =========================================================\n   HINT\n========================================================= *\/\n\n.sg-carousel-hint{\n\n  text-align:center;\n\n  color:#777;\n\n  font-size:12px;\n\n  margin-top:17px;\n\n}\n\n\n\/* =========================================================\n   FL\u00c8CHES OR\n   PC UNIQUEMENT \u2014 POSITION D'ORIGINE\n========================================================= *\/\n\n.sg-arrow{\n\n  position:absolute;\n\n  z-index:100;\n\n  top:43%;\n\n  width:55px;\n\n  height:55px;\n\n  display:flex;\n\n  align-items:center;\n\n  justify-content:center;\n\n  padding:0;\n\n  border-radius:50%;\n\n  border:\n    1px solid\n    rgba(221,174,88,.85);\n\n  background:\n    linear-gradient(\n      135deg,\n      #F4CC78,\n      #B97D22\n    );\n\n  color:#111;\n\n  font-size:32px;\n\n  font-family:Arial,sans-serif;\n\n  line-height:1;\n\n  cursor:pointer;\n\n  box-shadow:\n    0 8px 25px\n    rgba(221,174,88,.22),\n\n    inset 0 1px 0\n    rgba(255,255,255,.55);\n\n  transition:\n    .3s\n    ease;\n\n}\n\n\n.sg-arrow-left{\n\n  left:15px;\n\n}\n\n\n.sg-arrow-right{\n\n  right:15px;\n\n}\n\n\n.sg-arrow:hover{\n\n  background:\n    linear-gradient(\n      135deg,\n      #FFE3A5,\n      #DDAE58\n    );\n\n  color:#111;\n\n  border-color:#F4CC78;\n\n  box-shadow:\n    0 0 30px\n    rgba(221,174,88,.45),\n\n    0 10px 30px\n    rgba(0,0,0,.35);\n\n  transform:\n    translateY(-50%)\n    scale(1.08);\n\n}\n\n\n\/* =========================================================\n   MODAL\n========================================================= *\/\n\n.sg-modal{\n\n  position:fixed;\n\n  inset:0;\n\n  z-index:999999;\n\n  display:none;\n\n  align-items:center;\n\n  justify-content:center;\n\n  padding:30px;\n\n}\n\n\n.sg-modal.sg-modal-open{\n\n  display:flex;\n\n}\n\n\n.sg-modal-backdrop{\n\n  position:absolute;\n\n  inset:0;\n\n  background:\n    rgba(0,0,0,.86);\n\n  backdrop-filter:blur(18px);\n\n  -webkit-backdrop-filter:blur(18px);\n\n}\n\n\n.sg-modal-box{\n\n  position:relative;\n\n  z-index:2;\n\n  width:\n    min(\n      1100px,\n      100%\n    );\n\n  max-height:90vh;\n\n  display:grid;\n\n  grid-template-columns:\n    1fr\n    1fr;\n\n  background:#101010;\n\n  border:\n    1px solid\n    rgba(255,255,255,.15);\n\n  border-radius:24px;\n\n  overflow:auto;\n\n  box-shadow:\n    0 40px 120px\n    rgba(0,0,0,.85);\n\n  animation:\n    sgModalIn\n    .45s\n    cubic-bezier(.2,.8,.2,1)\n    both;\n\n}\n\n\n@keyframes sgModalIn{\n\n  from{\n\n    opacity:0;\n\n    transform:\n      translateY(25px)\n      scale(.96);\n\n  }\n\n  to{\n\n    opacity:1;\n\n    transform:\n      translateY(0)\n      scale(1);\n\n  }\n\n}\n\n\n\/* =========================================================\n   CROIX OR\n========================================================= *\/\n\n.sg-modal-close{\n\n  position:absolute;\n\n  top:18px;\n\n  right:18px;\n\n  z-index:100;\n\n  width:48px;\n\n  height:48px;\n\n  display:flex;\n\n  align-items:center;\n\n  justify-content:center;\n\n  padding:0;\n\n  margin:0;\n\n  border-radius:50%;\n\n  border:\n    1px solid\n    rgba(221,174,88,.85);\n\n  background:\n    linear-gradient(\n      135deg,\n      #F4CC78,\n      #B97D22\n    );\n\n  color:#111;\n\n  cursor:pointer;\n\n  box-shadow:\n    0 8px 25px\n    rgba(221,174,88,.22),\n\n    inset 0 1px 0\n    rgba(255,255,255,.55);\n\n  transition:\n    .3s\n    ease;\n\n}\n\n\n.sg-modal-close span{\n\n  display:flex;\n\n  align-items:center;\n\n  justify-content:center;\n\n  width:100%;\n\n  height:100%;\n\n  margin:0;\n\n  padding:0;\n\n  font-family:\n    Arial,\n    sans-serif;\n\n  font-size:28px;\n\n  font-weight:400;\n\n  line-height:1;\n\n  color:#111;\n\n  transform:none;\n\n}\n\n\n.sg-modal-close:hover{\n\n  background:\n    linear-gradient(\n      135deg,\n      #FFE3A5,\n      #DDAE58\n    );\n\n  color:#111;\n\n  border-color:#F4CC78;\n\n  box-shadow:\n    0 0 30px\n    rgba(221,174,88,.45),\n\n    0 10px 30px\n    rgba(0,0,0,.35);\n\n  transform:\n    rotate(90deg)\n    scale(1.08);\n\n}\n\n\n.sg-modal-close:hover span{\n\n  color:#111;\n\n}\n\n\n\/* =========================================================\n   IMAGE MODAL\n========================================================= *\/\n\n.sg-modal-left{\n\n  min-height:620px;\n\n  background:#080808;\n\n  padding:25px;\n\n}\n\n\n.sg-modal-image-wrapper{\n\n  width:100%;\n\n  height:100%;\n\n  min-height:570px;\n\n  border-radius:15px;\n\n  overflow:hidden;\n\n  background:#151515;\n\n}\n\n\n.sg-modal-image-wrapper img{\n\n  width:100%;\n\n  height:100%;\n\n  object-fit:cover;\n\n  display:block;\n\n}\n\n\n\/* =========================================================\n   MODAL DROITE\n========================================================= *\/\n\n.sg-modal-right{\n\n  padding:\n    70px\n    45px\n    45px;\n\n  display:flex;\n\n  flex-direction:column;\n\n  justify-content:center;\n\n}\n\n\n.sg-modal-category{\n\n  width:max-content;\n\n  padding:\n    7px\n    13px;\n\n  border-radius:999px;\n\n  background:\n    rgba(221,174,88,.12);\n\n  color:#E3B55E;\n\n  font-size:11px;\n\n  margin-bottom:14px;\n\n}\n\n\n.sg-modal-right h2{\n\n  font-size:42px;\n\n  margin:\n    0\n    0\n    15px;\n\n  line-height:1.05;\n\n}\n\n\n.sg-modal-right p{\n\n  color:#999;\n\n  line-height:1.7;\n\n  font-size:14px;\n\n  margin:0;\n\n}\n\n\n.sg-modal-right h4{\n\n  margin:\n    25px\n    0\n    12px;\n\n  font-size:14px;\n\n}\n\n\n\/* =========================================================\n   SERVICES\n========================================================= *\/\n\n.sg-services{\n\n  list-style:none;\n\n  padding:0;\n\n  margin:0;\n\n}\n\n\n.sg-services li{\n\n  position:relative;\n\n  padding:\n    7px\n    0\n    7px\n    25px;\n\n  color:#ddd;\n\n  font-size:13px;\n\n}\n\n\n.sg-services li:before{\n\n  content:\"\u2713\";\n\n  position:absolute;\n\n  left:0;\n\n  color:#DDAE58;\n\n  font-weight:700;\n\n}\n\n\n\/* =========================================================\n   ACTION\n========================================================= *\/\n\n.sg-modal-actions{\n\n  display:flex;\n\n  flex-direction:column;\n\n  gap:10px;\n\n  margin-top:28px;\n\n}\n\n\n\/* =========================================================\n   BOUTON WHATSAPP\n========================================================= *\/\n\n.sg-primary-button{\n\n  position:relative;\n\n  isolation:isolate;\n\n  overflow:hidden;\n\n  width:100%;\n\n  min-height:58px;\n\n  display:flex;\n\n  align-items:center;\n\n  justify-content:center;\n\n  gap:12px;\n\n  border:\n    1px solid\n    rgba(255,255,255,.28);\n\n  border-radius:12px;\n\n  background:\n    linear-gradient(\n      135deg,\n      #F6D083 0%,\n      #DDAE58 48%,\n      #B97D22 100%\n    );\n\n  color:#111;\n\n  font-size:13px;\n\n  font-weight:700;\n\n  cursor:pointer;\n\n  box-shadow:\n\n    0 10px 35px\n    rgba(221,174,88,.22),\n\n    inset 0 1px 0\n    rgba(255,255,255,.6);\n\n  transition:\n    transform\n    .3s\n    ease,\n\n    box-shadow\n    .3s\n    ease;\n\n}\n\n\n.sg-primary-button:before{\n\n  content:\"\";\n\n  position:absolute;\n\n  top:-100%;\n\n  left:-65%;\n\n  width:42%;\n\n  height:300%;\n\n  transform:\n    rotate(25deg);\n\n  background:\n    linear-gradient(\n      90deg,\n      transparent,\n      rgba(255,255,255,.7),\n      rgba(255,255,255,.25),\n      transparent\n    );\n\n  filter:\n    blur(2px);\n\n  animation:\n    sgButtonReflection\n    3s\n    ease-in-out\n    infinite;\n\n  pointer-events:none;\n\n  z-index:-1;\n\n}\n\n\n.sg-primary-button:after{\n\n  content:\"\";\n\n  position:absolute;\n\n  inset:0;\n\n  border-radius:inherit;\n\n  background:\n    linear-gradient(\n      120deg,\n      transparent 20%,\n      rgba(255,255,255,.25),\n      transparent 80%\n    );\n\n  animation:\n    sgButtonPulse\n    2.5s\n    ease-in-out\n    infinite;\n\n  pointer-events:none;\n\n  z-index:-1;\n\n}\n\n\n@keyframes sgButtonReflection{\n\n  0%{\n    left:-65%;\n    opacity:0;\n  }\n\n  10%{\n    opacity:1;\n  }\n\n  45%{\n    opacity:1;\n  }\n\n  68%{\n    left:125%;\n    opacity:0;\n  }\n\n  100%{\n    left:125%;\n    opacity:0;\n  }\n\n}\n\n\n@keyframes sgButtonPulse{\n\n  0%,\n  100%{\n    opacity:.25;\n  }\n\n  50%{\n    opacity:.75;\n  }\n\n}\n\n\n.sg-primary-button:hover{\n\n  transform:\n    translateY(-2px)\n    scale(1.01);\n\n  box-shadow:\n\n    0 15px 45px\n    rgba(221,174,88,.4),\n\n    0 0 30px\n    rgba(221,174,88,.18),\n\n    inset 0 1px 0\n    rgba(255,255,255,.75);\n\n}\n\n\n.sg-primary-button:active{\n\n  transform:\n    scale(.985);\n\n}\n\n\n.sg-button-arrow{\n\n  font-size:18px;\n\n}\n\n\n\/* =========================================================\n   TABLET \/ MOBILE\n========================================================= *\/\n\n@media(max-width:900px){\n\n  .sg-stage{\n\n    height:590px;\n\n  }\n\n\n  .sg-project{\n\n    width:290px;\n\n  }\n\n\n  .sg-project-image{\n\n    height:410px;\n\n  }\n\n\n  .sg-modal-box{\n\n    grid-template-columns:1fr;\n\n  }\n\n\n  .sg-modal-left{\n\n    min-height:400px;\n\n  }\n\n\n  .sg-modal-image-wrapper{\n\n    min-height:400px;\n\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE UNIQUEMENT\n========================================================= *\/\n\n@media(max-width:600px){\n\n  #sg-portfolio{\n\n    padding:\n      70px\n      0;\n\n  }\n\n\n  .sg-portfolio-inner{\n\n    width:94%;\n\n  }\n\n\n  .sg-portfolio-header h2{\n\n    font-size:35px;\n\n  }\n\n\n  .sg-portfolio-header p{\n\n    font-size:13px;\n\n  }\n\n\n  .sg-filters{\n\n    justify-content:flex-start;\n\n    flex-wrap:nowrap;\n\n    overflow-x:auto;\n\n    padding-bottom:7px;\n\n    scrollbar-width:none;\n\n  }\n\n\n  .sg-filters::-webkit-scrollbar{\n\n    display:none;\n\n  }\n\n\n  .sg-filter{\n\n    flex-shrink:0;\n\n  }\n\n\n  .sg-stage{\n\n    height:555px;\n\n  }\n\n\n  .sg-project{\n\n    width:250px;\n\n  }\n\n\n  .sg-project-image{\n\n    height:370px;\n\n  }\n\n\n  \/* =====================================================\n     FL\u00c8CHES MOBILE UNIQUEMENT\n     AU PREMIER PLAN\n     CENTR\u00c9ES SUR L'IMAGE DU PROJET\n  ===================================================== *\/\n\n  .sg-arrow{\n\n    width:45px;\n\n    height:45px;\n\n    display:flex;\n\n    align-items:center;\n\n    justify-content:center;\n\n    padding:0;\n\n    top:210px;\n\n    z-index:1000;\n\n    font-size:25px;\n\n    transform:\n      translateY(-50%);\n\n  }\n\n\n  .sg-arrow:hover{\n\n    transform:\n      translateY(-50%)\n      scale(1.08);\n\n  }\n\n\n  .sg-arrow-left{\n\n    left:calc(50% - 145px);\n\n  }\n\n\n  .sg-arrow-right{\n\n    right:calc(50% - 145px);\n\n  }\n\n\n  .sg-project-info{\n\n    flex-direction:column;\n\n    align-items:flex-start;\n\n  }\n\n\n  .sg-project-button{\n\n    width:100%;\n\n  }\n\n\n  .sg-modal{\n\n    padding:10px;\n\n  }\n\n\n  .sg-modal-box{\n\n    max-height:95vh;\n\n    border-radius:18px;\n\n  }\n\n\n  .sg-modal-close{\n\n    top:12px;\n\n    right:12px;\n\n    width:44px;\n\n    height:44px;\n\n  }\n\n\n  .sg-modal-close span{\n\n    font-size:24px;\n\n  }\n\n\n  .sg-modal-right{\n\n    padding:\n      30px\n      22px;\n\n  }\n\n\n  .sg-modal-right h2{\n\n    font-size:32px;\n\n  }\n\n\n  .sg-modal-left{\n\n    min-height:300px;\n\n    padding:15px;\n\n  }\n\n\n  .sg-modal-image-wrapper{\n\n    min-height:300px;\n\n  }\n\n}\n\n<\/style>\n\n\n\n<script>\n\n(function(){\n\n  \"use strict\";\n\n\n  const WHATSAPP_NUMBER =\n    \"33612345678\";\n\n\n  const carousel =\n    document.getElementById(\n      \"sg-carousel\"\n    );\n\n\n  const dotsContainer =\n    document.getElementById(\n      \"sg-dots\"\n    );\n\n\n  const prev =\n    document.querySelector(\n      \".sg-arrow-left\"\n    );\n\n\n  const next =\n    document.querySelector(\n      \".sg-arrow-right\"\n    );\n\n\n  const modal =\n    document.getElementById(\n      \"sg-project-modal\"\n    );\n\n\n  const modalClose =\n    document.querySelector(\n      \".sg-modal-close\"\n    );\n\n\n  const modalBackdrop =\n    document.querySelector(\n      \".sg-modal-backdrop\"\n    );\n\n\n  const contactButton =\n    document.getElementById(\n      \"sg-contact-project\"\n    );\n\n\n  if(!carousel){\n    return;\n  }\n\n\n  const projectData = [\n\n    {\n      id:\"purity\",\n      title:\"Purity\",\n      category:\"E-commerce\",\n      filter:\"ecommerce\",\n      media:\"https:\/\/scale-group.fr\/wp-content\/uploads\/2026\/08\/site.png\",\n      description:\"Une exp\u00e9rience e-commerce moderne pens\u00e9e pour une marque de v\u00eatements de sport, avec une pr\u00e9sentation claire et un parcours orient\u00e9 conversion.\",\n      services:[\n        \"Design sur mesure\",\n        \"D\u00e9veloppement Web\",\n        \"E-commerce\",\n        \"Optimisation mobile\",\n        \"Strat\u00e9gie de conversion\"\n      ]\n    },\n\n    {\n      id:\"one\",\n      title:\"ONE\",\n      category:\"Beaut\u00e9\",\n      filter:\"beaute\",\n      media:\"https:\/\/scale-group.fr\/wp-content\/uploads\/2026\/08\/site-2.png\",\n      description:\"Un site premium con\u00e7u pour une marque de cosm\u00e9tique avec une identit\u00e9 visuelle forte et une exp\u00e9rience utilisateur fluide.\",\n      services:[\n        \"Design premium\",\n        \"D\u00e9veloppement Shopify\",\n        \"Cr\u00e9ation de contenu\",\n        \"Optimisation SEO\",\n        \"Strat\u00e9gie de conversion\"\n      ]\n    },\n\n    {\n      id:\"myobsession\",\n      title:\"My Obsession\",\n      category:\"E-commerce\",\n      filter:\"ecommerce\",\n      media:\"https:\/\/scale-group.fr\/wp-content\/uploads\/2026\/08\/site-3.png\",\n      description:\"Un univers e-commerce \u00e9l\u00e9gant destin\u00e9 \u00e0 mettre en valeur une collection d'accessoires avec une exp\u00e9rience d'achat premium.\",\n      services:[\n        \"Direction artistique\",\n        \"Design Web\",\n        \"E-commerce\",\n        \"UX\/UI\",\n        \"Optimisation mobile\"\n      ]\n    },\n\n    {\n      id:\"projet4\",\n      title:\"Projet 04\",\n      category:\"Services\",\n      filter:\"services\",\n      media:\"https:\/\/placehold.co\/800x1100\/111111\/D9A94F?text=PROJET+04\",\n      description:\"Un site vitrine moderne con\u00e7u pour pr\u00e9senter clairement une activit\u00e9 et transformer les visiteurs en prospects.\",\n      services:[\n        \"Design Web\",\n        \"Site vitrine\",\n        \"UX\/UI\",\n        \"Responsive\",\n        \"Conversion\"\n      ]\n    },\n\n    {\n      id:\"projet5\",\n      title:\"Projet 05\",\n      category:\"Restauration\",\n      filter:\"restauration\",\n      media:\"https:\/\/placehold.co\/800x1100\/171717\/D9A94F?text=PROJET+05\",\n      description:\"Une exp\u00e9rience digitale pens\u00e9e pour pr\u00e9senter une offre de restauration et faciliter le parcours client.\",\n      services:[\n        \"Design Web\",\n        \"E-commerce\",\n        \"UX\/UI\",\n        \"Responsive\",\n        \"Conversion\"\n      ]\n    },\n\n    {\n      id:\"projet6\",\n      title:\"Projet 06\",\n      category:\"Sport\",\n      filter:\"sport\",\n      media:\"https:\/\/placehold.co\/800x1100\/111111\/D9A94F?text=PROJET+06\",\n      description:\"Une identit\u00e9 digitale sportive et moderne avec une navigation pens\u00e9e pour une audience mobile.\",\n      services:[\n        \"Direction artistique\",\n        \"Design Web\",\n        \"E-commerce\",\n        \"Responsive\",\n        \"Conversion\"\n      ]\n    },\n\n    {\n      id:\"projet7\",\n      title:\"Projet 07\",\n      category:\"E-commerce\",\n      filter:\"ecommerce\",\n      media:\"https:\/\/placehold.co\/800x1100\/111111\/D9A94F?text=PROJET+07\",\n      description:\"Projet e-commerce r\u00e9alis\u00e9 par Scale Group.\",\n      services:[\n        \"Design Web\",\n        \"E-commerce\",\n        \"UX\/UI\",\n        \"SEO\",\n        \"Conversion\"\n      ]\n    },\n\n    {\n      id:\"projet8\",\n      title:\"Projet 08\",\n      category:\"Services\",\n      filter:\"services\",\n      media:\"https:\/\/placehold.co\/800x1100\/111111\/D9A94F?text=PROJET+08\",\n      description:\"Projet digital r\u00e9alis\u00e9 par Scale Group.\",\n      services:[\n        \"Design Web\",\n        \"Site vitrine\",\n        \"UX\/UI\",\n        \"SEO\",\n        \"Conversion\"\n      ]\n    },\n\n    {\n      id:\"projet9\",\n      title:\"Projet 09\",\n      category:\"Beaut\u00e9\",\n      filter:\"beaute\",\n      media:\"https:\/\/placehold.co\/800x1100\/111111\/D9A94F?text=PROJET+09\",\n      description:\"Projet beaut\u00e9 r\u00e9alis\u00e9 par Scale Group.\",\n      services:[\n        \"Direction artistique\",\n        \"Design Web\",\n        \"UX\/UI\",\n        \"SEO\",\n        \"Conversion\"\n      ]\n    },\n\n    {\n      id:\"projet10\",\n      title:\"Projet 10\",\n      category:\"Restauration\",\n      filter:\"restauration\",\n      media:\"https:\/\/placehold.co\/800x1100\/111111\/D9A94F?text=PROJET+10\",\n      description:\"Projet restauration r\u00e9alis\u00e9 par Scale Group.\",\n      services:[\n        \"Design Web\",\n        \"E-commerce\",\n        \"UX\/UI\",\n        \"Mobile\",\n        \"Conversion\"\n      ]\n    },\n\n    {\n      id:\"projet11\",\n      title:\"Projet 11\",\n      category:\"Sport\",\n      filter:\"sport\",\n      media:\"https:\/\/placehold.co\/800x1100\/111111\/D9A94F?text=PROJET+11\",\n      description:\"Projet sport r\u00e9alis\u00e9 par Scale Group.\",\n      services:[\n        \"Design Web\",\n        \"Branding\",\n        \"UX\/UI\",\n        \"SEO\",\n        \"Conversion\"\n      ]\n    },\n\n    {\n      id:\"projet12\",\n      title:\"Projet 12\",\n      category:\"Autres\",\n      filter:\"autres\",\n      media:\"https:\/\/placehold.co\/800x1100\/111111\/D9A94F?text=PROJET+12\",\n      description:\"Projet digital r\u00e9alis\u00e9 par Scale Group.\",\n      services:[\n        \"Design Web\",\n        \"UX\/UI\",\n        \"SEO\",\n        \"Responsive\",\n        \"Conversion\"\n      ]\n    },\n\n    {\n      id:\"projet13\",\n      title:\"Projet 13\",\n      category:\"E-commerce\",\n      filter:\"ecommerce\",\n      media:\"https:\/\/placehold.co\/800x1100\/111111\/D9A94F?text=PROJET+13\",\n      description:\"Projet e-commerce r\u00e9alis\u00e9 par Scale Group.\",\n      services:[\n        \"Design Web\",\n        \"E-commerce\",\n        \"UX\/UI\",\n        \"SEO\",\n        \"Conversion\"\n      ]\n    },\n\n    {\n      id:\"projet14\",\n      title:\"Projet 14\",\n      category:\"Services\",\n      filter:\"services\",\n      media:\"https:\/\/placehold.co\/800x1100\/111111\/D9A94F?text=PROJET+14\",\n      description:\"Projet services r\u00e9alis\u00e9 par Scale Group.\",\n      services:[\n        \"Design Web\",\n        \"Site vitrine\",\n        \"UX\/UI\",\n        \"SEO\",\n        \"Conversion\"\n      ]\n    },\n\n    {\n      id:\"projet15\",\n      title:\"Projet 15\",\n      category:\"Beaut\u00e9\",\n      filter:\"beaute\",\n      media:\"https:\/\/placehold.co\/800x1100\/111111\/D9A94F?text=PROJET+15\",\n      description:\"Projet beaut\u00e9 r\u00e9alis\u00e9 par Scale Group.\",\n      services:[\n        \"Design Web\",\n        \"Branding\",\n        \"UX\/UI\",\n        \"SEO\",\n        \"Conversion\"\n      ]\n    },\n\n    {\n      id:\"projet16\",\n      title:\"Projet 16\",\n      category:\"E-commerce\",\n      filter:\"ecommerce\",\n      media:\"https:\/\/placehold.co\/800x1100\/111111\/D9A94F?text=PROJET+16\",\n      description:\"Projet e-commerce r\u00e9alis\u00e9 par Scale Group.\",\n      services:[\n        \"Design Web\",\n        \"E-commerce\",\n        \"UX\/UI\",\n        \"SEO\",\n        \"Conversion\"\n      ]\n    },\n\n    {\n      id:\"projet17\",\n      title:\"Projet 17\",\n      category:\"Restauration\",\n      filter:\"restauration\",\n      media:\"https:\/\/placehold.co\/800x1100\/111111\/D9A94F?text=PROJET+17\",\n      description:\"Projet restauration r\u00e9alis\u00e9 par Scale Group.\",\n      services:[\n        \"Design Web\",\n        \"E-commerce\",\n        \"UX\/UI\",\n        \"Mobile\",\n        \"Conversion\"\n      ]\n    },\n\n    {\n      id:\"projet18\",\n      title:\"Projet 18\",\n      category:\"Sport\",\n      filter:\"sport\",\n      media:\"https:\/\/placehold.co\/800x1100\/111111\/D9A94F?text=PROJET+18\",\n      description:\"Projet sport r\u00e9alis\u00e9 par Scale Group.\",\n      services:[\n        \"Design Web\",\n        \"Branding\",\n        \"UX\/UI\",\n        \"SEO\",\n        \"Conversion\"\n      ]\n    },\n\n    {\n      id:\"projet19\",\n      title:\"Projet 19\",\n      category:\"Services\",\n      filter:\"services\",\n      media:\"https:\/\/placehold.co\/800x1100\/111111\/D9A94F?text=PROJET+19\",\n      description:\"Projet services r\u00e9alis\u00e9 par Scale Group.\",\n      services:[\n        \"Design Web\",\n        \"Site vitrine\",\n        \"UX\/UI\",\n        \"SEO\",\n        \"Conversion\"\n      ]\n    },\n\n    {\n      id:\"projet20\",\n      title:\"Projet 20\",\n      category:\"Autres\",\n      filter:\"autres\",\n      media:\"https:\/\/placehold.co\/800x1100\/111111\/D9A94F?text=PROJET+20\",\n      description:\"Projet digital r\u00e9alis\u00e9 par Scale Group.\",\n      services:[\n        \"Design Web\",\n        \"UX\/UI\",\n        \"SEO\",\n        \"Responsive\",\n        \"Conversion\"\n      ]\n    },\n\n    {\n      id:\"projet21\",\n      title:\"Projet 21\",\n      category:\"E-commerce\",\n      filter:\"ecommerce\",\n      media:\"https:\/\/placehold.co\/800x1100\/111111\/D9A94F?text=PROJET+21\",\n      description:\"Projet e-commerce r\u00e9alis\u00e9 par Scale Group.\",\n      services:[\n        \"Design Web\",\n        \"E-commerce\",\n        \"UX\/UI\",\n        \"SEO\",\n        \"Conversion\"\n      ]\n    },\n\n    {\n      id:\"projet22\",\n      title:\"Projet 22\",\n      category:\"Beaut\u00e9\",\n      filter:\"beaute\",\n      media:\"https:\/\/placehold.co\/800x1100\/111111\/D9A94F?text=PROJET+22\",\n      description:\"Projet beaut\u00e9 r\u00e9alis\u00e9 par Scale Group.\",\n      services:[\n        \"Design Web\",\n        \"Branding\",\n        \"UX\/UI\",\n        \"SEO\",\n        \"Conversion\"\n      ]\n    },\n\n    {\n      id:\"projet23\",\n      title:\"Projet 23\",\n      category:\"Restauration\",\n      filter:\"restauration\",\n      media:\"https:\/\/placehold.co\/800x1100\/111111\/D9A94F?text=PROJET+23\",\n      description:\"Projet restauration r\u00e9alis\u00e9 par Scale Group.\",\n      services:[\n        \"Design Web\",\n        \"E-commerce\",\n        \"UX\/UI\",\n        \"Mobile\",\n        \"Conversion\"\n      ]\n    },\n\n    {\n      id:\"projet24\",\n      title:\"Projet 24\",\n      category:\"Sport\",\n      filter:\"sport\",\n      media:\"https:\/\/placehold.co\/800x1100\/111111\/D9A94F?text=PROJET+24\",\n      description:\"Projet sport r\u00e9alis\u00e9 par Scale Group.\",\n      services:[\n        \"Design Web\",\n        \"Branding\",\n        \"UX\/UI\",\n        \"SEO\",\n        \"Conversion\"\n      ]\n    },\n\n    {\n      id:\"projet25\",\n      title:\"Projet 25\",\n      category:\"Autres\",\n      filter:\"autres\",\n      media:\"https:\/\/placehold.co\/800x1100\/111111\/D9A94F?text=PROJET+25\",\n      description:\"Projet digital r\u00e9alis\u00e9 par Scale Group.\",\n      services:[\n        \"Design Web\",\n        \"UX\/UI\",\n        \"SEO\",\n        \"Responsive\",\n        \"Conversion\"\n      ]\n    }\n\n  ];\n\n\n  let visibleProjects =\n    [...projectData];\n\n  let currentIndex =\n    0;\n\n\n  function createCards(){\n\n    carousel.innerHTML = \"\";\n\n    visibleProjects.forEach(\n      function(project){\n\n        const article =\n          document.createElement(\n            \"article\"\n          );\n\n        article.className =\n          \"sg-project\";\n\n        article.dataset.id =\n          project.id;\n\n        article.dataset.category =\n          project.filter;\n\n\n        article.innerHTML = `\n\n          <div class=\"sg-project-image\">\n\n            <img decoding=\"async\"\n              src=\"${project.media}\"\n              alt=\"${project.title}\"\n              loading=\"lazy\">\n\n            <div class=\"sg-image-overlay\"><\/div>\n\n            <span class=\"sg-category\">\n              ${project.category}\n            <\/span>\n\n            <button\n              type=\"button\"\n              class=\"sg-more\"\n              data-open-project=\"${project.id}\">\n\n              En savoir plus\n              <span>\u2197<\/span>\n\n            <\/button>\n\n          <\/div>\n\n\n          <div class=\"sg-project-info\">\n\n            <div>\n\n              <h3>\n                ${project.title}\n              <\/h3>\n\n              <p>\n                Site \u00b7 ${project.category}\n              <\/p>\n\n            <\/div>\n\n\n            <button\n              type=\"button\"\n              class=\"sg-project-button\"\n              data-open-project=\"${project.id}\">\n\n              Voir le projet\n              <span>\u2192<\/span>\n\n            <\/button>\n\n          <\/div>\n\n        `;\n\n\n        carousel.appendChild(\n          article\n        );\n\n      }\n    );\n\n\n    bindCardEvents();\n\n  }\n\n\n  function createDots(){\n\n    dotsContainer.innerHTML = \"\";\n\n    visibleProjects.forEach(\n      function(project,index){\n\n        const dot =\n          document.createElement(\n            \"button\"\n          );\n\n        dot.type =\n          \"button\";\n\n        dot.className =\n          \"sg-dot\";\n\n        dot.setAttribute(\n          \"aria-label\",\n          \"Afficher \" +\n          project.title\n        );\n\n        dot.addEventListener(\n          \"click\",\n          function(){\n\n            currentIndex =\n              index;\n\n            render();\n\n          }\n        );\n\n        dotsContainer.appendChild(\n          dot\n        );\n\n      }\n    );\n\n  }\n\n\n  function render(){\n\n    const cards =\n      Array.from(\n        document.querySelectorAll(\n          \".sg-project\"\n        )\n      );\n\n\n    const dots =\n      Array.from(\n        document.querySelectorAll(\n          \".sg-dot\"\n        )\n      );\n\n\n    const total =\n      cards.length;\n\n\n    cards.forEach(\n      function(card,index){\n\n        let position =\n          index -\n          currentIndex;\n\n\n        if(\n          position >\n          total \/ 2\n        ){\n\n          position -= total;\n\n        }\n\n\n        if(\n          position <\n          -total \/ 2\n        ){\n\n          position += total;\n\n        }\n\n\n        card.style.display =\n          \"block\";\n\n\n        if(position === 0){\n\n          card.style.transform =\n            \"translateX(-50%) \" +\n            \"translateZ(100px) \" +\n            \"rotateY(0deg) \" +\n            \"scale(1.05)\";\n\n          card.style.opacity =\n            \"1\";\n\n          card.style.filter =\n            \"none\";\n\n          card.style.zIndex =\n            \"30\";\n\n        }\n\n        else if(position === -1){\n\n          card.style.transform =\n            \"translateX(-570px) \" +\n            \"translateZ(-180px) \" +\n            \"rotateY(25deg) \" +\n            \"scale(.82)\";\n\n          card.style.opacity =\n            \".58\";\n\n          card.style.filter =\n            \"brightness(.65)\";\n\n          card.style.zIndex =\n            \"10\";\n\n        }\n\n        else if(position === 1){\n\n          card.style.transform =\n            \"translateX(220px) \" +\n            \"translateZ(-180px) \" +\n            \"rotateY(-25deg) \" +\n            \"scale(.82)\";\n\n          card.style.opacity =\n            \".58\";\n\n          card.style.filter =\n            \"brightness(.65)\";\n\n          card.style.zIndex =\n            \"10\";\n\n        }\n\n        else{\n\n          const direction =\n            position < 0\n              ? \"-800px\"\n              : \"800px\";\n\n\n          card.style.transform =\n            \"translateX(\" +\n            direction +\n            \") \" +\n            \"translateZ(-500px) \" +\n            \"rotateY(\" +\n            (\n              position < 0\n                ? \"40deg\"\n                : \"-40deg\"\n            ) +\n            \") scale(.5)\";\n\n\n          card.style.opacity =\n            \".08\";\n\n          card.style.filter =\n            \"brightness(.35) blur(5px)\";\n\n          card.style.zIndex =\n            \"1\";\n\n        }\n\n      }\n    );\n\n\n    dots.forEach(\n      function(dot,index){\n\n        dot.classList.toggle(\n          \"active\",\n          index === currentIndex\n        );\n\n      }\n    );\n\n  }\n\n\n  function goNext(){\n\n    if(\n      visibleProjects.length < 2\n    ){\n\n      return;\n\n    }\n\n\n    currentIndex++;\n\n\n    if(\n      currentIndex >=\n      visibleProjects.length\n    ){\n\n      currentIndex =\n        0;\n\n    }\n\n\n    render();\n\n  }\n\n\n  function goPrevious(){\n\n    if(\n      visibleProjects.length < 2\n    ){\n\n      return;\n\n    }\n\n\n    currentIndex--;\n\n\n    if(\n      currentIndex < 0\n    ){\n\n      currentIndex =\n        visibleProjects.length - 1;\n\n    }\n\n\n    render();\n\n  }\n\n\n  next.addEventListener(\n    \"click\",\n    goNext\n  );\n\n\n  prev.addEventListener(\n    \"click\",\n    goPrevious\n  );\n\n\n  function openProject(id){\n\n    const project =\n      projectData.find(\n        function(item){\n\n          return item.id === id;\n\n        }\n      );\n\n\n    if(!project){\n\n      return;\n\n    }\n\n\n    const image =\n      document.getElementById(\n        \"sg-modal-image\"\n      );\n\n\n    const title =\n      document.getElementById(\n        \"sg-modal-title\"\n      );\n\n\n    const category =\n      document.getElementById(\n        \"sg-modal-category\"\n      );\n\n\n    const description =\n      document.getElementById(\n        \"sg-modal-description\"\n      );\n\n\n    const services =\n      document.getElementById(\n        \"sg-modal-services\"\n      );\n\n\n    image.src =\n      project.media;\n\n    image.alt =\n      project.title;\n\n\n    title.textContent =\n      project.title;\n\n\n    category.textContent =\n      project.category;\n\n\n    description.textContent =\n      project.description;\n\n\n    services.innerHTML =\n      \"\";\n\n\n    project.services.forEach(\n      function(service){\n\n        const li =\n          document.createElement(\n            \"li\"\n          );\n\n        li.textContent =\n          service;\n\n        services.appendChild(\n          li\n        );\n\n      }\n    );\n\n\n    contactButton.dataset.project =\n      project.title;\n\n\n    modal.classList.add(\n      \"sg-modal-open\"\n    );\n\n\n    modal.setAttribute(\n      \"aria-hidden\",\n      \"false\"\n    );\n\n\n    document.body.style.overflow =\n      \"hidden\";\n\n  }\n\n\n  function bindCardEvents(){\n\n    const cards =\n      document.querySelectorAll(\n        \".sg-project\"\n      );\n\n\n    document\n      .querySelectorAll(\n        \"[data-open-project]\"\n      )\n      .forEach(\n        function(button){\n\n          button.addEventListener(\n            \"click\",\n            function(event){\n\n              event.stopPropagation();\n\n              openProject(\n                button.dataset.openProject\n              );\n\n            }\n          );\n\n        }\n      );\n\n\n    cards.forEach(\n      function(card){\n\n        card.addEventListener(\n          \"click\",\n          function(event){\n\n            if(\n              event.target.closest(\n                \"button\"\n              )\n            ){\n\n              return;\n\n            }\n\n\n            openProject(\n              card.dataset.id\n            );\n\n          }\n        );\n\n      }\n    );\n\n  }\n\n\n  function closeModal(){\n\n    modal.classList.remove(\n      \"sg-modal-open\"\n    );\n\n\n    modal.setAttribute(\n      \"aria-hidden\",\n      \"true\"\n    );\n\n\n    document.body.style.overflow =\n      \"\";\n\n  }\n\n\n  modalClose.addEventListener(\n    \"click\",\n    closeModal\n  );\n\n\n  modalBackdrop.addEventListener(\n    \"click\",\n    closeModal\n  );\n\n\n  document.addEventListener(\n    \"keydown\",\n    function(event){\n\n      if(\n        event.key === \"Escape\" &&\n        modal.classList.contains(\n          \"sg-modal-open\"\n        )\n      ){\n\n        closeModal();\n\n      }\n\n    }\n  );\n\n\n  contactButton.addEventListener(\n    \"click\",\n    function(){\n\n      const project =\n        contactButton.dataset.project ||\n        \"ce projet\";\n\n\n      const message =\n        \"Bonjour Scale Group \ud83d\udc4b\\n\\n\" +\n        \"Je suis int\u00e9ress\u00e9(e) par un site similaire \u00e0 votre r\u00e9alisation \u00ab \" +\n        project +\n        \" \u00bb.\\n\\n\" +\n        \"J'aimerais discuter de mon projet avec vous.\";\n\n\n      const whatsappURL =\n        \"https:\/\/wa.me\/\" +\n        WHATSAPP_NUMBER +\n        \"?text=\" +\n        encodeURIComponent(\n          message\n        );\n\n\n      window.open(\n        whatsappURL,\n        \"_blank\",\n        \"noopener,noreferrer\"\n      );\n\n    }\n  );\n\n\n  document\n    .querySelectorAll(\n      \".sg-filter\"\n    )\n    .forEach(\n      function(filterButton){\n\n        filterButton.addEventListener(\n          \"click\",\n          function(){\n\n            document\n              .querySelectorAll(\n                \".sg-filter\"\n              )\n              .forEach(\n                function(button){\n\n                  button.classList.remove(\n                    \"active\"\n                  );\n\n                }\n              );\n\n\n            filterButton.classList.add(\n              \"active\"\n            );\n\n\n            const category =\n              filterButton.dataset.filter;\n\n\n            visibleProjects =\n              category === \"all\"\n\n                ? [...projectData]\n\n                : projectData.filter(\n                    function(project){\n\n                      return (\n                        project.filter ===\n                        category\n                      );\n\n                    }\n                  );\n\n\n            currentIndex =\n              0;\n\n\n            createCards();\n\n            createDots();\n\n            render();\n\n          }\n        );\n\n      }\n    );\n\n\n  let touchStartX =\n    0;\n\n  let touchEndX =\n    0;\n\n\n  carousel.addEventListener(\n    \"touchstart\",\n    function(event){\n\n      touchStartX =\n        event.changedTouches[0].screenX;\n\n    },\n    {\n      passive:true\n    }\n  );\n\n\n  carousel.addEventListener(\n    \"touchend\",\n    function(event){\n\n      touchEndX =\n        event.changedTouches[0].screenX;\n\n\n      const difference =\n        touchStartX -\n        touchEndX;\n\n\n      if(\n        Math.abs(difference) < 50\n      ){\n\n        return;\n\n      }\n\n\n      if(\n        difference > 0\n      ){\n\n        goNext();\n\n      }\n      else{\n\n        goPrevious();\n\n      }\n\n    },\n    {\n      passive:true\n    }\n  );\n\n\n  document.addEventListener(\n    \"keydown\",\n    function(event){\n\n      if(\n        event.target.tagName === \"INPUT\" ||\n        event.target.tagName === \"TEXTAREA\" ||\n        event.target.tagName === \"SELECT\"\n      ){\n\n        return;\n\n      }\n\n\n      if(\n        event.key === \"ArrowRight\"\n      ){\n\n        goNext();\n\n      }\n\n\n      if(\n        event.key === \"ArrowLeft\"\n      ){\n\n        goPrevious();\n\n      }\n\n    }\n  );\n\n\n  createCards();\n\n  createDots();\n\n  render();\n\n\n})();\n\n<\/script>\n<!-- =========================================================\n    SECTION 8 \u2014 T\u00c9MOIGNAGES (fond blanc)\n========================================================= -->\n\n<section id=\"sg5-testi\">\n\n    <div class=\"sg-light-sweep sg-light-soft\"><\/div>\n\n    <div class=\"sg5-wrap\">\n\n        <div class=\"sg5-head reveal5\">\n            <div class=\"sg5-eyebrow\">Ils nous font confiance<\/div>\n            <h2 class=\"tfx-7\">Ils ont chang\u00e9 de site.<br>Ils ont chang\u00e9 de trajectoire.<\/h2>\n        <\/div>\n\n        <div class=\"sg5-testi-grid\">\n\n            <div class=\"sg5-testi-card reveal5\">\n                <div class=\"sg5-testi-top\">\n                    <div class=\"sg5-testi-avatar\">MG<\/div>\n                    <div>\n                        <strong>Maeva Grondin<\/strong>\n                        <span>Entrepreuneuse<\/span>\n                    <\/div>\n                <\/div>\n                <div class=\"sg5-testi-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n                <p>\"Avant Scale Group, mon activit\u00e9 faisait tr\u00e8s amateur sur Internet. Aujourd'hui, j'ai une pr\u00e9sence beaucoup plus professionnelle et mes prospects me prennent davantage au s\u00e9rieux. Le changement est vraiment impressionnant. ZOT L\u00c9 FORT T !\"<\/p>\n                <div class=\"sg5-testi-result\">+64% de taux de conversion<\/div>\n            <\/div>\n\n            <div class=\"sg5-testi-card reveal5\">\n                <div class=\"sg5-testi-top\">\n                    <div class=\"sg5-testi-avatar\">SO<\/div>\n                    <div>\n                        <strong>Sarah Omarjee<\/strong>\n                        <span>Restauratrice<\/span>\n                    <\/div>\n                <\/div>\n                <div class=\"sg5-testi-stars\">\u2605\u2605\u2605\u2605<\/div>\n                <p>\"Je voulais un site qui donne vraiment envie de d\u00e9couvrir mon \u00e9tablissement. L'\u00e9quipe de Scale Group a compris exactement ce que je voulais et le r\u00e9sultat est largement au-dessus de mes attentes. \"<\/p>\n                <div class=\"sg5-testi-result\">x3 leads qualifi\u00e9s \/ mois<\/div>\n            <\/div>\n\n            <div class=\"sg5-testi-card reveal5\">\n                <div class=\"sg5-testi-top\">\n                    <div class=\"sg5-testi-avatar\">AM<\/div>\n                    <div>\n                        <strong>Ali Mohamed<\/strong>\n                        <span>Directeur<\/span>\n                    <\/div>\n                <\/div>\n                <div class=\"sg5-testi-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n                <p>\" Scale Group a compl\u00e8tement transform\u00e9 l'image de mon entreprise. Le site est moderne, rapide et surtout beaucoup plus professionnel. Depuis sa mise en ligne, mes clients comprennent imm\u00e9diatement ce que je propose. \"<\/p>\n                <div class=\"sg5-testi-result\">-47% co\u00fbt d'acquisition<\/div>\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<style>\n\n#sg5-testi{\n    position:relative;\n    overflow:hidden;\n    background:#ffffff;\n    color:#0a0a0a;\n    font-family:Inter,sans-serif;\n    padding:130px 0;\n}\n\n#sg5-testi *{ box-sizing:border-box; }\n\n.sg5-wrap{ width:90%; max-width:1180px; margin:0 auto; }\n\n.sg5-head{ text-align:center; }\n\n.sg5-eyebrow{\n    display:inline-flex;\n    padding:10px 20px;\n    border-radius:999px;\n    background:#FBF3E1;\n    border:1px solid rgba(214,175,74,.25);\n    color:#B8891E;\n    font-size:13px;\n    font-weight:700;\n    margin-bottom:24px;\n}\n\n.sg5-head h2{\n    font-size:clamp(28px,4vw,44px);\n    font-weight:900;\n    margin:0;\n    color:#0a0a0a;\n}\n\n.sg5-testi-grid{\n    display:grid;\n    grid-template-columns:repeat(3,1fr);\n    gap:24px;\n    margin-top:60px;\n}\n\n.sg5-testi-card{\n    background:#F7F7F7;\n    border:1px solid rgba(0,0,0,.06);\n    border-radius:22px;\n    padding:34px 30px;\n    transition:transform .4s, box-shadow .4s;\n}\n\n.sg5-testi-card:hover{\n    transform:translateY(-6px);\n    box-shadow:0 30px 60px rgba(0,0,0,.08);\n}\n\n.sg5-testi-top{\n    display:flex;\n    align-items:center;\n    gap:14px;\n    margin-bottom:20px;\n}\n\n.sg5-testi-avatar{\n    width:46px; height:46px;\n    border-radius:50%;\n    background:linear-gradient(135deg,#FFD978,#A67818);\n    display:flex; align-items:center; justify-content:center;\n    font-weight:800; color:#111; font-size:14px;\n    flex-shrink:0;\n}\n\n.sg5-testi-top strong{ display:block; font-size:14.5px; color:#0a0a0a; }\n.sg5-testi-top span{ font-size:12.5px; color:#888; }\n\n.sg5-testi-stars{\n    color:#D6AF4A;\n    font-size:14px;\n    letter-spacing:2px;\n    margin-bottom:16px;\n}\n\n.sg5-testi-card p{\n    font-size:15px;\n    line-height:1.7;\n    color:#444;\n    font-style:italic;\n    margin:0 0 22px;\n}\n\n.sg5-testi-result{\n    display:inline-flex;\n    padding:9px 16px;\n    border-radius:999px;\n    background:#FBF3E1;\n    border:1px solid rgba(214,175,74,.3);\n    color:#B8891E;\n    font-size:12.5px;\n    font-weight:700;\n}\n\n.reveal5{\n    opacity:0;\n    transform:translateY(28px);\n    transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);\n}\n.reveal5.sg5-in{ opacity:1; transform:translateY(0); }\n\n@media(max-width:900px){\n    .sg5-testi-grid{ grid-template-columns:1fr; }\n}\n\n<\/style>\n\n<script>\n(function(){\n    var els = document.querySelectorAll(\"#sg5-testi .reveal5\");\n    var io = new IntersectionObserver(function(entries){\n        entries.forEach(function(e){\n            if(e.isIntersecting){ e.target.classList.add(\"sg5-in\"); io.unobserve(e.target); }\n        });\n    }, { threshold:0.15 });\n    els.forEach(function(el){ io.observe(el); });\n})();\n<\/script>\n<!-- =========================================================\n    SECTION \u2014 S\u00c9LECTION EN COURS (urgence, places limit\u00e9es)\n    \u00c0 placer juste AVANT la section FAQ.\n========================================================= -->\n\n<section id=\"sg4-urgence\">\n\n    <div class=\"sg-light-sweep\"><\/div>\n\n    <div class=\"sg4-wrap\">\n\n        <div class=\"sg4-urgence-frame reveal4\">\n            <div class=\"sg4-urgence-box\">\n\n                <div class=\"sg4-eyebrow\" style=\"justify-content:center;display:inline-flex;\">Places limit\u00e9es<\/div>\n                <h2 class=\"tfx-8\">On ne peut pas construire 20 sites<br>premium en m\u00eame temps.<\/h2>\n                <p class=\"sg4-urgence-sub\">\n                    Chaque projet re\u00e7oit un designer d\u00e9di\u00e9, des d\u00e9lais tenus et z\u00e9ro raccourci.\n                    C'est pour \u00e7a \u2014 et uniquement pour \u00e7a \u2014 qu'on limite le nombre de\n                    dossiers accept\u00e9s chaque mois.\n                <\/p>\n\n                <div class=\"sg4-slots\">\n                    <div class=\"sg4-slots-track\">\n                        <div class=\"sg4-slots-fill\" id=\"sg4SlotsFill\"><\/div>\n                    <\/div>\n                    <div class=\"sg4-slots-label\"><strong>4 \/ 10<\/strong> dossiers accept\u00e9s ce mois \u2014 il reste 6 places<\/div>\n                <\/div>\n\n                <a href=\"https:\/\/wa.me\/262693467741?text=Bonjour%2C%20je%20souhaite%20en%20savoir%20plus%20sur%20vos%20services%20et%20voir%20si%20mon%20projet%20est%20%C3%A9ligible.\" target=\"_blank\" rel=\"noopener\" class=\"sg4-cta-btn\">\n                    R\u00e9server mon diagnostic gratuit\n                    <span class=\"sg4-arrow\">\u2192<\/span>\n                <\/a>\n                <div class=\"sg4-urgence-micro\">2 min \u00b7 Sans engagement \u00b7 R\u00e9ponse sous 24h<\/div>\n\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<style>\n\n#sg4-urgence{\n    position:relative;\n    overflow:hidden;\n    background:#0a0a0a;\n    color:#fff;\n    font-family:Inter,sans-serif;\n    padding:110px 0;\n}\n\n#sg4-urgence *{ box-sizing:border-box; }\n\n.sg4-wrap{ width:90%; max-width:1180px; margin:0 auto; }\n\n.sg4-eyebrow{\n    padding:10px 20px;\n    border-radius:999px;\n    background:rgba(232,197,108,.08);\n    border:1px solid rgba(232,197,108,.25);\n    color:#E8C56C;\n    font-size:13px;\n    font-weight:600;\n    margin-bottom:28px;\n}\n\n\/* ===== Cadre au d\u00e9grad\u00e9 dor\u00e9 anim\u00e9 ===== *\/\n.sg4-urgence-frame{\n    max-width:760px;\n    margin:0 auto;\n    border-radius:30px;\n    padding:2px;\n    background:linear-gradient(120deg,\n        rgba(232,197,108,.15) 0%,\n        #E8C56C 25%,\n        rgba(232,197,108,.1) 50%,\n        #E8C56C 75%,\n        rgba(232,197,108,.15) 100%);\n    background-size:300% 300%;\n    animation:sgBorderFlow 7s ease infinite;\n    box-shadow:0 0 60px rgba(232,197,108,.12);\n}\n\n@keyframes sgBorderFlow{\n    0%{ background-position:0% 50%; }\n    50%{ background-position:100% 50%; }\n    100%{ background-position:0% 50%; }\n}\n\n.sg4-urgence-box{\n    background:#0a0a0a;\n    border-radius:28px;\n    padding:56px 44px;\n    text-align:center;\n}\n\n.sg4-urgence-box h2{\n    font-size:clamp(28px,4vw,44px);\n    line-height:1.15;\n    font-weight:900;\n    margin:0;\n}\n\n.sg4-urgence-sub{\n    margin-top:22px;\n    font-size:16px;\n    line-height:1.75;\n    color:#a8a8a8;\n    max-width:540px;\n    margin-inline:auto;\n}\n\n.sg4-slots{\n    max-width:420px;\n    margin:38px auto 0;\n}\n\n.sg4-slots-track{\n    position:relative;\n    height:8px;\n    border-radius:999px;\n    background:rgba(255,255,255,.08);\n    overflow:hidden;\n}\n\n.sg4-slots-fill{\n    position:relative;\n    height:100%;\n    width:0%;\n    border-radius:999px;\n    background:linear-gradient(90deg,#A67818,#FFD978);\n    transition:width 1.4s cubic-bezier(.2,.8,.2,1);\n    overflow:hidden;\n}\n\n.sg4-slots-fill::after{\n    content:\"\";\n    position:absolute;\n    top:0; left:-60%;\n    width:40%; height:100%;\n    background:linear-gradient(115deg,transparent,rgba(255,255,255,.7),transparent);\n    transform:skewX(-20deg);\n    animation:sgUrgenceShine 3.6s ease-in-out infinite;\n}\n\n@keyframes sgUrgenceShine{\n    0%{ left:-60%; }\n    35%{ left:130%; }\n    100%{ left:130%; }\n}\n\n.sg4-slots-label{\n    margin-top:14px;\n    font-size:14px;\n    color:#c8c8c8;\n}\n\n.sg4-slots-label strong{ color:#E8C56C; }\n\n.sg4-urgence-micro{\n    margin-top:16px;\n    font-size:13px;\n    color:#7a7a7a;\n}\n\n#sg4-urgence .sg4-cta-btn{\n    display:inline-flex;\n    align-items:center;\n    gap:12px;\n    background:linear-gradient(135deg,#FFD978,#A67818);\n    color:#111;\n    font-weight:700;\n    font-size:16px;\n    padding:20px 38px;\n    border-radius:999px;\n    text-decoration:none;\n    box-shadow:0 20px 50px rgba(214,175,74,.28);\n    transition:.35s;\n    position:relative;\n    overflow:hidden;\n}\n\n#sg4-urgence .sg4-cta-btn:hover{\n    transform:translateY(-4px) scale(1.02);\n    box-shadow:0 30px 60px rgba(214,175,74,.4);\n}\n\n#sg4-urgence .sg4-arrow{ transition:.3s; }\n#sg4-urgence .sg4-cta-btn:hover .sg4-arrow{ transform:translateX(4px); }\n\n#sg4-urgence .sg4-cta-btn::before{\n    content:\"\";\n    position:absolute;\n    top:0; left:-60%;\n    width:35%; height:100%;\n    background:linear-gradient(115deg,transparent,rgba(255,255,255,.65),transparent);\n    transform:skewX(-20deg);\n    animation:sgUrgenceShine 3.6s ease-in-out infinite;\n    pointer-events:none;\n}\n\n.reveal4{\n    opacity:0;\n    transform:translateY(28px);\n    transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);\n}\n.reveal4.sg4-in{ opacity:1; transform:translateY(0); }\n\n@media(max-width:600px){\n    .sg4-urgence-box{ padding:40px 24px; }\n}\n\n<\/style>\n\n<script>\n(function(){\n    var frame = document.querySelector(\"#sg4-urgence .reveal4\");\n    var fill = document.getElementById(\"sg4SlotsFill\");\n\n    var io = new IntersectionObserver(function(entries){\n        entries.forEach(function(e){\n            if(e.isIntersecting){\n                e.target.classList.add(\"sg4-in\");\n                if(fill){ setTimeout(function(){ fill.style.width = \"40%\"; }, 250); }\n                io.unobserve(e.target);\n            }\n        });\n    }, { threshold:0.2 });\n\n    if(frame){ io.observe(frame); }\n})();\n<\/script>\n<!-- =========================================================\n    SECTION 9 \u2014 FAQ (accord\u00e9on moderne)\n========================================================= -->\n\n<section id=\"sg4-faq\">\n\n    <div class=\"sg-light-sweep\"><\/div>\n\n    <div class=\"sg4-wrap\">\n\n        <div class=\"sg4-head reveal4\">\n            <div class=\"sg4-eyebrow\">Questions fr\u00e9quentes<\/div>\n            <h2 class=\"tfx-8\">Les vraies questions.<br>Les vraies r\u00e9ponses.<\/h2>\n        <\/div>\n\n        <div class=\"sg4-faq-list reveal4\">\n\n            <div class=\"sg4-faq-item\">\n                <button class=\"sg4-faq-q\">\n                    C'est pour qui exactement ?\n                    <span class=\"sg4-faq-icon\">+<\/span>\n                <\/button>\n                <div class=\"sg4-faq-a\"><p>Scale Group travaille avec des entreprises qui ont une offre qui fonctionne et qui veulent un site qui la vend de fa\u00e7on pr\u00e9visible. Si tu sais ce que tu vends et \u00e0 qui, on peut construire le reste.<\/p><\/div>\n            <\/div>\n\n            <div class=\"sg4-faq-item\">\n                <button class=\"sg4-faq-q\">\n                    J'ai d\u00e9j\u00e0 un site, on fait quoi ?\n                    <span class=\"sg4-faq-icon\">+<\/span>\n                <\/button>\n                <div class=\"sg4-faq-a\"><p>On analyse ton parcours actuel, on identifie o\u00f9 tu perds des prospects, et on refond soit par-dessus l'existant, soit en parall\u00e8le \u2014 sans interrompre ton activit\u00e9.<\/p><\/div>\n            <\/div>\n\n            <div class=\"sg4-faq-item\">\n                <button class=\"sg4-faq-q\">\n                    Combien de temps pour \u00eatre en ligne ?\n                    <span class=\"sg4-faq-icon\">+<\/span>\n                <\/button>\n                <div class=\"sg4-faq-a\"><p>Entre 2 et 4 semaines selon la complexit\u00e9 du projet, confirm\u00e9 lors du cadrage initial \u2014 jamais estim\u00e9 \u00e0 vue de nez.<\/p><\/div>\n            <\/div>\n\n            <div class=\"sg4-faq-item\">\n                <button class=\"sg4-faq-q\">\n                    Et si je ne suis pas \u00e9ligible ?\n                    <span class=\"sg4-faq-icon\">+<\/span>\n                <\/button>\n                <div class=\"sg4-faq-a\"><p>\u00c7a arrive. Si ce n'est pas le bon moment ou le bon fit, on te le dit clairement \u2014 on ne force jamais un projet pour remplir un agenda.<\/p><\/div>\n            <\/div>\n\n            <div class=\"sg4-faq-item\">\n                <button class=\"sg4-faq-q\">\n                    Vous g\u00e9rez aussi le r\u00e9f\u00e9rencement (SEO) ?\n                    <span class=\"sg4-faq-icon\">+<\/span>\n                <\/button>\n                <div class=\"sg4-faq-a\"><p>Oui \u2014 chaque site est structur\u00e9 pour le r\u00e9f\u00e9rencement d\u00e8s sa conception. On peut aussi t'accompagner sur le long terme si tu veux aller plus loin.<\/p><\/div>\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<style>\n\n#sg4-faq{\n    position:relative;\n    overflow:hidden;\n    background:#0a0a0a;\n    color:#fff;\n    font-family:Inter,sans-serif;\n    padding:130px 0;\n}\n\n#sg4-faq *{ box-sizing:border-box; }\n\n.sg4-faq-list{\n    max-width:820px;\n    margin:60px auto 0;\n}\n\n.sg4-faq-item{\n    border-bottom:1px solid rgba(255,255,255,.1);\n}\n\n.sg4-faq-q{\n    width:100%;\n    background:none;\n    border:none;\n    color:#fff;\n    text-align:left;\n    font-family:inherit;\n    font-size:17px;\n    font-weight:700;\n    padding:26px 4px;\n    cursor:pointer;\n    display:flex;\n    justify-content:space-between;\n    align-items:center;\n    gap:20px;\n    transition:color .3s;\n    -webkit-tap-highlight-color:transparent;\n}\n\n.sg4-faq-q:hover{ color:#E8C56C !important; }\n.sg4-faq-q:hover *{ color:#E8C56C !important; }\n.sg4-faq-q:focus{ color:#E8C56C !important; outline:none; }\n\n.sg4-faq-icon{\n    font-size:20px;\n    color:#E8C56C;\n    transition:transform .35s cubic-bezier(.2,.8,.2,1);\n    flex-shrink:0;\n}\n\n.sg4-faq-item.sg4-open .sg4-faq-icon{ transform:rotate(45deg); }\n\n.sg4-faq-a{\n    max-height:0;\n    overflow:hidden;\n    transition:max-height .4s ease;\n}\n\n.sg4-faq-item.sg4-open .sg4-faq-a{ max-height:220px; }\n\n.sg4-faq-a p{\n    font-size:15px;\n    line-height:1.75;\n    color:#a0a0a0;\n    padding:0 4px 26px;\n    margin:0;\n}\n\n.reveal4{\n    opacity:0;\n    transform:translateY(28px);\n    transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);\n}\n.reveal4.sg4-in{ opacity:1; transform:translateY(0); }\n\n.sg4-head{ text-align:center; }\n\n.sg4-eyebrow{\n    display:inline-flex;\n    padding:10px 20px;\n    border-radius:999px;\n    background:rgba(232,197,108,.08);\n    border:1px solid rgba(232,197,108,.25);\n    color:#E8C56C;\n    font-size:13px;\n    font-weight:600;\n    margin-bottom:24px;\n}\n\n.sg4-head h2{\n    font-size:clamp(28px,4vw,44px);\n    font-weight:900;\n    margin:0;\n}\n\n<\/style>\n\n<script>\n(function(){\n    document.querySelectorAll(\"#sg4-faq .sg4-faq-q\").forEach(function(btn){\n        btn.addEventListener(\"click\", function(){\n            btn.parentElement.classList.toggle(\"sg4-open\");\n        });\n    });\n\n    var els = document.querySelectorAll(\"#sg4-faq .reveal4\");\n    var io = new IntersectionObserver(function(entries){\n        entries.forEach(function(e){\n            if(e.isIntersecting){ e.target.classList.add(\"sg4-in\"); io.unobserve(e.target); }\n        });\n    }, { threshold:0.1 });\n    els.forEach(function(el){ io.observe(el); });\n})();\n<\/script>\n<!-- =========================================================\n    SECTION 10 \u2014 CALL TO ACTION (fond blanc, tr\u00e8s grande)\n========================================================= -->\n\n<section id=\"sg4-cta-final\">\n\n    <div class=\"sg-light-sweep sg-light-soft\"><\/div>\n\n    <div class=\"sg4-wrap sg4-cta-inner reveal4\">\n        <div class=\"sg4-cta-eyebrow\">Pr\u00eat \u00e0 passer \u00e0 l'action ?<\/div>\n        <h2 class=\"tfx-5\">Pr\u00eat \u00e0 faire passer votre<br>entreprise au niveau sup\u00e9rieur ?<\/h2>\n        <p>2 minutes pour v\u00e9rifier si on est un bon fit. Sans engagement, sans discours commercial.<\/p>\n        <a href=\"https:\/\/wa.me\/262693467741?text=Bonjour%2C%20je%20souhaite%20en%20savoir%20plus%20sur%20vos%20services%20et%20voir%20si%20mon%20projet%20est%20%C3%A9ligible.\" target=\"_blank\" rel=\"noopener\" class=\"sg4-cta-btn\">\n            R\u00e9server un appel\n            <span class=\"sg4-arrow\">\u2192<\/span>\n        <\/a>\n    <\/div>\n\n<\/section>\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:wght@600;700&family=Inter:wght@400;500;600;800&display=swap\" rel=\"stylesheet\">\n\n<footer id=\"sg7-footer\">\n\n    <div class=\"sg7-grid-bg\"><\/div>\n\n    <div class=\"sg7-top\">\n        <div class=\"sg7-wrap sg7-top-inner\">\n            <div class=\"sg7-brand\">\n                <span class=\"sg7-dot\"><\/span>\n                SCALE GROUP\n            <\/div>\n            <div class=\"sg7-social\">\n                <a href=\"https:\/\/www.instagram.com\/scale_group_?igsh=OHZyZHNzMDc4YzRz\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram\">\n                    <svg viewBox=\"0 0 24 24\" width=\"17\" height=\"17\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"5\"\/><circle cx=\"12\" cy=\"12\" r=\"4\"\/><circle cx=\"17.2\" cy=\"6.8\" r=\"1\"\/><\/svg>\n                <\/a>\n                <a href=\"https:\/\/www.tiktok.com\/@scale_group?_r=1&_t=ZN-98ldUzXewKJ\" target=\"_blank\" rel=\"noopener\" aria-label=\"TikTok\">\n                    <svg viewBox=\"0 0 24 24\" width=\"17\" height=\"17\" fill=\"currentColor\"><path d=\"M14 3c.3 2 1.8 3.6 4 3.9v2.6c-1.4 0-2.8-.4-4-1.2v6.2A5.5 5.5 0 1 1 9.4 9.1v2.7a3 3 0 1 0 2.1 2.9V3H14z\"\/><\/svg>\n                <\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"sg7-scroll-text\" id=\"sg7ScrollText\">\n\n        <div class=\"sg7-spotlight\" id=\"sg7Spotlight\"><\/div>\n\n     \n        <div class=\"sg7-letters\" id=\"sg7Letters\"><\/div>\n\n        <div class=\"sg7-progress\">\n            <div class=\"sg7-progress-track\">\n                <div class=\"sg7-progress-fill\" id=\"sg7ProgressFill\"><\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <div class=\"sg7-wrap sg7-legal\">\n        \u00a9 2026 Scale Group. Tous droits r\u00e9serv\u00e9s. \u2014 Mentions l\u00e9gales \u2014 CGV\n    <\/div>\n\n<\/footer>\n\n<style>\n\n#sg7-footer{\n    position:relative;\n    background:#050505;\n    color:#fff;\n    font-family:Inter,sans-serif;\n    overflow:hidden;\n}\n\n#sg7-footer *{ box-sizing:border-box; }\n\n.sg7-wrap{ width:90%; max-width:1180px; margin:0 auto; }\n\n.sg7-grid-bg{\n    position:absolute;\n    inset:0;\n    background-image:\n        linear-gradient(rgba(232,197,108,.05) 1px,transparent 1px),\n        linear-gradient(90deg,rgba(232,197,108,.05) 1px,transparent 1px);\n    background-size:56px 56px;\n    -webkit-mask-image:radial-gradient(circle at 50% 60%,black 0%,transparent 70%);\n    mask-image:radial-gradient(circle at 50% 60%,black 0%,transparent 70%);\n    pointer-events:none;\n}\n\n.sg7-top{\n    position:relative;\n    z-index:5;\n    border-bottom:1px solid rgba(255,255,255,.07);\n    padding:20px 0;\n}\n\n.sg7-top-inner{\n    display:flex;\n    align-items:center;\n    justify-content:space-between;\n}\n\n.sg7-brand{\n    display:flex;\n    align-items:center;\n    gap:9px;\n    font-weight:800;\n    font-size:14px;\n    letter-spacing:.1em;\n}\n\n.sg7-dot{\n    width:6px;\n    height:6px;\n    border-radius:50%;\n    background:#E8C56C;\n    box-shadow:0 0 10px #E8C56C;\n}\n\n.sg7-social{ display:flex; gap:12px; }\n\n.sg7-social a{\n    width:36px;\n    height:36px;\n    border-radius:50%;\n    border:1px solid rgba(255,255,255,.14);\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    color:#cfcfcf;\n    transition:.3s;\n}\n\n.sg7-social a:hover{\n    background:#E8C56C;\n    color:#111;\n    border-color:#E8C56C;\n    box-shadow:0 0 22px rgba(232,197,108,.4);\n}\n\n.sg7-scroll-text{\n    position:relative;\n    padding:56px 0 46px;\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    justify-content:center;\n    overflow:hidden;\n}\n\n.sg7-spotlight{\n    position:absolute;\n    top:50%;\n    left:0%;\n    width:380px;\n    height:380px;\n    border-radius:50%;\n    background:radial-gradient(circle,rgba(232,197,108,.30),transparent 68%);\n    filter:blur(46px);\n    transform:translate(-50%,-50%);\n    pointer-events:none;\n    z-index:1;\n    will-change:left;\n}\n\n.sg7-eyebrow{\n    position:relative;\n    z-index:5;\n    font-size:12px;\n    font-weight:600;\n    letter-spacing:.28em;\n    color:#8a7a4a;\n    margin-bottom:20px;\n}\n\n.sg7-letters{\n    position:relative;\n    z-index:5;\n    display:flex;\n    flex-wrap:wrap;\n    justify-content:center;\n    align-items:baseline;\n    max-width:1300px;\n    padding:0 20px;\n}\n\n.sg7-letters span{\n    position:relative;\n    font-family:'Fraunces',serif;\n    font-weight:700;\n    font-size:clamp(32px,6.6vw,100px);\n    line-height:1;\n    letter-spacing:-.01em;\n    white-space:pre;\n    color:transparent;\n    -webkit-text-stroke:1px rgba(232,197,108,.22);\n    transform:translateY(0);\n    text-shadow:none;\n    transition:\n        color .45s cubic-bezier(.2,.8,.2,1),\n        -webkit-text-stroke .45s cubic-bezier(.2,.8,.2,1),\n        transform .45s cubic-bezier(.34,1.56,.64,1),\n        text-shadow .5s ease;\n}\n\n.sg7-letters span.sg7-on{\n    background:linear-gradient(180deg,#FFF3C4 0%,#E8C56C 45%,#A67818 100%);\n    -webkit-background-clip:text;\n    background-clip:text;\n    color:#E8C56C;\n    -webkit-text-stroke:1px rgba(232,197,108,.5);\n    transform:translateY(-6px);\n    text-shadow:0 10px 34px rgba(232,197,108,.28);\n}\n\n.sg7-progress{\n    position:relative;\n    z-index:5;\n    margin-top:26px;\n    width:220px;\n}\n\n.sg7-progress-track{\n    height:2px;\n    border-radius:2px;\n    background:rgba(255,255,255,.1);\n    overflow:hidden;\n}\n\n.sg7-progress-fill{\n    height:100%;\n    width:0%;\n    border-radius:2px;\n    background:linear-gradient(90deg,#A67818,#FFD978);\n    transition:width .1s linear;\n}\n\n.sg7-legal{\n    position:relative;\n    z-index:5;\n    padding:18px 0 24px;\n    border-top:1px solid rgba(255,255,255,.07);\n    font-size:12px;\n    color:#5a5a5a;\n    text-align:center;\n}\n\n@media(max-width:700px){\n    .sg7-scroll-text{ padding:80px 0 60px; min-height:34vh; }\n    .sg7-spotlight{ width:340px; height:340px; }\n}\n\n@media (prefers-reduced-motion: reduce){\n    .sg7-letters span{ transition:color .3s ease; }\n}\n\n<\/style>\n\n<script>\n(function(){\n    var text = \"SCALE-GROUP.FR\";\n    var container = document.getElementById(\"sg7Letters\");\n    text.split(\"\").forEach(function(ch){\n        var span = document.createElement(\"span\");\n        span.textContent = ch;\n        container.appendChild(span);\n    });\n\n    var letters = container.querySelectorAll(\"span\");\n    var section = document.getElementById(\"sg7ScrollText\");\n    var spotlight = document.getElementById(\"sg7Spotlight\");\n    var progressFill = document.getElementById(\"sg7ProgressFill\");\n    var ticking = false;\n\n    function update(){\n        var rect = section.getBoundingClientRect();\n        var vh = window.innerHeight;\n        var total = vh * 0.28;\n        var seen = vh - rect.top;\n        var progress = Math.min(1, Math.max(0, seen \/ total));\n\n        var revealCount = Math.round(progress * letters.length);\n        letters.forEach(function(l, i){\n            if(i < revealCount){ l.classList.add(\"sg7-on\"); }\n            else{ l.classList.remove(\"sg7-on\"); }\n        });\n\n        spotlight.style.left = (progress * 100) + \"%\";\n        progressFill.style.width = (progress * 100) + \"%\";\n\n        ticking = false;\n    }\n\n    function onScroll(){\n        if(!ticking){\n            requestAnimationFrame(update);\n            ticking = true;\n        }\n    }\n\n    window.addEventListener(\"scroll\", onScroll, { passive:true });\n    window.addEventListener(\"resize\", onScroll);\n    update();\n})();\n<\/script>\n<!-- =========================================================\n    SCALE GROUP \u2014 BARRE COLLANTE (bas de page, style GetFunnels)\n========================================================= -->\n\n<div id=\"sg3-stickybar\">\n    <div class=\"sg3-sb-left\">\n        <span class=\"sg3-sb-icon\">\ud83d\udc65<\/span>\n        <span id=\"sg3-sb-count\">24<\/span> visiteurs en ligne\n    <\/div>\n    <div class=\"sg3-sb-center\">\n        Le syst\u00e8me complet pour transformer ton trafic en clients \u2014 install\u00e9 pour toi.\n    <\/div>\n    <a href=\"https:\/\/wa.me\/262693467741?text=Bonjour%2C%20je%20souhaite%20en%20savoir%20plus%20sur%20vos%20services%20et%20voir%20si%20mon%20projet%20est%20%C3%A9ligible.\" target=\"_blank\" rel=\"noopener\" class=\"sg3-sb-btn\">Voir si je suis \u00e9ligible<\/a>\n<\/div>\n\n<style>\n\n#sg3-stickybar{\n    position:fixed;\n    left:0;\n    right:0;\n    bottom:0;\n    z-index:999;\n    background:#0a0a0a;\n    border-top:1px solid rgba(232,197,108,.2);\n    display:flex;\n    align-items:center;\n    justify-content:space-between;\n    gap:20px;\n    padding:14px 26px;\n    font-family:Inter,sans-serif;\n    color:#fff;\n    box-shadow:0 -10px 30px rgba(0,0,0,.35);\n}\n\n#sg3-stickybar *{ box-sizing:border-box; }\n\n.sg3-sb-left{\n    display:flex;\n    align-items:center;\n    gap:8px;\n    font-size:13.5px;\n    color:#cfcfcf;\n    white-space:nowrap;\n}\n\n.sg3-sb-left #sg3-sb-count{\n    color:#E8C56C;\n    font-weight:800;\n}\n\n.sg3-sb-center{\n    flex:1;\n    text-align:center;\n    font-size:13.5px;\n    font-weight:600;\n    color:#e8e8e8;\n}\n\n.sg3-sb-btn{\n    background:linear-gradient(135deg,#FFD978,#A67818);\n    color:#111;\n    font-weight:700;\n    font-size:13.5px;\n    padding:11px 22px;\n    border-radius:999px;\n    text-decoration:none;\n    white-space:nowrap;\n    transition:.3s;\n}\n\n.sg3-sb-btn:hover{\n    transform:translateY(-2px);\n    box-shadow:0 10px 26px rgba(255,210,90,.35);\n}\n\n@media(max-width:800px){\n    .sg3-sb-center{ display:none; }\n    #sg3-stickybar{ padding:12px 16px; }\n}\n\n@media(max-width:480px){\n    .sg3-sb-left{ font-size:12px; }\n    .sg3-sb-btn{ padding:10px 16px; font-size:12.5px; }\n}\n\n<\/style>\n\n<script>\n(function(){\n    var el = document.getElementById(\"sg3-sb-count\");\n    if(el){\n        setInterval(function(){\n            var base = 24;\n            var variation = Math.floor(Math.random()*7)-3;\n            el.textContent = Math.max(12, base+variation);\n        }, 4500);\n    }\n\n    document.body.style.paddingBottom = \"70px\";\n})();\n<\/script>\n<\/body><\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Agence Scale Group \u2014 Sites internet premium L&rsquo;apparence attire. La confiance fait acheter. Nous concevons des sites qui inspirent confiance d\u00e8s les premi\u00e8res secondes. Je veux voir ce que vous pouvez construire pour moi \u2192 2 min \u00b7 Audit offert \u00b7 Sans engagement 24 personnes regardent cette page en ce moment Le constat Pourquoi votre [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/scale-group.fr\/index.php\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/scale-group.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/scale-group.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/scale-group.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/scale-group.fr\/index.php\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":396,"href":"https:\/\/scale-group.fr\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":614,"href":"https:\/\/scale-group.fr\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions\/614"}],"wp:attachment":[{"href":"https:\/\/scale-group.fr\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}