{"id":33,"date":"2026-09-18T14:17:23","date_gmt":"2026-09-18T12:17:23","guid":{"rendered":"https:\/\/demo.jouglet-web.fr\/paysagiste\/?page_id=33"},"modified":"2026-09-18T16:26:32","modified_gmt":"2026-09-18T14:26:32","slug":"realisations","status":"publish","type":"page","link":"https:\/\/demo.jouglet-web.fr\/paysagiste\/realisations\/","title":{"rendered":"R\u00e9alisations"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"tjrv3-page\">\n\n<style>\n\n\/* ==========================================================\n   TERRA JARDIN \u2014 R\u00c9ALISATIONS V3\n========================================================== *\/\n\n.tjrv3-page{\n    --deep:#10291f;\n    --forest:#18392b;\n    --green:#54745d;\n    --sage:#90a98d;\n    --gold:#d5b985;\n    --gold-light:#ead7ad;\n    --cream:#f7f4ed;\n    --white:#fff;\n    --text:#6f776f;\n    --border:rgba(24,57,43,.12);\n\n    --gallery-view:3;\n    --gallery-gap:16px;\n\n    width:100vw;\n    max-width:none;\n    margin-left:calc(50% - 50vw);\n    margin-right:calc(50% - 50vw);\n\n    overflow:hidden;\n\n    background:var(--cream);\n    color:#161a17;\n\n    font-family:inherit;\n    -webkit-font-smoothing:antialiased;\n}\n\n.tjrv3-page *,\n.tjrv3-page *::before,\n.tjrv3-page *::after{\n    box-sizing:border-box;\n}\n\n.tjrv3-page img{\n    display:block;\n    width:100%;\n}\n\n.tjrv3-page a{\n    text-decoration:none;\n    color:inherit;\n}\n\n.tjrv3-container{\n    width:min(1240px,calc(100% - 48px));\n    margin:auto;\n}\n\n.tjrv3-section{\n    position:relative;\n    padding:110px 0;\n}\n\n\n\/* ==========================================================\n   TYPO\n========================================================== *\/\n\n.tjrv3-kicker{\n    display:inline-flex;\n    align-items:center;\n    gap:11px;\n\n    margin-bottom:18px;\n\n    color:var(--green);\n\n    font-size:10px;\n    line-height:1;\n    font-weight:850;\n    letter-spacing:.15em;\n    text-transform:uppercase;\n}\n\n.tjrv3-kicker::before{\n    content:\"\";\n    width:33px;\n    height:1px;\n    background:var(--gold);\n}\n\n.tjrv3-title{\n    max-width:850px;\n\n    margin:0;\n\n    color:var(--deep);\n\n    font-size:clamp(43px,5.3vw,73px);\n    line-height:.97;\n    font-weight:780;\n    letter-spacing:-.055em;\n}\n\n.tjrv3-title span{\n    color:var(--gold);\n}\n\n.tjrv3-text{\n    max-width:680px;\n\n    margin:22px 0 0;\n\n    color:var(--text);\n\n    font-size:15px;\n    line-height:1.72;\n}\n\n\n\/* ==========================================================\n   BUTTON\n========================================================== *\/\n\n.tjrv3-btn{\n    min-height:55px;\n    padding:0 25px;\n\n    display:inline-flex;\n    align-items:center;\n    justify-content:center;\n    gap:10px;\n\n    border:1px solid transparent;\n    border-radius:999px;\n\n    font-size:12px;\n    font-weight:800;\n\n    transition:\n        transform .3s ease,\n        background .3s ease,\n        color .3s ease;\n}\n\n.tjrv3-btn:hover{\n    transform:translateY(-3px);\n}\n\n.tjrv3-btn-gold{\n    background:var(--gold);\n    color:var(--deep) !important;\n}\n\n.tjrv3-btn-gold:hover{\n    background:var(--gold-light);\n}\n\n.tjrv3-btn-light{\n    border-color:rgba(255,255,255,.24) !important;\n    background:rgba(255,255,255,.07) !important;\n    color:#fff !important;\n}\n\n.tjrv3-btn-light:hover{\n    background:#fff !important;\n    color:var(--deep) !important;\n}\n\n.tjrv3-arrow{\n    transition:transform .3s ease;\n}\n\n.tjrv3-btn:hover .tjrv3-arrow{\n    transform:translateX(5px);\n}\n\n\n\/* ==========================================================\n   HERO\n========================================================== *\/\n\n.tjrv3-hero{\n    position:relative;\n\n    min-height:690px;\n\n    display:flex;\n    align-items:flex-end;\n\n    overflow:hidden;\n    isolation:isolate;\n\n    background:var(--deep);\n}\n\n.tjrv3-hero-bg{\n    position:absolute;\n    inset:0;\n    z-index:-3;\n}\n\n.tjrv3-hero-bg img{\n    width:100%;\n    height:110%;\n\n    object-fit:cover;\n\n    transform:\n        translateY(var(--hero-shift,0px))\n        scale(1.03);\n}\n\n.tjrv3-hero::after{\n    content:\"\";\n\n    position:absolute;\n    inset:0;\n    z-index:-2;\n\n    background:\n        linear-gradient(\n            90deg,\n            rgba(5,20,14,.97),\n            rgba(5,20,14,.84) 43%,\n            rgba(5,20,14,.50) 72%,\n            rgba(5,20,14,.22)\n        ),\n        linear-gradient(\n            0deg,\n            rgba(5,20,14,.74),\n            transparent 65%\n        );\n}\n\n.tjrv3-hero::before{\n    content:\"\";\n\n    position:absolute;\n\n    width:650px;\n    height:650px;\n\n    right:-330px;\n    top:-360px;\n\n    border:1px solid rgba(213,185,133,.16);\n    border-radius:50%;\n\n    z-index:-1;\n}\n\n.tjrv3-hero-inner{\n    width:min(1240px,calc(100% - 48px));\n    margin:auto;\n\n    padding:145px 0 82px;\n}\n\n.tjrv3-hero-content{\n    max-width:870px;\n}\n\n.tjrv3-hero-badge{\n    display:inline-flex;\n    align-items:center;\n    gap:10px;\n\n    margin-bottom:24px;\n    padding:9px 14px;\n\n    border:1px solid rgba(255,255,255,.17);\n    border-radius:999px;\n\n    background:rgba(255,255,255,.07);\n\n    backdrop-filter:blur(12px);\n\n    color:rgba(255,255,255,.88);\n\n    font-size:9px;\n    font-weight:850;\n    letter-spacing:.14em;\n    text-transform:uppercase;\n}\n\n.tjrv3-hero-dot{\n    width:7px;\n    height:7px;\n\n    border-radius:50%;\n\n    background:var(--gold);\n\n    box-shadow:\n        0 0 0 5px rgba(213,185,133,.12);\n}\n\n.tjrv3-hero h1{\n    margin:0;\n\n    color:#fff;\n\n    font-size:clamp(55px,7vw,96px);\n    line-height:.9;\n    font-weight:780;\n    letter-spacing:-.065em;\n}\n\n.tjrv3-hero h1 span{\n    display:block;\n    color:var(--gold);\n}\n\n.tjrv3-hero p{\n    max-width:650px;\n\n    margin:27px 0 0;\n\n    color:rgba(255,255,255,.73);\n\n    font-size:17px;\n    line-height:1.65;\n}\n\n.tjrv3-hero-actions{\n    display:flex;\n    flex-wrap:wrap;\n    gap:12px;\n\n    margin-top:33px;\n}\n\n\n\/* ==========================================================\n   INTRO PREMIUM \u2014 PLUS DE GROS TJ VIDE\n========================================================== *\/\n\n.tjrv3-intro{\n    background:#fff;\n}\n\n.tjrv3-intro-grid{\n    display:grid;\n    grid-template-columns:.93fr 1.07fr;\n    gap:85px;\n\n    align-items:center;\n}\n\n.tjrv3-intro-visual{\n    position:relative;\n\n    min-height:570px;\n}\n\n.tjrv3-intro-main{\n    position:absolute;\n\n    left:0;\n    top:0;\n\n    width:78%;\n    height:500px;\n\n    overflow:hidden;\n\n    border-radius:29px;\n\n    background:var(--forest);\n\n    box-shadow:\n        0 28px 70px rgba(16,41,31,.12);\n}\n\n.tjrv3-intro-main img{\n    width:100%;\n    height:100%;\n\n    object-fit:cover;\n\n    transition:transform .8s ease;\n}\n\n.tjrv3-intro-main:hover img{\n    transform:scale(1.045);\n}\n\n.tjrv3-intro-small{\n    position:absolute;\n\n    right:0;\n    bottom:0;\n\n    width:45%;\n    height:285px;\n\n    overflow:hidden;\n\n    border:8px solid #fff;\n    border-radius:24px;\n\n    background:var(--forest);\n\n    box-shadow:\n        0 25px 55px rgba(16,41,31,.17);\n}\n\n.tjrv3-intro-small img{\n    width:100%;\n    height:100%;\n\n    object-fit:cover;\n}\n\n.tjrv3-intro-badge{\n    position:absolute;\n\n    left:30px;\n    bottom:35px;\n\n    z-index:3;\n\n    padding:17px 19px;\n\n    border-radius:17px;\n\n    background:var(--gold);\n    color:var(--deep);\n\n    box-shadow:\n        0 17px 40px rgba(16,41,31,.20);\n}\n\n.tjrv3-intro-badge strong{\n    display:block;\n\n    font-size:24px;\n    line-height:1;\n}\n\n.tjrv3-intro-badge span{\n    display:block;\n\n    margin-top:5px;\n\n    font-size:8px;\n    font-weight:850;\n    letter-spacing:.08em;\n    text-transform:uppercase;\n}\n\n.tjrv3-intro-content{\n    max-width:620px;\n}\n\n.tjrv3-intro-lead{\n    margin:0;\n\n    color:var(--deep);\n\n    font-size:clamp(27px,3vw,42px);\n    line-height:1.18;\n    font-weight:680;\n    letter-spacing:-.04em;\n}\n\n.tjrv3-intro-lead span{\n    color:var(--green);\n}\n\n.tjrv3-intro-copy{\n    margin-top:25px;\n\n    color:var(--text);\n\n    font-size:14px;\n    line-height:1.75;\n}\n\n.tjrv3-intro-points{\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    gap:10px;\n\n    margin-top:30px;\n}\n\n.tjrv3-intro-point{\n    padding:17px;\n\n    border:1px solid var(--border);\n    border-radius:16px;\n\n    background:var(--cream);\n}\n\n.tjrv3-intro-point strong{\n    display:block;\n\n    color:var(--deep);\n\n    font-size:12px;\n}\n\n.tjrv3-intro-point span{\n    display:block;\n\n    margin-top:4px;\n\n    color:var(--text);\n\n    font-size:9px;\n    line-height:1.5;\n}\n\n\n\/* ==========================================================\n   GALERIE\n========================================================== *\/\n\n.tjrv3-gallery-section{\n    position:relative;\n\n    overflow:hidden;\n\n    background:var(--cream);\n}\n\n.tjrv3-gallery-section::before{\n    content:\"\";\n\n    position:absolute;\n\n    width:650px;\n    height:650px;\n\n    right:-400px;\n    top:-390px;\n\n    border-radius:50%;\n\n    background:\n        radial-gradient(\n            circle,\n            rgba(213,185,133,.17),\n            transparent 69%\n        );\n}\n\n.tjrv3-gallery-head{\n    position:relative;\n\n    display:flex;\n    justify-content:space-between;\n    align-items:flex-end;\n    gap:45px;\n\n    margin-bottom:44px;\n}\n\n.tjrv3-gallery-desc{\n    max-width:390px;\n\n    color:var(--text);\n\n    font-size:12px;\n    line-height:1.7;\n}\n\n.tjrv3-autoplay{\n    display:flex;\n    align-items:center;\n    gap:8px;\n\n    margin-top:15px;\n\n    color:var(--green);\n\n    font-size:8px;\n    font-weight:900;\n    letter-spacing:.1em;\n    text-transform:uppercase;\n}\n\n.tjrv3-autoplay-dot{\n    position:relative;\n\n    width:7px;\n    height:7px;\n\n    border-radius:50%;\n\n    background:var(--green);\n}\n\n.tjrv3-autoplay-dot::after{\n    content:\"\";\n\n    position:absolute;\n    inset:-4px;\n\n    border:1px solid rgba(84,116,93,.35);\n    border-radius:50%;\n\n    animation:tjrv3Pulse 1.7s infinite;\n}\n\n@keyframes tjrv3Pulse{\n    from{\n        transform:scale(.7);\n        opacity:1;\n    }\n\n    to{\n        transform:scale(1.8);\n        opacity:0;\n    }\n}\n\n\n\/* CONTROLS *\/\n\n.tjrv3-gallery-controls{\n    display:flex;\n    justify-content:space-between;\n    align-items:center;\n\n    margin-bottom:16px;\n}\n\n.tjrv3-counter{\n    display:flex;\n    align-items:center;\n    gap:7px;\n\n    color:var(--green);\n\n    font-size:8px;\n    font-weight:850;\n    letter-spacing:.1em;\n    text-transform:uppercase;\n}\n\n.tjrv3-current{\n    color:var(--deep);\n\n    font-size:15px;\n    font-weight:900;\n}\n\n.tjrv3-arrows{\n    display:flex;\n    gap:8px;\n}\n\n.tjrv3-arrow-btn{\n    width:46px;\n    height:46px;\n\n    padding:0;\n\n    display:grid;\n    place-items:center;\n\n    border:1px solid rgba(16,41,31,.13);\n    border-radius:50%;\n\n    background:#fff;\n    color:var(--deep);\n\n    cursor:pointer;\n\n    font-size:16px;\n\n    transition:\n        background .3s ease,\n        color .3s ease,\n        transform .3s ease;\n}\n\n.tjrv3-arrow-btn:hover{\n    transform:translateY(-2px);\n\n    background:var(--deep);\n    color:#fff;\n}\n\n\n\/* CAROUSEL *\/\n\n.tjrv3-carousel{\n    width:100%;\n\n    overflow:hidden;\n\n    touch-action:pan-y;\n}\n\n.tjrv3-track{\n    display:flex;\n\n    gap:var(--gallery-gap);\n\n    will-change:transform;\n\n    transform:translate3d(0,0,0);\n\n    transition:\n        transform .78s cubic-bezier(.22,.74,.25,1);\n}\n\n.tjrv3-slide{\n    position:relative;\n\n    flex:\n        0\n        0\n        calc(\n            (\n                100%\n                -\n                (\n                    var(--gallery-gap)\n                    *\n                    (\n                        var(--gallery-view)\n                        -\n                        1\n                    )\n                )\n            )\n            \/\n            var(--gallery-view)\n        );\n\n    height:565px;\n\n    overflow:hidden;\n\n    border-radius:27px;\n\n    background:var(--deep);\n\n    isolation:isolate;\n}\n\n.tjrv3-slide-media{\n    position:absolute;\n    inset:0;\n    z-index:-3;\n}\n\n.tjrv3-slide-media img{\n    width:100%;\n    height:100%;\n\n    object-fit:cover;\n\n    transition:transform .85s ease;\n}\n\n.tjrv3-slide:hover\n.tjrv3-slide-media img{\n    transform:scale(1.055);\n}\n\n.tjrv3-slide::after{\n    content:\"\";\n\n    position:absolute;\n    inset:0;\n    z-index:-2;\n\n    background:\n        linear-gradient(\n            0deg,\n            rgba(5,20,14,.97),\n            rgba(5,20,14,.58) 44%,\n            rgba(5,20,14,.12) 76%,\n            transparent\n        );\n}\n\n.tjrv3-slide-number{\n    position:absolute;\n\n    top:19px;\n    left:19px;\n\n    padding:8px 10px;\n\n    border:1px solid rgba(255,255,255,.17);\n    border-radius:999px;\n\n    background:rgba(5,20,14,.65);\n\n    backdrop-filter:blur(10px);\n\n    color:#fff;\n\n    font-size:8px;\n    font-weight:850;\n}\n\n.tjrv3-slide-open{\n    position:absolute;\n\n    top:19px;\n    right:19px;\n\n    width:42px;\n    height:42px;\n\n    display:grid;\n    place-items:center;\n\n    border:1px solid rgba(255,255,255,.17);\n    border-radius:50%;\n\n    background:rgba(5,20,14,.62);\n\n    backdrop-filter:blur(10px);\n\n    color:#fff !important;\n\n    transition:\n        background .3s ease,\n        color .3s ease,\n        transform .3s ease;\n}\n\n.tjrv3-slide:hover\n.tjrv3-slide-open{\n    transform:rotate(-45deg);\n\n    background:var(--gold);\n    color:var(--deep) !important;\n}\n\n.tjrv3-slide-content{\n    position:absolute;\n\n    left:25px;\n    right:25px;\n    bottom:25px;\n}\n\n.tjrv3-slide-category{\n    display:flex;\n    align-items:center;\n    gap:8px;\n\n    margin-bottom:9px;\n\n    color:var(--gold);\n\n    font-size:8px;\n    font-weight:900;\n    letter-spacing:.11em;\n    text-transform:uppercase;\n}\n\n.tjrv3-slide-category::before{\n    content:\"\";\n\n    width:21px;\n    height:1px;\n\n    background:var(--gold);\n}\n\n.tjrv3-slide h3{\n    margin:0;\n\n    color:#fff;\n\n    font-size:26px;\n    line-height:1.05;\n    letter-spacing:-.035em;\n}\n\n.tjrv3-slide p{\n    margin:9px 0 0;\n\n    color:rgba(255,255,255,.67);\n\n    font-size:10px;\n    line-height:1.6;\n}\n\n\n\/* PROGRESS *\/\n\n.tjrv3-progress{\n    height:3px;\n\n    margin-top:22px;\n\n    overflow:hidden;\n\n    border-radius:100px;\n\n    background:rgba(16,41,31,.10);\n}\n\n.tjrv3-progress-bar{\n    height:100%;\n\n    width:12.5%;\n\n    border-radius:inherit;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--gold),\n            var(--green)\n        );\n\n    transition:width .4s ease;\n}\n\n.tjrv3-dots{\n    display:flex;\n    justify-content:center;\n    gap:6px;\n\n    margin-top:18px;\n}\n\n.tjrv3-dot{\n    width:7px;\n    height:7px;\n\n    padding:0;\n\n    border:0;\n    border-radius:50px;\n\n    background:rgba(16,41,31,.20);\n\n    cursor:pointer;\n\n    transition:\n        width .3s ease,\n        background .3s ease;\n}\n\n.tjrv3-dot.tjrv3-active{\n    width:27px;\n\n    background:var(--gold);\n}\n\n\n\/* ==========================================================\n   SERVICES \u2014 PLUS PREMIUM\n========================================================== *\/\n\n.tjrv3-services{\n    background:#fff;\n}\n\n.tjrv3-services-head{\n    display:flex;\n    justify-content:space-between;\n    align-items:flex-end;\n    gap:50px;\n\n    margin-bottom:50px;\n}\n\n.tjrv3-services-head .tjrv3-text{\n    max-width:390px;\n}\n\n.tjrv3-services-grid{\n    display:grid;\n    grid-template-columns:repeat(4,1fr);\n    gap:14px;\n}\n\n.tjrv3-service{\n    position:relative;\n\n    min-height:270px;\n\n    overflow:hidden;\n\n    padding:26px;\n\n    border:1px solid var(--border);\n    border-radius:22px;\n\n    background:\n        linear-gradient(\n            145deg,\n            #fff,\n            var(--cream)\n        );\n\n    transition:\n        transform .4s ease,\n        border-color .4s ease,\n        box-shadow .4s ease;\n}\n\n.tjrv3-service::before{\n    content:\"\";\n\n    position:absolute;\n\n    left:0;\n    top:0;\n\n    width:100%;\n    height:3px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--gold),\n            var(--green)\n        );\n\n    transform:scaleX(0);\n    transform-origin:left;\n\n    transition:transform .4s ease;\n}\n\n.tjrv3-service::after{\n    content:\"\";\n\n    position:absolute;\n\n    width:170px;\n    height:170px;\n\n    right:-100px;\n    bottom:-100px;\n\n    border-radius:50%;\n\n    background:\n        radial-gradient(\n            circle,\n            rgba(213,185,133,.17),\n            transparent 70%\n        );\n}\n\n.tjrv3-service:hover{\n    transform:translateY(-7px);\n\n    border-color:rgba(213,185,133,.55);\n\n    box-shadow:\n        0 25px 55px rgba(16,41,31,.09);\n}\n\n.tjrv3-service:hover::before{\n    transform:scaleX(1);\n}\n\n.tjrv3-service-top{\n    display:flex;\n    justify-content:space-between;\n    align-items:flex-start;\n}\n\n.tjrv3-service-icon{\n    width:49px;\n    height:49px;\n\n    display:grid;\n    place-items:center;\n\n    border-radius:15px;\n\n    background:#f2e8d4;\n    color:var(--deep);\n\n    transition:\n        background .3s ease,\n        transform .3s ease;\n}\n\n.tjrv3-service:hover\n.tjrv3-service-icon{\n    transform:translateY(-3px);\n\n    background:var(--gold);\n}\n\n.tjrv3-service-icon svg{\n    width:21px;\n    height:21px;\n}\n\n.tjrv3-service-num{\n    color:var(--gold);\n\n    font-size:9px;\n    font-weight:900;\n}\n\n.tjrv3-service h3{\n    margin:42px 0 0;\n\n    color:var(--deep);\n\n    font-size:18px;\n    line-height:1.15;\n}\n\n.tjrv3-service p{\n    margin:9px 0 0;\n\n    color:var(--text);\n\n    font-size:10px;\n    line-height:1.6;\n}\n\n.tjrv3-service-bottom{\n    position:absolute;\n\n    left:26px;\n    bottom:24px;\n\n    display:flex;\n    align-items:center;\n    gap:8px;\n\n    color:var(--green);\n\n    font-size:8px;\n    font-weight:850;\n    text-transform:uppercase;\n    letter-spacing:.06em;\n}\n\n.tjrv3-service-bottom::before{\n    content:\"\";\n\n    width:19px;\n    height:1px;\n\n    background:var(--gold);\n}\n\n\n\/* ==========================================================\n   FEATURE \u2014 AM\u00c9LIOR\u00c9\n========================================================== *\/\n\n.tjrv3-feature{\n    position:relative;\n\n    overflow:hidden;\n\n    background:var(--deep);\n    color:#fff;\n}\n\n.tjrv3-feature::before{\n    content:\"\";\n\n    position:absolute;\n\n    width:650px;\n    height:650px;\n\n    left:-400px;\n    bottom:-400px;\n\n    border:1px solid rgba(213,185,133,.10);\n    border-radius:50%;\n}\n\n.tjrv3-feature-grid{\n    display:grid;\n    grid-template-columns:1.08fr .92fr;\n    gap:80px;\n\n    align-items:center;\n}\n\n.tjrv3-feature-visual{\n    position:relative;\n\n    min-height:650px;\n}\n\n.tjrv3-feature-main{\n    position:absolute;\n    inset:0 80px 45px 0;\n\n    overflow:hidden;\n\n    border-radius:30px;\n\n    background:var(--forest);\n}\n\n.tjrv3-feature-main img{\n    width:100%;\n    height:100%;\n\n    object-fit:cover;\n\n    transition:transform .9s ease;\n}\n\n.tjrv3-feature-main:hover img{\n    transform:scale(1.04);\n}\n\n.tjrv3-feature-small{\n    position:absolute;\n\n    right:0;\n    bottom:0;\n\n    width:265px;\n    height:285px;\n\n    overflow:hidden;\n\n    border:8px solid var(--deep);\n    border-radius:24px;\n\n    background:var(--forest);\n}\n\n.tjrv3-feature-small img{\n    width:100%;\n    height:100%;\n\n    object-fit:cover;\n}\n\n.tjrv3-feature-label{\n    position:absolute;\n\n    left:25px;\n    bottom:75px;\n\n    z-index:3;\n\n    padding:12px 14px;\n\n    border:1px solid rgba(255,255,255,.15);\n    border-radius:14px;\n\n    background:rgba(5,20,14,.78);\n\n    backdrop-filter:blur(12px);\n\n    color:#fff;\n\n    font-size:9px;\n    font-weight:850;\n}\n\n.tjrv3-feature .tjrv3-kicker{\n    color:var(--gold);\n}\n\n.tjrv3-feature .tjrv3-title{\n    color:#fff;\n}\n\n.tjrv3-feature .tjrv3-text{\n    color:rgba(255,255,255,.65);\n}\n\n.tjrv3-feature-cards{\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    gap:10px;\n\n    margin-top:33px;\n}\n\n.tjrv3-feature-card{\n    padding:17px;\n\n    border:1px solid rgba(255,255,255,.10);\n    border-radius:15px;\n\n    background:rgba(255,255,255,.045);\n}\n\n.tjrv3-feature-card span{\n    display:block;\n\n    color:var(--gold);\n\n    font-size:8px;\n    font-weight:850;\n    letter-spacing:.08em;\n    text-transform:uppercase;\n}\n\n.tjrv3-feature-card strong{\n    display:block;\n\n    margin-top:7px;\n\n    color:#fff;\n\n    font-size:13px;\n}\n\n.tjrv3-feature-card p{\n    margin:5px 0 0;\n\n    color:rgba(255,255,255,.52);\n\n    font-size:9px;\n    line-height:1.5;\n}\n\n\n\/* ==========================================================\n   FINAL\n========================================================== *\/\n\n.tjrv3-final{\n    padding:100px 0;\n\n    background:var(--cream);\n}\n\n.tjrv3-final-box{\n    position:relative;\n\n    overflow:hidden;\n\n    padding:88px 50px;\n\n    border-radius:31px;\n\n    background:\n        linear-gradient(\n            135deg,\n            #10291f,\n            #173e2e\n        );\n\n    text-align:center;\n}\n\n.tjrv3-final-box::before{\n    content:\"\";\n\n    position:absolute;\n\n    width:460px;\n    height:460px;\n\n    top:-280px;\n    right:-210px;\n\n    border:1px solid rgba(213,185,133,.17);\n    border-radius:50%;\n}\n\n.tjrv3-final-box::after{\n    content:\"\";\n\n    position:absolute;\n\n    width:300px;\n    height:300px;\n\n    left:-160px;\n    bottom:-190px;\n\n    border-radius:50%;\n\n    background:rgba(213,185,133,.07);\n}\n\n.tjrv3-final-content{\n    position:relative;\n    z-index:2;\n\n    max-width:850px;\n\n    margin:auto;\n}\n\n.tjrv3-final .tjrv3-kicker{\n    color:var(--gold);\n}\n\n.tjrv3-final h2{\n    margin:0;\n\n    color:#fff;\n\n    font-size:clamp(46px,6vw,78px);\n    line-height:.96;\n    letter-spacing:-.055em;\n}\n\n.tjrv3-final h2 span{\n    color:var(--gold);\n}\n\n.tjrv3-final p{\n    max-width:620px;\n\n    margin:23px auto 0;\n\n    color:rgba(255,255,255,.69);\n\n    font-size:14px;\n    line-height:1.7;\n}\n\n.tjrv3-final-actions{\n    display:flex;\n    justify-content:center;\n    flex-wrap:wrap;\n    gap:12px;\n\n    margin-top:31px;\n}\n\n\n\/* ==========================================================\n   SCROLL PREMIUM SAFE\n========================================================== *\/\n\n.tjrv3-reveal{\n    opacity:1;\n    transform:none;\n}\n\n.tjrv3-page.tjrv3-motion-ready\n.tjrv3-reveal:not(.tjrv3-visible){\n    opacity:0;\n\n    transform:translateY(42px);\n}\n\n.tjrv3-page.tjrv3-motion-ready\n.tjrv3-reveal.tjrv3-visible{\n    opacity:1;\n\n    transform:translateY(0);\n\n    transition:\n        opacity .78s cubic-bezier(.2,.7,.2,1),\n        transform .78s cubic-bezier(.2,.7,.2,1);\n}\n\n\n\/* ==========================================================\n   TABLET\n========================================================== *\/\n\n@media(max-width:1050px){\n\n    .tjrv3-page{\n        --gallery-view:2;\n    }\n\n    .tjrv3-intro-grid,\n    .tjrv3-feature-grid{\n        grid-template-columns:1fr;\n    }\n\n    .tjrv3-intro-visual{\n        max-width:700px;\n    }\n\n    .tjrv3-gallery-head,\n    .tjrv3-services-head{\n        flex-direction:column;\n        align-items:flex-start;\n    }\n\n    .tjrv3-services-grid{\n        grid-template-columns:repeat(2,1fr);\n    }\n\n}\n\n\n\/* ==========================================================\n   MOBILE\n========================================================== *\/\n\n@media(max-width:700px){\n\n    .tjrv3-page{\n        --gallery-view:1;\n        --gallery-gap:10px;\n    }\n\n    .tjrv3-container{\n        width:calc(100% - 28px);\n    }\n\n    .tjrv3-section{\n        padding:70px 0;\n    }\n\n\n    .tjrv3-title{\n        font-size:38px;\n    }\n\n    .tjrv3-text{\n        font-size:13px;\n    }\n\n    .tjrv3-kicker{\n        margin-bottom:13px;\n\n        font-size:8px;\n    }\n\n    .tjrv3-kicker::before{\n        width:25px;\n    }\n\n\n    \/* HERO *\/\n\n    .tjrv3-hero{\n        min-height:700px;\n    }\n\n    .tjrv3-hero-bg img{\n        height:100%;\n        transform:none !important;\n    }\n\n    .tjrv3-hero::after{\n        background:\n            linear-gradient(\n                0deg,\n                rgba(5,20,14,.98),\n                rgba(5,20,14,.91) 58%,\n                rgba(5,20,14,.30)\n            );\n    }\n\n    .tjrv3-hero-inner{\n        width:calc(100% - 28px);\n\n        padding:135px 0 43px;\n    }\n\n    .tjrv3-hero h1{\n        font-size:clamp(46px,13vw,61px);\n    }\n\n    .tjrv3-hero p{\n        font-size:14px;\n    }\n\n    .tjrv3-hero-actions{\n        display:grid;\n        grid-template-columns:1fr;\n    }\n\n    .tjrv3-btn{\n        width:100%;\n        min-height:50px;\n    }\n\n\n    \/* INTRO *\/\n\n    .tjrv3-intro-grid{\n        gap:45px;\n    }\n\n    .tjrv3-intro-visual{\n        min-height:480px;\n    }\n\n    .tjrv3-intro-main{\n        width:88%;\n        height:400px;\n\n        border-radius:21px;\n    }\n\n    .tjrv3-intro-small{\n        width:47%;\n        height:220px;\n\n        border-width:6px;\n        border-radius:18px;\n    }\n\n    .tjrv3-intro-badge{\n        left:15px;\n        bottom:25px;\n\n        padding:13px;\n    }\n\n    .tjrv3-intro-badge strong{\n        font-size:20px;\n    }\n\n    .tjrv3-intro-lead{\n        font-size:26px;\n    }\n\n    .tjrv3-intro-points{\n        grid-template-columns:1fr;\n    }\n\n\n    \/* GALLERY *\/\n\n    .tjrv3-gallery-head{\n        gap:18px;\n\n        margin-bottom:28px;\n    }\n\n    .tjrv3-gallery-desc{\n        font-size:11px;\n    }\n\n    .tjrv3-arrow-btn{\n        width:42px;\n        height:42px;\n    }\n\n    .tjrv3-slide{\n        height:500px;\n\n        border-radius:20px;\n    }\n\n    .tjrv3-slide-content{\n        left:19px;\n        right:19px;\n        bottom:20px;\n    }\n\n    .tjrv3-slide h3{\n        font-size:24px;\n    }\n\n\n    \/* SERVICES *\/\n\n    .tjrv3-services-grid{\n        grid-template-columns:1fr;\n        gap:10px;\n    }\n\n    .tjrv3-service{\n        min-height:235px;\n\n        padding:21px;\n    }\n\n    .tjrv3-service h3{\n        margin-top:30px;\n    }\n\n\n    \/* FEATURE *\/\n\n    .tjrv3-feature-grid{\n        gap:45px;\n    }\n\n    .tjrv3-feature-visual{\n        min-height:500px;\n    }\n\n    .tjrv3-feature-main{\n        inset:0 35px 50px 0;\n\n        border-radius:21px;\n    }\n\n    .tjrv3-feature-small{\n        width:47%;\n        height:210px;\n\n        border-width:6px;\n        border-radius:18px;\n    }\n\n    .tjrv3-feature-cards{\n        grid-template-columns:1fr;\n    }\n\n\n    \/* FINAL *\/\n\n    .tjrv3-final{\n        padding:65px 0;\n    }\n\n    .tjrv3-final-box{\n        padding:56px 20px;\n\n        border-radius:22px;\n    }\n\n    .tjrv3-final h2{\n        font-size:41px;\n    }\n\n    .tjrv3-final p{\n        font-size:12px;\n    }\n\n    .tjrv3-final-actions{\n        display:grid;\n        grid-template-columns:1fr;\n    }\n\n}\n\n\n\/* ==========================================================\n   REDUCED MOTION\n========================================================== *\/\n\n@media(prefers-reduced-motion:reduce){\n\n    .tjrv3-page *,\n    .tjrv3-page *::before,\n    .tjrv3-page *::after{\n        animation:none !important;\n        transition:none !important;\n    }\n\n    .tjrv3-reveal{\n        opacity:1 !important;\n        transform:none !important;\n    }\n\n}\n\n<\/style>\n\n\n<!-- ==========================================================\n     HERO\n========================================================== -->\n\n<section class=\"tjrv3-hero\">\n\n    <div class=\"tjrv3-hero-bg\">\n\n        <img\n            src=\"https:\/\/images.pexels.com\/photos\/4920263\/pexels-photo-4920263.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=2000\"\n            alt=\"Paysagiste travaillant dans un jardin\"\n            fetchpriority=\"high\"\n            decoding=\"async\">\n\n    <\/div>\n\n\n    <div class=\"tjrv3-hero-inner\">\n\n        <div class=\"tjrv3-hero-content\">\n\n            <div class=\"tjrv3-hero-badge\">\n\n                <span class=\"tjrv3-hero-dot\"><\/span>\n\n                R\u00e9alisations &#038; savoir-faire\n\n            <\/div>\n\n\n            <h1>\n                Le paysage\n                <span>prend forme.<\/span>\n            <\/h1>\n\n\n            <p>\n                D\u00e9couvrez les diff\u00e9rents savoir-faire\n                d&rsquo;un paysagiste \u00e0 travers la cr\u00e9ation,\n                l&rsquo;entretien et l&rsquo;am\u00e9nagement\n                des espaces ext\u00e9rieurs.\n            <\/p>\n\n\n            <div class=\"tjrv3-hero-actions\">\n\n                <a\n                    class=\"tjrv3-btn tjrv3-btn-gold\"\n                    href=\"#realisations\">\n\n                    Explorer la galerie\n                    <span>\u2193<\/span>\n\n                <\/a>\n\n                <a\n                    class=\"tjrv3-btn tjrv3-btn-light\"\n                    href=\"\/paysagiste\/contact\/\">\n\n                    Pr\u00e9senter mon projet\n                    <span class=\"tjrv3-arrow\">\u2192<\/span>\n\n                <\/a>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- ==========================================================\n     INTRO\n========================================================== -->\n\n<section class=\"tjrv3-section tjrv3-intro\">\n\n    <div class=\"tjrv3-container\">\n\n        <div class=\"tjrv3-intro-grid\">\n\n\n            <div class=\"tjrv3-intro-visual tjrv3-reveal\">\n\n\n                <div class=\"tjrv3-intro-main\">\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/images.pexels.com\/photos\/4920282\/pexels-photo-4920282.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1100\"\n                        loading=\"lazy\"\n                        alt=\"Paysagiste pr\u00e9parant la terre dans un jardin\">\n\n                <\/div>\n\n\n                <div class=\"tjrv3-intro-small\">\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/images.pexels.com\/photos\/5230933\/pexels-photo-5230933.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=700\"\n                        loading=\"lazy\"\n                        alt=\"Paysagiste transportant un v\u00e9g\u00e9tal\">\n\n                <\/div>\n\n\n                <div class=\"tjrv3-intro-badge\">\n\n                    <strong>\n                        8\n                    <\/strong>\n\n                    <span>\n                        savoir-faire\n                    <\/span>\n\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"tjrv3-intro-content tjrv3-reveal\">\n\n                <span class=\"tjrv3-kicker\">\n                    Le m\u00e9tier de paysagiste\n                <\/span>\n\n\n                <p class=\"tjrv3-intro-lead\">\n\n                    Chaque ext\u00e9rieur poss\u00e8de\n                    ses propres possibilit\u00e9s.\n\n                    <span>\n                        Notre r\u00f4le est de transformer\n                        ces possibilit\u00e9s en espaces\n                        agr\u00e9ables \u00e0 vivre.\n                    <\/span>\n\n                <\/p>\n\n\n                <p class=\"tjrv3-intro-copy\">\n\n                    Du travail du sol \u00e0 la plantation,\n                    de la taille \u00e0 la cr\u00e9ation d&rsquo;une terrasse,\n                    chaque intervention r\u00e9pond\n                    \u00e0 une fonction pr\u00e9cise dans le jardin.\n\n                <\/p>\n\n\n                <div class=\"tjrv3-intro-points\">\n\n                    <div class=\"tjrv3-intro-point\">\n\n                        <strong>\n                            V\u00e9g\u00e9tal\n                        <\/strong>\n\n                        <span>\n                            Plantations, pelouse,\n                            haies et arbres.\n                        <\/span>\n\n                    <\/div>\n\n\n                    <div class=\"tjrv3-intro-point\">\n\n                        <strong>\n                            Am\u00e9nagement\n                        <\/strong>\n\n                        <span>\n                            Terrasse, all\u00e9es\n                            et organisation des espaces.\n                        <\/span>\n\n                    <\/div>\n\n\n                    <div class=\"tjrv3-intro-point\">\n\n                        <strong>\n                            Entretien\n                        <\/strong>\n\n                        <span>\n                            Pr\u00e9server un jardin\n                            propre et structur\u00e9.\n                        <\/span>\n\n                    <\/div>\n\n\n                    <div class=\"tjrv3-intro-point\">\n\n                        <strong>\n                            Finitions\n                        <\/strong>\n\n                        <span>\n                            Harmoniser l&rsquo;ensemble\n                            de l&rsquo;ext\u00e9rieur.\n                        <\/span>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- ==========================================================\n     GALERIE AUTOMATIQUE\n========================================================== -->\n\n<section\n    class=\"tjrv3-section tjrv3-gallery-section\"\n    id=\"realisations\">\n\n    <div class=\"tjrv3-container\">\n\n\n        <div class=\"tjrv3-gallery-head\">\n\n\n            <div class=\"tjrv3-reveal\">\n\n                <span class=\"tjrv3-kicker\">\n                    Galerie automatique\n                <\/span>\n\n\n                <h2 class=\"tjrv3-title\">\n                    Le m\u00e9tier de paysagiste\n                    <span>en images.<\/span>\n                <\/h2>\n\n\n                <div class=\"tjrv3-autoplay\">\n\n                    <span class=\"tjrv3-autoplay-dot\"><\/span>\n\n                    D\u00e9filement automatique actif\n\n                <\/div>\n\n            <\/div>\n\n\n            <p class=\"tjrv3-gallery-desc tjrv3-reveal\">\n\n                La galerie parcourt automatiquement\n                les principaux services Terra Jardin.\n                Utilisez \u00e9galement les fl\u00e8ches\n                ou faites glisser les cartes sur mobile.\n\n            <\/p>\n\n        <\/div>\n\n\n        <div class=\"tjrv3-gallery-controls tjrv3-reveal\">\n\n\n            <div class=\"tjrv3-counter\">\n\n                R\u00e9alisation\n\n                <span\n                    class=\"tjrv3-current\"\n                    data-current>\n                    01\n                <\/span>\n\n                \/\n\n                <span>\n                    08\n                <\/span>\n\n            <\/div>\n\n\n            <div class=\"tjrv3-arrows\">\n\n                <button\n                    class=\"tjrv3-arrow-btn\"\n                    type=\"button\"\n                    data-prev\n                    aria-label=\"Pr\u00e9c\u00e9dent\">\n\n                    \u2190\n\n                <\/button>\n\n\n                <button\n                    class=\"tjrv3-arrow-btn\"\n                    type=\"button\"\n                    data-next\n                    aria-label=\"Suivant\">\n\n                    \u2192\n\n                <\/button>\n\n            <\/div>\n\n        <\/div>\n\n\n        <div\n            class=\"tjrv3-carousel tjrv3-reveal\"\n            data-carousel>\n\n            <div\n                class=\"tjrv3-track\"\n                data-track>\n\n\n                <!-- 01 -->\n\n                <article class=\"tjrv3-slide\">\n\n                    <div class=\"tjrv3-slide-media\">\n\n                        <img decoding=\"async\"\n                            src=\"https:\/\/images.pexels.com\/photos\/4920282\/pexels-photo-4920282.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1200\"\n                            loading=\"lazy\"\n                            alt=\"Paysagiste pr\u00e9parant le sol pour la cr\u00e9ation d'un jardin\">\n\n                    <\/div>\n\n\n                    <span class=\"tjrv3-slide-number\">\n                        01\n                    <\/span>\n\n\n                    <a\n                        class=\"tjrv3-slide-open\"\n                        href=\"\/paysagiste\/creation-jardin\/\"\n                        aria-label=\"Cr\u00e9ation de jardin\">\n\n                        \u2197\n\n                    <\/a>\n\n\n                    <div class=\"tjrv3-slide-content\">\n\n                        <span class=\"tjrv3-slide-category\">\n                            Cr\u00e9ation de jardin\n                        <\/span>\n\n                        <h3>\n                            Cr\u00e9er un nouvel ext\u00e9rieur\n                        <\/h3>\n\n                        <p>\n                            Pr\u00e9paration, organisation,\n                            v\u00e9g\u00e9talisation et finitions.\n                        <\/p>\n\n                    <\/div>\n\n                <\/article>\n\n\n                <!-- 02 -->\n\n                <article class=\"tjrv3-slide\">\n\n                    <div class=\"tjrv3-slide-media\">\n\n                        <img decoding=\"async\"\n                            src=\"https:\/\/images.pexels.com\/photos\/35262892\/pexels-photo-35262892.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1200\"\n                            loading=\"lazy\"\n                            alt=\"Jardinier r\u00e9alisant l'entretien d'un jardin\"\n                            onerror=\"this.onerror=null;this.src='https:\/\/images.pexels.com\/photos\/14505857\/pexels-photo-14505857.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1200';\">\n\n                    <\/div>\n\n\n                    <span class=\"tjrv3-slide-number\">\n                        02\n                    <\/span>\n\n\n                    <a\n                        class=\"tjrv3-slide-open\"\n                        href=\"\/paysagiste\/entretien-jardin\/\">\n\n                        \u2197\n\n                    <\/a>\n\n\n                    <div class=\"tjrv3-slide-content\">\n\n                        <span class=\"tjrv3-slide-category\">\n                            Entretien\n                        <\/span>\n\n                        <h3>\n                            Entretenir le jardin\n                        <\/h3>\n\n                        <p>\n                            Un ext\u00e9rieur propre,\n                            soign\u00e9 et agr\u00e9able\n                            au quotidien.\n                        <\/p>\n\n                    <\/div>\n\n                <\/article>\n\n\n                <!-- 03 -->\n\n                <article class=\"tjrv3-slide\">\n\n                    <div class=\"tjrv3-slide-media\">\n\n                        <img decoding=\"async\"\n                            src=\"https:\/\/images.pexels.com\/photos\/24595772\/pexels-photo-24595772.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1200\"\n                            loading=\"lazy\"\n                            alt=\"Paysagiste taillant une haute haie\"\n                            onerror=\"this.onerror=null;this.src='https:\/\/images.pexels.com\/photos\/24595771\/pexels-photo-24595771.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1200';\">\n\n                    <\/div>\n\n\n                    <span class=\"tjrv3-slide-number\">\n                        03\n                    <\/span>\n\n\n                    <a\n                        class=\"tjrv3-slide-open\"\n                        href=\"\/paysagiste\/taille-haies\/\">\n\n                        \u2197\n\n                    <\/a>\n\n\n                    <div class=\"tjrv3-slide-content\">\n\n                        <span class=\"tjrv3-slide-category\">\n                            Taille de haies\n                        <\/span>\n\n                        <h3>\n                            Structurer les volumes\n                        <\/h3>\n\n                        <p>\n                            Des haies entretenues\n                            pour des lignes plus nettes.\n                        <\/p>\n\n                    <\/div>\n\n                <\/article>\n\n\n                <!-- 04 -->\n\n                <article class=\"tjrv3-slide\">\n\n                    <div class=\"tjrv3-slide-media\">\n\n                        <img decoding=\"async\"\n                            src=\"https:\/\/images.pexels.com\/photos\/5231052\/pexels-photo-5231052.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1200\"\n                            loading=\"lazy\"\n                            alt=\"Paysagistes r\u00e9alisant la taille d'arbres\">\n\n                    <\/div>\n\n\n                    <span class=\"tjrv3-slide-number\">\n                        04\n                    <\/span>\n\n\n                    <a\n                        class=\"tjrv3-slide-open\"\n                        href=\"\/paysagiste\/elagage\/\">\n\n                        \u2197\n\n                    <\/a>\n\n\n                    <div class=\"tjrv3-slide-content\">\n\n                        <span class=\"tjrv3-slide-category\">\n                            \u00c9lagage\n                        <\/span>\n\n                        <h3>\n                            Entretenir les arbres\n                        <\/h3>\n\n                        <p>\n                            Une intervention adapt\u00e9e\n                            au d\u00e9veloppement\n                            et \u00e0 l&rsquo;environnement.\n                        <\/p>\n\n                    <\/div>\n\n                <\/article>\n\n\n                <!-- 05 -->\n\n                <article class=\"tjrv3-slide\">\n\n                    <div class=\"tjrv3-slide-media\">\n\n                        <img decoding=\"async\"\n                            src=\"https:\/\/images.pexels.com\/photos\/5231232\/pexels-photo-5231232.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1200\"\n                            loading=\"lazy\"\n                            alt=\"Paysagiste posant du gazon en rouleaux\">\n\n                    <\/div>\n\n\n                    <span class=\"tjrv3-slide-number\">\n                        05\n                    <\/span>\n\n\n                    <a\n                        class=\"tjrv3-slide-open\"\n                        href=\"\/paysagiste\/engazonnement\/\">\n\n                        \u2197\n\n                    <\/a>\n\n\n                    <div class=\"tjrv3-slide-content\">\n\n                        <span class=\"tjrv3-slide-category\">\n                            Engazonnement\n                        <\/span>\n\n                        <h3>\n                            Cr\u00e9er une nouvelle pelouse\n                        <\/h3>\n\n                        <p>\n                            Pr\u00e9parer le terrain\n                            et transformer la surface.\n                        <\/p>\n\n                    <\/div>\n\n                <\/article>\n\n\n                <!-- 06 -->\n\n                <article class=\"tjrv3-slide\">\n\n                    <div class=\"tjrv3-slide-media\">\n\n                        <img decoding=\"async\"\n                            src=\"https:\/\/images.pexels.com\/photos\/31024356\/pexels-photo-31024356.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1200\"\n                            loading=\"lazy\"\n                            alt=\"Chantier d'am\u00e9nagement paysager ext\u00e9rieur\"\n                            onerror=\"this.onerror=null;this.src='https:\/\/images.pexels.com\/photos\/34360409\/pexels-photo-34360409.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1200';\">\n\n                    <\/div>\n\n\n                    <span class=\"tjrv3-slide-number\">\n                        06\n                    <\/span>\n\n\n                    <a\n                        class=\"tjrv3-slide-open\"\n                        href=\"\/paysagiste\/amenagement-exterieur\/\">\n\n                        \u2197\n\n                    <\/a>\n\n\n                    <div class=\"tjrv3-slide-content\">\n\n                        <span class=\"tjrv3-slide-category\">\n                            Am\u00e9nagement ext\u00e9rieur\n                        <\/span>\n\n                        <h3>\n                            Repenser le terrain\n                        <\/h3>\n\n                        <p>\n                            Organiser les espaces,\n                            les usages et les circulations.\n                        <\/p>\n\n                    <\/div>\n\n                <\/article>\n\n\n                <!-- 07 -->\n\n                <article class=\"tjrv3-slide\">\n\n                    <div class=\"tjrv3-slide-media\">\n\n                        <img decoding=\"async\"\n                            src=\"https:\/\/images.pexels.com\/photos\/16938572\/pexels-photo-16938572.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1200\"\n                            loading=\"lazy\"\n                            alt=\"Terrasse de jardin am\u00e9nag\u00e9e\">\n\n                    <\/div>\n\n\n                    <span class=\"tjrv3-slide-number\">\n                        07\n                    <\/span>\n\n\n                    <a\n                        class=\"tjrv3-slide-open\"\n                        href=\"\/paysagiste\/terrasses-allees\/\">\n\n                        \u2197\n\n                    <\/a>\n\n\n                    <div class=\"tjrv3-slide-content\">\n\n                        <span class=\"tjrv3-slide-category\">\n                            Terrasses &#038; all\u00e9es\n                        <\/span>\n\n                        <h3>\n                            Cr\u00e9er des espaces \u00e0 vivre\n                        <\/h3>\n\n                        <p>\n                            Des zones de d\u00e9tente\n                            et des cheminements\n                            int\u00e9gr\u00e9s au jardin.\n                        <\/p>\n\n                    <\/div>\n\n                <\/article>\n\n\n                <!-- 08 -->\n\n                <article class=\"tjrv3-slide\">\n\n                    <div class=\"tjrv3-slide-media\">\n\n                        <img decoding=\"async\"\n                            src=\"https:\/\/images.pexels.com\/photos\/18832449\/pexels-photo-18832449.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1200\"\n                            loading=\"lazy\"\n                            alt=\"Cl\u00f4ture en bois int\u00e9gr\u00e9e dans un jardin\">\n\n                    <\/div>\n\n\n                    <span class=\"tjrv3-slide-number\">\n                        08\n                    <\/span>\n\n\n                    <a\n                        class=\"tjrv3-slide-open\"\n                        href=\"\/paysagiste\/clotures\/\">\n\n                        \u2197\n\n                    <\/a>\n\n\n                    <div class=\"tjrv3-slide-content\">\n\n                        <span class=\"tjrv3-slide-category\">\n                            Cl\u00f4tures\n                        <\/span>\n\n                        <h3>\n                            D\u00e9limiter le jardin\n                        <\/h3>\n\n                        <p>\n                            Une s\u00e9paration\n                            int\u00e9gr\u00e9e harmonieusement\n                            \u00e0 l&rsquo;ext\u00e9rieur.\n                        <\/p>\n\n                    <\/div>\n\n                <\/article>\n\n\n            <\/div>\n\n        <\/div>\n\n\n        <div class=\"tjrv3-progress\">\n\n            <div\n                class=\"tjrv3-progress-bar\"\n                data-progress>\n            <\/div>\n\n        <\/div>\n\n\n        <div\n            class=\"tjrv3-dots\"\n            data-dots>\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- ==========================================================\n     SERVICES\n========================================================== -->\n\n<section class=\"tjrv3-section tjrv3-services\">\n\n    <div class=\"tjrv3-container\">\n\n\n        <div class=\"tjrv3-services-head\">\n\n\n            <div class=\"tjrv3-reveal\">\n\n                <span class=\"tjrv3-kicker\">\n                    Nos savoir-faire\n                <\/span>\n\n                <h2 class=\"tjrv3-title\">\n                    De la v\u00e9g\u00e9tation\n                    <span>aux am\u00e9nagements.<\/span>\n                <\/h2>\n\n            <\/div>\n\n\n            <p class=\"tjrv3-text tjrv3-reveal\">\n\n                Chaque intervention r\u00e9pond \u00e0 un besoin pr\u00e9cis,\n                mais plusieurs services peuvent \u00eatre r\u00e9unis\n                dans un m\u00eame projet paysager.\n\n            <\/p>\n\n        <\/div>\n\n\n        <div class=\"tjrv3-services-grid\">\n\n\n            <a class=\"tjrv3-service tjrv3-reveal\"\n               href=\"\/paysagiste\/creation-jardin\/\">\n\n                <div class=\"tjrv3-service-top\">\n\n                    <div class=\"tjrv3-service-icon\">\n\n                        <svg viewBox=\"0 0 24 24\"\n                             fill=\"none\"\n                             stroke=\"currentColor\"\n                             stroke-width=\"1.7\">\n\n                            <path d=\"M12 21V9\"\/>\n                            <path d=\"M12 13C8 13 5 10 5 6c4 0 7 3 7 7Z\"\/>\n                            <path d=\"M12 10c0-4 3-7 7-7 0 4-3 7-7 7Z\"\/>\n\n                        <\/svg>\n\n                    <\/div>\n\n                    <span class=\"tjrv3-service-num\">01<\/span>\n\n                <\/div>\n\n                <h3>Cr\u00e9ation de jardin<\/h3>\n\n                <p>\n                    Concevoir un nouvel univers paysager.\n                <\/p>\n\n                <span class=\"tjrv3-service-bottom\">\n                    D\u00e9couvrir\n                <\/span>\n\n            <\/a>\n\n\n            <a class=\"tjrv3-service tjrv3-reveal\"\n               href=\"\/paysagiste\/entretien-jardin\/\">\n\n                <div class=\"tjrv3-service-top\">\n\n                    <div class=\"tjrv3-service-icon\">\n\n                        <svg viewBox=\"0 0 24 24\"\n                             fill=\"none\"\n                             stroke=\"currentColor\"\n                             stroke-width=\"1.7\">\n\n                            <path d=\"m5 12 4 4L19 6\"\/>\n                            <circle cx=\"12\" cy=\"12\" r=\"9\"\/>\n\n                        <\/svg>\n\n                    <\/div>\n\n                    <span class=\"tjrv3-service-num\">02<\/span>\n\n                <\/div>\n\n                <h3>Entretien de jardin<\/h3>\n\n                <p>\n                    Pr\u00e9server un ext\u00e9rieur propre et soign\u00e9.\n                <\/p>\n\n                <span class=\"tjrv3-service-bottom\">\n                    D\u00e9couvrir\n                <\/span>\n\n            <\/a>\n\n\n            <a class=\"tjrv3-service tjrv3-reveal\"\n               href=\"\/paysagiste\/taille-haies\/\">\n\n                <div class=\"tjrv3-service-top\">\n\n                    <div class=\"tjrv3-service-icon\">\n\n                        <svg viewBox=\"0 0 24 24\"\n                             fill=\"none\"\n                             stroke=\"currentColor\"\n                             stroke-width=\"1.7\">\n\n                            <circle cx=\"7\" cy=\"8\" r=\"3\"\/>\n                            <circle cx=\"7\" cy=\"16\" r=\"3\"\/>\n                            <path d=\"m9.5 9.5 11 7\"\/>\n                            <path d=\"m9.5 14.5 11-7\"\/>\n\n                        <\/svg>\n\n                    <\/div>\n\n                    <span class=\"tjrv3-service-num\">03<\/span>\n\n                <\/div>\n\n                <h3>Taille de haies<\/h3>\n\n                <p>\n                    Ma\u00eetriser les volumes et les lignes.\n                <\/p>\n\n                <span class=\"tjrv3-service-bottom\">\n                    D\u00e9couvrir\n                <\/span>\n\n            <\/a>\n\n\n            <a class=\"tjrv3-service tjrv3-reveal\"\n               href=\"\/paysagiste\/elagage\/\">\n\n                <div class=\"tjrv3-service-top\">\n\n                    <div class=\"tjrv3-service-icon\">\n\n                        <svg viewBox=\"0 0 24 24\"\n                             fill=\"none\"\n                             stroke=\"currentColor\"\n                             stroke-width=\"1.7\">\n\n                            <path d=\"M12 21V7\"\/>\n                            <path d=\"M7 12 12 7l5 5\"\/>\n                            <path d=\"M5 19h14\"\/>\n\n                        <\/svg>\n\n                    <\/div>\n\n                    <span class=\"tjrv3-service-num\">04<\/span>\n\n                <\/div>\n\n                <h3>\u00c9lagage<\/h3>\n\n                <p>\n                    Entretenir et ma\u00eetriser les arbres.\n                <\/p>\n\n                <span class=\"tjrv3-service-bottom\">\n                    D\u00e9couvrir\n                <\/span>\n\n            <\/a>\n\n\n            <a class=\"tjrv3-service tjrv3-reveal\"\n               href=\"\/paysagiste\/engazonnement\/\">\n\n                <div class=\"tjrv3-service-top\">\n\n                    <div class=\"tjrv3-service-icon\">\n\n                        <svg viewBox=\"0 0 24 24\"\n                             fill=\"none\"\n                             stroke=\"currentColor\"\n                             stroke-width=\"1.7\">\n\n                            <path d=\"M3 20h18\"\/>\n                            <path d=\"M7 20c0-5 2-8 4-11\"\/>\n                            <path d=\"M13 20c0-7 3-12 6-16\"\/>\n\n                        <\/svg>\n\n                    <\/div>\n\n                    <span class=\"tjrv3-service-num\">05<\/span>\n\n                <\/div>\n\n                <h3>Engazonnement<\/h3>\n\n                <p>\n                    Cr\u00e9er une nouvelle surface engazonn\u00e9e.\n                <\/p>\n\n                <span class=\"tjrv3-service-bottom\">\n                    D\u00e9couvrir\n                <\/span>\n\n            <\/a>\n\n\n            <a class=\"tjrv3-service tjrv3-reveal\"\n               href=\"\/paysagiste\/amenagement-exterieur\/\">\n\n                <div class=\"tjrv3-service-top\">\n\n                    <div class=\"tjrv3-service-icon\">\n\n                        <svg viewBox=\"0 0 24 24\"\n                             fill=\"none\"\n                             stroke=\"currentColor\"\n                             stroke-width=\"1.7\">\n\n                            <rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\"\/>\n                            <path d=\"M4 12h16\"\/>\n                            <path d=\"M12 4v16\"\/>\n\n                        <\/svg>\n\n                    <\/div>\n\n                    <span class=\"tjrv3-service-num\">06<\/span>\n\n                <\/div>\n\n                <h3>Am\u00e9nagement ext\u00e9rieur<\/h3>\n\n                <p>\n                    Organiser les diff\u00e9rentes zones du terrain.\n                <\/p>\n\n                <span class=\"tjrv3-service-bottom\">\n                    D\u00e9couvrir\n                <\/span>\n\n            <\/a>\n\n\n            <a class=\"tjrv3-service tjrv3-reveal\"\n               href=\"\/paysagiste\/terrasses-allees\/\">\n\n                <div class=\"tjrv3-service-top\">\n\n                    <div class=\"tjrv3-service-icon\">\n\n                        <svg viewBox=\"0 0 24 24\"\n                             fill=\"none\"\n                             stroke=\"currentColor\"\n                             stroke-width=\"1.7\">\n\n                            <path d=\"M4 6h16\"\/>\n                            <path d=\"M4 12h16\"\/>\n                            <path d=\"M4 18h16\"\/>\n                            <path d=\"M8 3v18\"\/>\n                            <path d=\"M16 3v18\"\/>\n\n                        <\/svg>\n\n                    <\/div>\n\n                    <span class=\"tjrv3-service-num\">07<\/span>\n\n                <\/div>\n\n                <h3>Terrasses &#038; all\u00e9es<\/h3>\n\n                <p>\n                    Cr\u00e9er des circulations et espaces \u00e0 vivre.\n                <\/p>\n\n                <span class=\"tjrv3-service-bottom\">\n                    D\u00e9couvrir\n                <\/span>\n\n            <\/a>\n\n\n            <a class=\"tjrv3-service tjrv3-reveal\"\n               href=\"\/paysagiste\/clotures\/\">\n\n                <div class=\"tjrv3-service-top\">\n\n                    <div class=\"tjrv3-service-icon\">\n\n                        <svg viewBox=\"0 0 24 24\"\n                             fill=\"none\"\n                             stroke=\"currentColor\"\n                             stroke-width=\"1.7\">\n\n                            <path d=\"M5 4v16\"\/>\n                            <path d=\"M12 4v16\"\/>\n                            <path d=\"M19 4v16\"\/>\n                            <path d=\"M5 8h14\"\/>\n                            <path d=\"M5 16h14\"\/>\n\n                        <\/svg>\n\n                    <\/div>\n\n                    <span class=\"tjrv3-service-num\">08<\/span>\n\n                <\/div>\n\n                <h3>Cl\u00f4tures<\/h3>\n\n                <p>\n                    D\u00e9limiter harmonieusement l&rsquo;ext\u00e9rieur.\n                <\/p>\n\n                <span class=\"tjrv3-service-bottom\">\n                    D\u00e9couvrir\n                <\/span>\n\n            <\/a>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- ==========================================================\n     FEATURE\n========================================================== -->\n\n<section class=\"tjrv3-section tjrv3-feature\">\n\n    <div class=\"tjrv3-container\">\n\n        <div class=\"tjrv3-feature-grid\">\n\n\n            <div class=\"tjrv3-feature-visual tjrv3-reveal\">\n\n\n                <div class=\"tjrv3-feature-main\">\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/images.pexels.com\/photos\/36613784\/pexels-photo-36613784.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1400\"\n                        loading=\"lazy\"\n                        alt=\"Jardin enti\u00e8rement am\u00e9nag\u00e9\">\n\n                <\/div>\n\n\n                <div class=\"tjrv3-feature-small\">\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/images.pexels.com\/photos\/5231232\/pexels-photo-5231232.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=700\"\n                        loading=\"lazy\"\n                        alt=\"Pose de gazon par un paysagiste\">\n\n                <\/div>\n\n\n                <div class=\"tjrv3-feature-label\">\n                    De l&rsquo;id\u00e9e au jardin\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"tjrv3-reveal\">\n\n                <span class=\"tjrv3-kicker\">\n                    Une vision globale\n                <\/span>\n\n\n                <h2 class=\"tjrv3-title\">\n                    Plusieurs m\u00e9tiers.\n                    <span>Un seul ext\u00e9rieur.<\/span>\n                <\/h2>\n\n\n                <p class=\"tjrv3-text\">\n\n                    Une transformation compl\u00e8te peut r\u00e9unir\n                    plusieurs interventions afin de cr\u00e9er\n                    une continuit\u00e9 entre v\u00e9g\u00e9tation,\n                    espaces de vie et circulations.\n\n                <\/p>\n\n\n                <div class=\"tjrv3-feature-cards\">\n\n\n                    <div class=\"tjrv3-feature-card\">\n\n                        <span>01 \u2014 V\u00e9g\u00e9tal<\/span>\n\n                        <strong>\n                            Plantations\n                        <\/strong>\n\n                        <p>\n                            Cr\u00e9er volumes et perspectives.\n                        <\/p>\n\n                    <\/div>\n\n\n                    <div class=\"tjrv3-feature-card\">\n\n                        <span>02 \u2014 Sol<\/span>\n\n                        <strong>\n                            Pelouse\n                        <\/strong>\n\n                        <p>\n                            Donner une nouvelle base au jardin.\n                        <\/p>\n\n                    <\/div>\n\n\n                    <div class=\"tjrv3-feature-card\">\n\n                        <span>03 \u2014 Usage<\/span>\n\n                        <strong>\n                            Terrasse &#038; all\u00e9es\n                        <\/strong>\n\n                        <p>\n                            Organiser la circulation.\n                        <\/p>\n\n                    <\/div>\n\n\n                    <div class=\"tjrv3-feature-card\">\n\n                        <span>04 \u2014 Dur\u00e9e<\/span>\n\n                        <strong>\n                            Entretien\n                        <\/strong>\n\n                        <p>\n                            Pr\u00e9server le r\u00e9sultat.\n                        <\/p>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- ==========================================================\n     FINAL\n========================================================== -->\n\n<section class=\"tjrv3-final\">\n\n    <div class=\"tjrv3-container\">\n\n        <div class=\"tjrv3-final-box tjrv3-reveal\">\n\n            <div class=\"tjrv3-final-content\">\n\n                <span class=\"tjrv3-kicker\">\n                    Votre ext\u00e9rieur\n                <\/span>\n\n\n                <h2>\n                    Et si la prochaine transformation\n                    <span>\u00e9tait la v\u00f4tre ?<\/span>\n                <\/h2>\n\n\n                <p>\n                    Pr\u00e9sentez votre terrain,\n                    vos envies et les am\u00e9nagements\n                    que vous souhaitez r\u00e9aliser.\n                <\/p>\n\n\n                <div class=\"tjrv3-final-actions\">\n\n                    <a\n                        class=\"tjrv3-btn tjrv3-btn-gold\"\n                        href=\"\/paysagiste\/contact\/\">\n\n                        Demander un devis\n                        <span class=\"tjrv3-arrow\">\u2192<\/span>\n\n                    <\/a>\n\n\n                    <a\n                        class=\"tjrv3-btn tjrv3-btn-light\"\n                        href=\"\/paysagiste\/services\/\">\n\n                        Voir tous les services\n                        <span class=\"tjrv3-arrow\">\u2192<\/span>\n\n                    <\/a>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<script>\n(function(){\n\n\"use strict\";\n\n\nfunction initTJRV3(){\n\n    var root =\n        document.querySelector(\n            \".tjrv3-page\"\n        );\n\n    if(!root){\n        return;\n    }\n\n\n    var reduced =\n        false;\n\n\n    try{\n\n        reduced =\n            window.matchMedia(\n                \"(prefers-reduced-motion: reduce)\"\n            ).matches;\n\n    }catch(error){}\n\n\n\n    \/* ======================================================\n       REVEAL SAFE\n    ====================================================== *\/\n\n    try{\n\n        var reveals =\n            root.querySelectorAll(\n                \".tjrv3-reveal\"\n            );\n\n\n        if(\n            reduced ||\n            !(\"IntersectionObserver\" in window)\n        ){\n\n            reveals.forEach(\n                function(item){\n\n                    item.classList.add(\n                        \"tjrv3-visible\"\n                    );\n\n                }\n            );\n\n        }else{\n\n\n            var vh =\n                window.innerHeight ||\n                document.documentElement.clientHeight;\n\n\n            reveals.forEach(\n                function(item){\n\n                    if(\n                        item.getBoundingClientRect()\n                            .top\n                        <\n                        vh * .94\n                    ){\n\n                        item.classList.add(\n                            \"tjrv3-visible\"\n                        );\n\n                    }\n\n                }\n            );\n\n\n            var observer =\n                new IntersectionObserver(\n\n                    function(entries){\n\n                        entries.forEach(\n                            function(entry){\n\n                                if(\n                                    entry.isIntersecting\n                                ){\n\n                                    entry.target\n                                        .classList\n                                        .add(\n                                            \"tjrv3-visible\"\n                                        );\n\n\n                                    observer.unobserve(\n                                        entry.target\n                                    );\n\n                                }\n\n                            }\n                        );\n\n                    },\n\n                    {\n                        threshold:.12,\n                        rootMargin:\n                            \"0px 0px -40px 0px\"\n                    }\n\n                );\n\n\n            reveals.forEach(\n                function(item){\n\n                    observer.observe(\n                        item\n                    );\n\n                }\n            );\n\n\n            root.classList.add(\n                \"tjrv3-motion-ready\"\n            );\n\n        }\n\n    }catch(error){\n\n        root.classList.remove(\n            \"tjrv3-motion-ready\"\n        );\n\n    }\n\n\n\n    \/* ======================================================\n       HERO PARALLAX\n    ====================================================== *\/\n\n    try{\n\n        var hero =\n            root.querySelector(\n                \".tjrv3-hero\"\n            );\n\n\n        var heroTick =\n            false;\n\n\n        function updateHero(){\n\n            heroTick =\n                false;\n\n\n            if(\n                reduced ||\n                window.innerWidth <= 700 ||\n                !hero\n            ){\n                return;\n            }\n\n\n            var rect =\n                hero.getBoundingClientRect();\n\n\n            if(\n                rect.bottom < 0 ||\n                rect.top >\n                window.innerHeight\n            ){\n                return;\n            }\n\n\n            var shift =\n                Math.max(\n                    -45,\n                    Math.min(\n                        45,\n                        -rect.top * .075\n                    )\n                );\n\n\n            hero.style.setProperty(\n                \"--hero-shift\",\n                shift.toFixed(1) + \"px\"\n            );\n\n        }\n\n\n        window.addEventListener(\n            \"scroll\",\n            function(){\n\n                if(heroTick){\n                    return;\n                }\n\n\n                heroTick =\n                    true;\n\n\n                requestAnimationFrame(\n                    updateHero\n                );\n\n            },\n            {\n                passive:true\n            }\n        );\n\n\n        updateHero();\n\n    }catch(error){}\n\n\n\n    \/* ======================================================\n       GALERIE AUTO INFINIE\n    ====================================================== *\/\n\n    try{\n\n        var carousel =\n            root.querySelector(\n                \"[data-carousel]\"\n            );\n\n\n        var track =\n            root.querySelector(\n                \"[data-track]\"\n            );\n\n\n        if(\n            !carousel ||\n            !track\n        ){\n            return;\n        }\n\n\n        var originalSlides =\n            Array.prototype.slice.call(\n                track.children\n            );\n\n\n        var originalCount =\n            originalSlides.length;\n\n\n        var current =\n            root.querySelector(\n                \"[data-current]\"\n            );\n\n\n        var progress =\n            root.querySelector(\n                \"[data-progress]\"\n            );\n\n\n        var dotsBox =\n            root.querySelector(\n                \"[data-dots]\"\n            );\n\n\n        var prev =\n            root.querySelector(\n                \"[data-prev]\"\n            );\n\n\n        var next =\n            root.querySelector(\n                \"[data-next]\"\n            );\n\n\n        var index =\n            0;\n\n\n        var perView =\n            3;\n\n\n        var step =\n            0;\n\n\n        var autoplayTimer =\n            null;\n\n\n        var autoplayDelay =\n            3500;\n\n\n        var touchX =\n            null;\n\n\n        var touchY =\n            null;\n\n\n        var isResetting =\n            false;\n\n\n        var dots =\n            [];\n\n\n\n        \/* --------------------------------------------------\n           DOTS\n        -------------------------------------------------- *\/\n\n        if(dotsBox){\n\n            originalSlides.forEach(\n                function(slide,i){\n\n                    var button =\n                        document.createElement(\n                            \"button\"\n                        );\n\n\n                    button.type =\n                        \"button\";\n\n\n                    button.className =\n                        \"tjrv3-dot\";\n\n\n                    button.setAttribute(\n                        \"aria-label\",\n                        \"Voir la r\u00e9alisation \" +\n                        (\n                            i + 1\n                        )\n                    );\n\n\n                    button.addEventListener(\n                        \"click\",\n                        function(){\n\n                            index =\n                                i;\n\n\n                            update(\n                                true\n                            );\n\n\n                            restartAuto();\n\n                        }\n                    );\n\n\n                    dotsBox.appendChild(\n                        button\n                    );\n\n\n                    dots.push(\n                        button\n                    );\n\n                }\n            );\n\n        }\n\n\n\n        \/* --------------------------------------------------\n           PER VIEW\n        -------------------------------------------------- *\/\n\n        function getPerView(){\n\n            var value =\n                parseInt(\n                    getComputedStyle(root)\n                        .getPropertyValue(\n                            \"--gallery-view\"\n                        ),\n                    10\n                );\n\n\n            if(\n                !value ||\n                value < 1\n            ){\n\n                value =\n                    1;\n\n            }\n\n\n            return value;\n\n        }\n\n\n\n        \/* --------------------------------------------------\n           CLONES\n        -------------------------------------------------- *\/\n\n        function removeClones(){\n\n            var clones =\n                track.querySelectorAll(\n                    \"[data-clone]\"\n                );\n\n\n            clones.forEach(\n                function(clone){\n\n                    clone.remove();\n\n                }\n            );\n\n        }\n\n\n\n        function buildClones(){\n\n            removeClones();\n\n\n            perView =\n                getPerView();\n\n\n            for(\n                var i = 0;\n                i < perView;\n                i++\n            ){\n\n                var clone =\n                    originalSlides[i]\n                        .cloneNode(\n                            true\n                        );\n\n\n                clone.setAttribute(\n                    \"data-clone\",\n                    \"true\"\n                );\n\n\n                clone.setAttribute(\n                    \"aria-hidden\",\n                    \"true\"\n                );\n\n\n                track.appendChild(\n                    clone\n                );\n\n            }\n\n        }\n\n\n\n        \/* --------------------------------------------------\n           MEASURE\n        -------------------------------------------------- *\/\n\n        function measure(){\n\n            if(\n                !originalSlides.length\n            ){\n                return;\n            }\n\n\n            var first =\n                originalSlides[0]\n                    .getBoundingClientRect();\n\n\n            var styles =\n                window.getComputedStyle(\n                    track\n                );\n\n\n            var gap =\n                parseFloat(\n                    styles.columnGap ||\n                    styles.gap ||\n                    \"0\"\n                );\n\n\n            step =\n                first.width +\n                gap;\n\n        }\n\n\n\n        \/* --------------------------------------------------\n           INTERFACE\n        -------------------------------------------------- *\/\n\n        function normalIndex(){\n\n            if(\n                index >=\n                originalCount\n            ){\n\n                return 0;\n\n            }\n\n\n            return index;\n\n        }\n\n\n\n        function updateUI(){\n\n            var visibleIndex =\n                normalIndex();\n\n\n            if(current){\n\n                current.textContent =\n                    String(\n                        visibleIndex + 1\n                    )\n                    .padStart(\n                        2,\n                        \"0\"\n                    );\n\n            }\n\n\n            if(progress){\n\n                progress.style.width =\n                    (\n                        (\n                            visibleIndex + 1\n                        )\n                        \/\n                        originalCount\n                        *\n                        100\n                    )\n                    +\n                    \"%\";\n\n            }\n\n\n            dots.forEach(\n                function(dot,i){\n\n                    dot.classList.toggle(\n                        \"tjrv3-active\",\n                        i ===\n                        visibleIndex\n                    );\n\n                }\n            );\n\n        }\n\n\n\n        \/* --------------------------------------------------\n           UPDATE POSITION\n        -------------------------------------------------- *\/\n\n        function update(\n            animated\n        ){\n\n            if(\n                animated === false\n            ){\n\n                track.style.transition =\n                    \"none\";\n\n            }else{\n\n                track.style.transition =\n                    \"transform .78s cubic-bezier(.22,.74,.25,1)\";\n\n            }\n\n\n            track.style.transform =\n                \"translate3d(\" +\n                (\n                    -index *\n                    step\n                )\n                +\n                \"px,0,0)\";\n\n\n            updateUI();\n\n        }\n\n\n\n        \/* --------------------------------------------------\n           RESET AFTER CLONE\n        -------------------------------------------------- *\/\n\n        track.addEventListener(\n            \"transitionend\",\n            function(event){\n\n                if(\n                    event.propertyName !==\n                    \"transform\"\n                ){\n                    return;\n                }\n\n\n                if(\n                    index ===\n                    originalCount\n                ){\n\n                    isResetting =\n                        true;\n\n\n                    index =\n                        0;\n\n\n                    update(\n                        false\n                    );\n\n\n                    requestAnimationFrame(\n                        function(){\n\n                            requestAnimationFrame(\n                                function(){\n\n                                    track.style.transition =\n                                        \"transform .78s cubic-bezier(.22,.74,.25,1)\";\n\n\n                                    isResetting =\n                                        false;\n\n                                }\n                            );\n\n                        }\n                    );\n\n                }\n\n            }\n        );\n\n\n\n        \/* --------------------------------------------------\n           NEXT\n        -------------------------------------------------- *\/\n\n        function goNext(){\n\n            if(isResetting){\n                return;\n            }\n\n\n            index +=\n                1;\n\n\n            if(\n                index >\n                originalCount\n            ){\n\n                index =\n                    1;\n\n            }\n\n\n            update(\n                true\n            );\n\n        }\n\n\n\n        \/* --------------------------------------------------\n           PREVIOUS\n        -------------------------------------------------- *\/\n\n        function goPrevious(){\n\n            if(isResetting){\n                return;\n            }\n\n\n            if(\n                index <= 0\n            ){\n\n                index =\n                    originalCount -\n                    1;\n\n\n                update(\n                    false\n                );\n\n\n                requestAnimationFrame(\n                    function(){\n\n                        track.style.transition =\n                            \"transform .78s cubic-bezier(.22,.74,.25,1)\";\n\n                    }\n                );\n\n\n                updateUI();\n\n                return;\n            }\n\n\n            index -=\n                1;\n\n\n            update(\n                true\n            );\n\n        }\n\n\n\n        \/* --------------------------------------------------\n           AUTOPLAY\n           NE S'ARR\u00caTE PLUS AU SURVOL PC\n        -------------------------------------------------- *\/\n\n        function clearAuto(){\n\n            if(autoplayTimer){\n\n                clearTimeout(\n                    autoplayTimer\n                );\n\n\n                autoplayTimer =\n                    null;\n\n            }\n\n        }\n\n\n\n        function scheduleAuto(){\n\n            clearAuto();\n\n\n            if(\n                reduced ||\n                document.hidden\n            ){\n                return;\n            }\n\n\n            autoplayTimer =\n                setTimeout(\n                    function(){\n\n                        goNext();\n\n                        scheduleAuto();\n\n                    },\n                    autoplayDelay\n                );\n\n        }\n\n\n\n        function restartAuto(){\n\n            clearAuto();\n\n            scheduleAuto();\n\n        }\n\n\n\n        \/* --------------------------------------------------\n           BUTTONS\n        -------------------------------------------------- *\/\n\n        if(next){\n\n            next.addEventListener(\n                \"click\",\n                function(){\n\n                    goNext();\n\n                    restartAuto();\n\n                }\n            );\n\n        }\n\n\n        if(prev){\n\n            prev.addEventListener(\n                \"click\",\n                function(){\n\n                    goPrevious();\n\n                    restartAuto();\n\n                }\n            );\n\n        }\n\n\n\n        \/* --------------------------------------------------\n           SWIPE MOBILE\n        -------------------------------------------------- *\/\n\n        carousel.addEventListener(\n            \"touchstart\",\n            function(event){\n\n                if(\n                    !event.touches ||\n                    !event.touches.length\n                ){\n                    return;\n                }\n\n\n                touchX =\n                    event.touches[0]\n                        .clientX;\n\n\n                touchY =\n                    event.touches[0]\n                        .clientY;\n\n\n                clearAuto();\n\n            },\n            {\n                passive:true\n            }\n        );\n\n\n        carousel.addEventListener(\n            \"touchend\",\n            function(event){\n\n                if(\n                    touchX === null ||\n                    touchY === null ||\n                    !event.changedTouches ||\n                    !event.changedTouches.length\n                ){\n\n                    scheduleAuto();\n\n                    return;\n                }\n\n\n                var endX =\n                    event.changedTouches[0]\n                        .clientX;\n\n\n                var endY =\n                    event.changedTouches[0]\n                        .clientY;\n\n\n                var dx =\n                    endX -\n                    touchX;\n\n\n                var dy =\n                    endY -\n                    touchY;\n\n\n                if(\n                    Math.abs(dx) >\n                    40\n                    &&\n                    Math.abs(dx) >\n                    Math.abs(dy)\n                ){\n\n                    if(\n                        dx < 0\n                    ){\n\n                        goNext();\n\n                    }else{\n\n                        goPrevious();\n\n                    }\n\n                }\n\n\n                touchX =\n                    null;\n\n\n                touchY =\n                    null;\n\n\n                setTimeout(\n                    scheduleAuto,\n                    600\n                );\n\n            },\n            {\n                passive:true\n            }\n        );\n\n\n\n        \/* --------------------------------------------------\n           TAB\n        -------------------------------------------------- *\/\n\n        document.addEventListener(\n            \"visibilitychange\",\n            function(){\n\n                if(\n                    document.hidden\n                ){\n\n                    clearAuto();\n\n                }else{\n\n                    scheduleAuto();\n\n                }\n\n            }\n        );\n\n\n\n        \/* --------------------------------------------------\n           RESIZE\n        -------------------------------------------------- *\/\n\n        var resizeTimer =\n            null;\n\n\n        window.addEventListener(\n            \"resize\",\n            function(){\n\n                clearTimeout(\n                    resizeTimer\n                );\n\n\n                resizeTimer =\n                    setTimeout(\n                        function(){\n\n                            index =\n                                0;\n\n\n                            buildClones();\n\n                            measure();\n\n                            update(\n                                false\n                            );\n\n\n                            restartAuto();\n\n                        },\n                        160\n                    );\n\n            }\n        );\n\n\n\n        \/* --------------------------------------------------\n           START\n        -------------------------------------------------- *\/\n\n        buildClones();\n\n        measure();\n\n        update(\n            false\n        );\n\n        scheduleAuto();\n\n    }catch(error){\n\n        \/*\n         * M\u00eame si le carrousel JS plante,\n         * les \u00e9l\u00e9ments de la page restent visibles.\n         *\/\n\n    }\n\n}\n\n\n\nif(\n    document.readyState ===\n    \"loading\"\n){\n\n    document.addEventListener(\n        \"DOMContentLoaded\",\n        initTJRV3\n    );\n\n}else{\n\n    initTJRV3();\n\n}\n\n})();\n<\/script>\n\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>R\u00e9alisations &#038; savoir-faire Le paysage prend forme. D\u00e9couvrez les diff\u00e9rents savoir-faire d&rsquo;un paysagiste \u00e0 travers la cr\u00e9ation, l&rsquo;entretien et l&rsquo;am\u00e9nagement des espaces ext\u00e9rieurs. Explorer la galerie \u2193 Pr\u00e9senter mon projet \u2192 8 savoir-faire Le m\u00e9tier de paysagiste Chaque ext\u00e9rieur poss\u00e8de ses propres possibilit\u00e9s. Notre r\u00f4le est de transformer ces possibilit\u00e9s en espaces agr\u00e9ables \u00e0 vivre. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-33","page","type-page","status-publish","hentry"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":8}},"_links":{"self":[{"href":"https:\/\/demo.jouglet-web.fr\/paysagiste\/wp-json\/wp\/v2\/pages\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.jouglet-web.fr\/paysagiste\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.jouglet-web.fr\/paysagiste\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.jouglet-web.fr\/paysagiste\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.jouglet-web.fr\/paysagiste\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":5,"href":"https:\/\/demo.jouglet-web.fr\/paysagiste\/wp-json\/wp\/v2\/pages\/33\/revisions"}],"predecessor-version":[{"id":85,"href":"https:\/\/demo.jouglet-web.fr\/paysagiste\/wp-json\/wp\/v2\/pages\/33\/revisions\/85"}],"wp:attachment":[{"href":"https:\/\/demo.jouglet-web.fr\/paysagiste\/wp-json\/wp\/v2\/media?parent=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}