{"id":31,"date":"2026-09-18T14:17:14","date_gmt":"2026-09-18T12:17:14","guid":{"rendered":"https:\/\/demo.jouglet-web.fr\/paysagiste\/?page_id=31"},"modified":"2026-09-18T15:59:24","modified_gmt":"2026-09-18T13:59:24","slug":"clotures","status":"publish","type":"page","link":"https:\/\/demo.jouglet-web.fr\/paysagiste\/clotures\/","title":{"rendered":"Cl\u00f4tures"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"tjcl-page\">\n\n<style>\n\n\/* ============================================================\n   TERRA JARDIN \u2014 CL\u00d4TURES\n============================================================ *\/\n\n.tjcl-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:#ffffff;\n    --black:#161a17;\n    --text:#6f776f;\n    --border:rgba(24,57,43,.12);\n\n    width:100vw;\n    max-width:none;\n\n    margin-left:calc(50% - 50vw);\n    margin-right:calc(50% - 50vw);\n\n    overflow:hidden;\n\n    background:var(--cream);\n    color:var(--black);\n\n    font-family:inherit;\n    -webkit-font-smoothing:antialiased;\n}\n\n.tjcl-page *,\n.tjcl-page *::before,\n.tjcl-page *::after{\n    box-sizing:border-box;\n}\n\n.tjcl-page img{\n    display:block;\n    width:100%;\n    max-width:100%;\n}\n\n.tjcl-page a{\n    color:inherit;\n    text-decoration:none;\n}\n\n.tjcl-container{\n    width:min(1240px,calc(100% - 48px));\n    margin-inline:auto;\n}\n\n.tjcl-section{\n    position:relative;\n    padding:115px 0;\n}\n\n\n\/* ============================================================\n   TYPO\n============================================================ *\/\n\n.tjcl-kicker{\n    display:inline-flex;\n    align-items:center;\n    gap:12px;\n\n    margin:0 0 18px;\n\n    color:var(--green);\n\n    font-size:11px;\n    line-height:1;\n    font-weight:850;\n    letter-spacing:.15em;\n    text-transform:uppercase;\n}\n\n.tjcl-kicker::before{\n    content:\"\";\n\n    width:34px;\n    height:1px;\n\n    background:var(--gold);\n}\n\n.tjcl-title{\n    margin:0;\n\n    color:var(--deep);\n\n    font-size:clamp(42px,5.1vw,70px);\n    line-height:.98;\n    font-weight:780;\n    letter-spacing:-.05em;\n}\n\n.tjcl-title span{\n    color:var(--gold);\n}\n\n.tjcl-text{\n    max-width:660px;\n\n    margin:22px 0 0;\n\n    color:var(--text);\n\n    font-size:16px;\n    line-height:1.75;\n}\n\n.tjcl-heading{\n    max-width:790px;\n    margin-bottom:54px;\n}\n\n.tjcl-heading-center{\n    margin-left:auto;\n    margin-right:auto;\n\n    text-align:center;\n}\n\n.tjcl-heading-center .tjcl-kicker{\n    justify-content:center;\n}\n\n.tjcl-heading-center .tjcl-text{\n    margin-left:auto;\n    margin-right:auto;\n}\n\n\n\/* ============================================================\n   BUTTONS\n============================================================ *\/\n\n.tjcl-btn{\n    min-height:56px;\n\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:13px;\n    font-weight:800;\n\n    transition:\n        transform .3s ease,\n        background .3s ease,\n        color .3s ease,\n        border-color .3s ease,\n        box-shadow .3s ease;\n}\n\n.tjcl-btn:hover{\n    transform:translateY(-3px);\n}\n\n.tjcl-btn-gold{\n    background:var(--gold);\n    color:var(--deep);\n\n    box-shadow:\n        0 14px 35px rgba(213,185,133,.2);\n}\n\n.tjcl-btn-gold:hover{\n    background:var(--gold-light);\n}\n\n.tjcl-btn-light{\n    border-color:rgba(255,255,255,.24);\n\n    background:rgba(255,255,255,.07);\n\n    color:#fff;\n\n    backdrop-filter:blur(12px);\n}\n\n.tjcl-btn-light:hover{\n    background:#fff;\n    color:var(--deep);\n}\n\n.tjcl-arrow{\n    transition:transform .3s ease;\n}\n\n.tjcl-btn:hover .tjcl-arrow{\n    transform:translateX(5px);\n}\n\n\n\/* ============================================================\n   HERO\n============================================================ *\/\n\n.tjcl-hero{\n    position:relative;\n\n    min-height:800px;\n\n    display:flex;\n    align-items:center;\n\n    overflow:hidden;\n    isolation:isolate;\n\n    background:var(--deep);\n    color:#fff;\n}\n\n.tjcl-hero-bg{\n    position:absolute;\n    inset:0;\n    z-index:-4;\n\n    background:\n        linear-gradient(\n            135deg,\n            #163829,\n            #0d241b\n        );\n}\n\n.tjcl-hero-bg img{\n    width:100%;\n    height:100%;\n\n    object-fit:cover;\n}\n\n.tjcl-hero-overlay{\n    position:absolute;\n    inset:0;\n    z-index:-3;\n\n    background:\n        linear-gradient(\n            90deg,\n            rgba(6,22,15,.97) 0%,\n            rgba(6,22,15,.86) 43%,\n            rgba(6,22,15,.52) 73%,\n            rgba(6,22,15,.28) 100%\n        ),\n        linear-gradient(\n            0deg,\n            rgba(6,22,15,.52),\n            transparent 55%\n        );\n}\n\n.tjcl-hero::after{\n    content:\"\";\n\n    position:absolute;\n    z-index:-2;\n\n    width:650px;\n    height:650px;\n\n    left:-350px;\n    bottom:-370px;\n\n    border-radius:50%;\n\n    background:rgba(213,185,133,.13);\n\n    filter:blur(80px);\n}\n\n.tjcl-hero-inner{\n    width:min(1240px,calc(100% - 48px));\n    margin:auto;\n\n    padding:115px 0 85px;\n\n    display:grid;\n    grid-template-columns:1.15fr .65fr;\n    gap:70px;\n\n    align-items:center;\n}\n\n.tjcl-hero-content{\n    max-width:800px;\n}\n\n.tjcl-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,.18);\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,.9);\n\n    font-size:10px;\n    font-weight:850;\n    letter-spacing:.14em;\n    text-transform:uppercase;\n}\n\n.tjcl-hero-badge-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.tjcl-hero h1{\n    margin:0;\n\n    color:#fff;\n\n    font-size:clamp(52px,6vw,88px);\n    line-height:.92;\n    font-weight:780;\n    letter-spacing:-.057em;\n}\n\n.tjcl-hero h1 span{\n    display:block;\n\n    color:var(--gold);\n}\n\n.tjcl-hero-desc{\n    max-width:650px;\n\n    margin:28px 0 0;\n\n    color:rgba(255,255,255,.74);\n\n    font-size:18px;\n    line-height:1.65;\n}\n\n.tjcl-hero-points{\n    display:flex;\n    flex-wrap:wrap;\n    gap:12px 22px;\n\n    margin-top:28px;\n}\n\n.tjcl-hero-point{\n    display:flex;\n    align-items:center;\n    gap:9px;\n\n    color:rgba(255,255,255,.9);\n\n    font-size:12px;\n    font-weight:700;\n}\n\n.tjcl-check{\n    width:20px;\n    height:20px;\n\n    display:grid;\n    place-items:center;\n\n    flex:0 0 auto;\n\n    border-radius:50%;\n\n    background:var(--gold);\n    color:var(--deep);\n\n    font-size:10px;\n    font-weight:900;\n}\n\n.tjcl-hero-actions{\n    display:flex;\n    flex-wrap:wrap;\n    gap:12px;\n\n    margin-top:34px;\n}\n\n\n\/* HERO SIDE *\/\n\n.tjcl-hero-side{\n    position:relative;\n\n    min-height:500px;\n}\n\n.tjcl-hero-main{\n    position:absolute;\n\n    inset:30px 10px 40px 45px;\n\n    overflow:hidden;\n\n    border:1px solid rgba(255,255,255,.15);\n    border-radius:30px;\n\n    background:\n        linear-gradient(\n            135deg,\n            #456954,\n            #193c2c\n        );\n\n    box-shadow:\n        0 35px 90px rgba(0,0,0,.34);\n}\n\n.tjcl-hero-main img{\n    width:100%;\n    height:100%;\n\n    object-fit:cover;\n}\n\n.tjcl-hero-main::after{\n    content:\"\";\n\n    position:absolute;\n    inset:0;\n\n    background:\n        linear-gradient(\n            0deg,\n            rgba(6,22,15,.52),\n            transparent 55%\n        );\n}\n\n.tjcl-floating{\n    position:absolute;\n    z-index:3;\n\n    min-width:185px;\n\n    padding:16px 17px;\n\n    border:1px solid rgba(255,255,255,.17);\n    border-radius:18px;\n\n    background:rgba(7,26,18,.84);\n\n    backdrop-filter:blur(15px);\n\n    box-shadow:\n        0 20px 45px rgba(0,0,0,.2);\n}\n\n.tjcl-floating strong{\n    display:block;\n\n    color:#fff;\n\n    font-size:13px;\n}\n\n.tjcl-floating small{\n    display:block;\n\n    margin-top:4px;\n\n    color:rgba(255,255,255,.60);\n\n    font-size:9px;\n    line-height:1.45;\n}\n\n.tjcl-floating-top{\n    top:0;\n    right:0;\n}\n\n.tjcl-floating-bottom{\n    left:0;\n    bottom:5px;\n}\n\n\n\/* ============================================================\n   BENEFITS\n============================================================ *\/\n\n.tjcl-benefits{\n    position:relative;\n\n    padding:70px 0;\n\n    overflow:hidden;\n\n    background:var(--deep);\n}\n\n.tjcl-benefits::before{\n    content:\"\";\n\n    position:absolute;\n    inset:0;\n\n    opacity:.07;\n\n    background-image:\n        radial-gradient(\n            circle at 1px 1px,\n            #fff 1px,\n            transparent 0\n        );\n\n    background-size:24px 24px;\n}\n\n.tjcl-benefits-grid{\n    position:relative;\n\n    display:grid;\n    grid-template-columns:repeat(4,1fr);\n}\n\n.tjcl-benefit{\n    padding:15px 30px;\n\n    text-align:center;\n\n    border-right:1px solid rgba(255,255,255,.12);\n}\n\n.tjcl-benefit:last-child{\n    border-right:0;\n}\n\n.tjcl-benefit-icon{\n    width:45px;\n    height:45px;\n\n    margin:0 auto 16px;\n\n    display:grid;\n    place-items:center;\n\n    border-radius:14px;\n\n    background:rgba(213,185,133,.16);\n    color:var(--gold);\n}\n\n.tjcl-benefit-icon svg{\n    width:21px;\n    height:21px;\n}\n\n.tjcl-benefit strong{\n    display:block;\n\n    color:#fff;\n\n    font-size:14px;\n}\n\n.tjcl-benefit span{\n    display:block;\n\n    margin-top:6px;\n\n    color:rgba(255,255,255,.58);\n\n    font-size:10px;\n    line-height:1.5;\n}\n\n\n\/* ============================================================\n   INTRO\n============================================================ *\/\n\n.tjcl-intro{\n    background:#fff;\n}\n\n.tjcl-intro-grid{\n    display:grid;\n    grid-template-columns:.9fr 1.1fr;\n    gap:80px;\n\n    align-items:center;\n}\n\n.tjcl-intro-visual{\n    position:relative;\n}\n\n.tjcl-intro-image{\n    overflow:hidden;\n\n    aspect-ratio:4\/5;\n\n    border-radius:30px;\n\n    background:\n        linear-gradient(\n            135deg,\n            #dce4dc,\n            #aabfae\n        );\n\n    box-shadow:\n        0 25px 65px rgba(16,41,31,.11);\n}\n\n.tjcl-intro-image img{\n    width:100%;\n    height:100%;\n\n    object-fit:cover;\n}\n\n.tjcl-intro-badge{\n    position:absolute;\n\n    right:-28px;\n    bottom:40px;\n\n    width:195px;\n\n    padding:20px;\n\n    border-radius:18px;\n\n    background:var(--gold);\n    color:var(--deep);\n\n    box-shadow:\n        0 18px 45px rgba(16,41,31,.17);\n}\n\n.tjcl-intro-badge small{\n    display:block;\n\n    font-size:9px;\n    font-weight:850;\n    letter-spacing:.12em;\n    text-transform:uppercase;\n}\n\n.tjcl-intro-badge strong{\n    display:block;\n\n    margin-top:7px;\n\n    font-size:19px;\n    line-height:1.15;\n}\n\n.tjcl-intro-cards{\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    gap:13px;\n\n    margin-top:35px;\n}\n\n.tjcl-intro-card{\n    padding:22px;\n\n    border:1px solid var(--border);\n    border-radius:19px;\n\n    background:var(--cream);\n}\n\n.tjcl-intro-card span{\n    display:block;\n\n    margin-bottom:14px;\n\n    color:var(--gold);\n\n    font-size:10px;\n    font-weight:900;\n}\n\n.tjcl-intro-card strong{\n    display:block;\n\n    color:var(--deep);\n\n    font-size:16px;\n}\n\n.tjcl-intro-card p{\n    margin:7px 0 0;\n\n    color:var(--text);\n\n    font-size:11px;\n    line-height:1.6;\n}\n\n\n\/* ============================================================\n   PRESTATIONS\n============================================================ *\/\n\n.tjcl-included{\n    position:relative;\n\n    overflow:hidden;\n\n    background:var(--cream);\n}\n\n.tjcl-included::before{\n    content:\"\";\n\n    position:absolute;\n\n    width:650px;\n    height:650px;\n\n    right:-390px;\n    top:-380px;\n\n    border-radius:50%;\n\n    background:\n        radial-gradient(\n            circle,\n            rgba(213,185,133,.14),\n            transparent 68%\n        );\n}\n\n.tjcl-included::after{\n    content:\"\";\n\n    position:absolute;\n\n    width:430px;\n    height:430px;\n\n    left:-300px;\n    bottom:-270px;\n\n    border:1px solid rgba(24,57,43,.06);\n    border-radius:50%;\n}\n\n.tjcl-included-head{\n    position:relative;\n    z-index:2;\n\n    max-width:850px;\n\n    margin:0 auto 55px;\n\n    text-align:center;\n}\n\n.tjcl-included-head .tjcl-kicker{\n    justify-content:center;\n}\n\n.tjcl-included-head .tjcl-text{\n    margin-left:auto;\n    margin-right:auto;\n}\n\n.tjcl-included-grid{\n    position:relative;\n    z-index:2;\n\n    display:grid;\n    grid-template-columns:repeat(3,1fr);\n    gap:17px;\n}\n\n.tjcl-included-card{\n    position:relative;\n\n    min-height:285px;\n\n    overflow:hidden;\n\n    padding:28px;\n\n    border:1px solid rgba(24,57,43,.11);\n    border-radius:24px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255,255,255,.98),\n            rgba(255,255,255,.88)\n        );\n\n    box-shadow:\n        0 8px 30px rgba(16,41,31,.035);\n\n    transition:\n        transform .45s cubic-bezier(.2,.7,.2,1),\n        border-color .4s ease,\n        box-shadow .45s ease;\n}\n\n.tjcl-included-card::before{\n    content:\"\";\n\n    position:absolute;\n\n    top:0;\n    left:0;\n    right:0;\n\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 .45s ease;\n}\n\n.tjcl-included-card::after{\n    content:\"\";\n\n    position:absolute;\n\n    width:180px;\n    height:180px;\n\n    right:-95px;\n    bottom:-100px;\n\n    border-radius:50%;\n\n    background:\n        radial-gradient(\n            circle,\n            rgba(213,185,133,.13),\n            transparent 70%\n        );\n\n    pointer-events:none;\n}\n\n.tjcl-included-card:hover{\n    transform:translateY(-8px);\n\n    border-color:rgba(213,185,133,.65);\n\n    background:#fff;\n\n    box-shadow:\n        0 28px 65px rgba(16,41,31,.09);\n}\n\n.tjcl-included-card:hover::before{\n    transform:scaleX(1);\n}\n\n.tjcl-included-top{\n    display:flex;\n    align-items:center;\n    justify-content:space-between;\n\n    margin-bottom:30px;\n}\n\n.tjcl-included-icon{\n    width:54px;\n    height:54px;\n\n    display:grid;\n    place-items:center;\n\n    border-radius:16px;\n\n    background:\n        linear-gradient(\n            145deg,\n            #f1e7d2,\n            #f8f2e7\n        );\n\n    color:var(--deep);\n\n    box-shadow:\n        inset 0 0 0 1px rgba(213,185,133,.18);\n\n    transition:\n        transform .35s ease,\n        background .35s ease;\n}\n\n.tjcl-included-card:hover\n.tjcl-included-icon{\n    transform:\n        translateY(-3px)\n        rotate(-2deg);\n\n    background:var(--gold);\n}\n\n.tjcl-included-icon svg{\n    width:23px;\n    height:23px;\n}\n\n.tjcl-included-number{\n    min-width:38px;\n    height:38px;\n\n    display:grid;\n    place-items:center;\n\n    border:1px solid rgba(24,57,43,.08);\n    border-radius:50%;\n\n    background:var(--cream);\n\n    color:rgba(16,41,31,.40);\n\n    font-size:9px;\n    font-weight:900;\n\n    transition:\n        background .35s ease,\n        color .35s ease;\n}\n\n.tjcl-included-card:hover\n.tjcl-included-number{\n    background:var(--deep);\n    color:var(--gold);\n}\n\n.tjcl-included-card h3{\n    margin:0 0 11px;\n\n    color:var(--deep);\n\n    font-size:21px;\n    line-height:1.15;\n    letter-spacing:-.02em;\n}\n\n.tjcl-included-card p{\n    margin:0;\n\n    color:var(--text);\n\n    font-size:12px;\n    line-height:1.7;\n}\n\n.tjcl-included-meta{\n    margin-top:23px;\n\n    display:flex;\n    align-items:center;\n    gap:7px;\n\n    color:var(--green);\n\n    font-size:9px;\n    font-weight:850;\n    letter-spacing:.06em;\n    text-transform:uppercase;\n}\n\n.tjcl-included-meta::before{\n    content:\"\";\n\n    width:18px;\n    height:1px;\n\n    background:var(--gold);\n}\n\n\n\/* ============================================================\n   TYPES DE CL\u00d4TURES\n============================================================ *\/\n\n.tjcl-types{\n    background:#fff;\n}\n\n.tjcl-types-grid{\n    display:grid;\n    grid-template-columns:repeat(3,1fr);\n    gap:16px;\n}\n\n.tjcl-type{\n    position:relative;\n\n    min-height:430px;\n\n    overflow:hidden;\n\n    border-radius:24px;\n\n    background:\n        linear-gradient(\n            135deg,\n            #284f3a,\n            #10291f\n        );\n\n    isolation:isolate;\n}\n\n.tjcl-type-media{\n    position:absolute;\n    inset:0;\n    z-index:-2;\n}\n\n.tjcl-type-media img{\n    width:100%;\n    height:100%;\n\n    object-fit:cover;\n\n    transition:\n        transform .75s cubic-bezier(.2,.7,.2,1);\n}\n\n.tjcl-type:hover img{\n    transform:scale(1.055);\n}\n\n.tjcl-type::after{\n    content:\"\";\n\n    position:absolute;\n    inset:0;\n    z-index:-1;\n\n    background:\n        linear-gradient(\n            0deg,\n            rgba(6,22,15,.96) 0%,\n            rgba(6,22,15,.57) 48%,\n            rgba(6,22,15,.15) 82%\n        );\n}\n\n.tjcl-type-content{\n    position:absolute;\n\n    left:25px;\n    right:25px;\n    bottom:24px;\n}\n\n.tjcl-type-content span{\n    display:block;\n\n    margin-bottom:7px;\n\n    color:var(--gold);\n\n    font-size:9px;\n    font-weight:850;\n    letter-spacing:.11em;\n    text-transform:uppercase;\n}\n\n.tjcl-type-content h3{\n    margin:0 0 10px;\n\n    color:#fff;\n\n    font-size:24px;\n    line-height:1.1;\n}\n\n.tjcl-type-content p{\n    margin:0;\n\n    color:rgba(255,255,255,.68);\n\n    font-size:11px;\n    line-height:1.6;\n}\n\n\n\/* ============================================================\n   FEATURE\n============================================================ *\/\n\n.tjcl-feature{\n    background:var(--cream);\n}\n\n.tjcl-feature-box{\n    position:relative;\n\n    min-height:620px;\n\n    overflow:hidden;\n\n    border-radius:32px;\n\n    background:\n        linear-gradient(\n            135deg,\n            #18392b,\n            #0c2118\n        );\n}\n\n.tjcl-feature-box > img{\n    position:absolute;\n    inset:0;\n\n    width:100%;\n    height:100%;\n\n    object-fit:cover;\n}\n\n.tjcl-feature-box::after{\n    content:\"\";\n\n    position:absolute;\n    inset:0;\n\n    background:\n        linear-gradient(\n            90deg,\n            rgba(6,22,15,.94),\n            rgba(6,22,15,.55) 62%,\n            rgba(6,22,15,.22)\n        );\n}\n\n.tjcl-feature-content{\n    position:relative;\n    z-index:2;\n\n    max-width:680px;\n    min-height:620px;\n\n    padding:70px;\n\n    display:flex;\n    flex-direction:column;\n    justify-content:center;\n\n    color:#fff;\n}\n\n.tjcl-feature-tag{\n    width:max-content;\n\n    margin-bottom:22px;\n    padding:8px 12px;\n\n    border:1px solid rgba(255,255,255,.2);\n    border-radius:999px;\n\n    background:rgba(255,255,255,.08);\n\n    font-size:9px;\n    font-weight:850;\n    letter-spacing:.12em;\n    text-transform:uppercase;\n}\n\n.tjcl-feature h2{\n    margin:0;\n\n    color:#fff;\n\n    font-size:clamp(44px,6vw,75px);\n    line-height:.95;\n    letter-spacing:-.05em;\n}\n\n.tjcl-feature h2 span{\n    color:var(--gold);\n}\n\n.tjcl-feature p{\n    max-width:540px;\n\n    margin:24px 0 0;\n\n    color:rgba(255,255,255,.70);\n\n    font-size:14px;\n    line-height:1.7;\n}\n\n.tjcl-feature-chips{\n    display:flex;\n    flex-wrap:wrap;\n    gap:8px;\n\n    margin-top:28px;\n}\n\n.tjcl-feature-chips span{\n    padding:8px 11px;\n\n    border:1px solid rgba(255,255,255,.11);\n    border-radius:10px;\n\n    background:rgba(255,255,255,.08);\n\n    font-size:10px;\n}\n\n\n\/* ============================================================\n   PROCESS\n============================================================ *\/\n\n.tjcl-process{\n    position:relative;\n\n    background:#fff;\n\n    --tjcl-progress:0;\n}\n\n.tjcl-process-wrap{\n    position:relative;\n\n    margin-top:75px;\n}\n\n.tjcl-process-line{\n    position:absolute;\n\n    top:39px;\n    left:10%;\n    right:10%;\n\n    height:3px;\n\n    overflow:hidden;\n\n    border-radius:100px;\n\n    background:#e0e5e1;\n}\n\n.tjcl-process-progress{\n    position:absolute;\n    inset:0;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--gold),\n            var(--forest)\n        );\n\n    transform:\n        scaleX(var(--tjcl-progress));\n\n    transform-origin:left center;\n}\n\n.tjcl-process-grid{\n    position:relative;\n\n    display:grid;\n    grid-template-columns:repeat(5,1fr);\n    gap:20px;\n}\n\n.tjcl-process-step{\n    position:relative;\n\n    text-align:center;\n}\n\n.tjcl-process-number{\n    position:relative;\n    z-index:2;\n\n    width:80px;\n    height:80px;\n\n    margin:0 auto 25px;\n\n    display:grid;\n    place-items:center;\n\n    border:9px solid #fff;\n    border-radius:50%;\n\n    background:#e4e8e4;\n    color:#839087;\n\n    font-size:11px;\n    font-weight:900;\n\n    transition:\n        transform .4s ease,\n        background .4s ease,\n        color .4s ease;\n}\n\n.tjcl-process-step.tjcl-active\n.tjcl-process-number{\n    transform:scale(1.08);\n\n    background:var(--deep);\n    color:var(--gold);\n}\n\n.tjcl-process-step h3{\n    margin:0 0 9px;\n\n    color:var(--deep);\n\n    font-size:17px;\n}\n\n.tjcl-process-step p{\n    max-width:205px;\n\n    margin:0 auto;\n\n    color:var(--text);\n\n    font-size:11px;\n    line-height:1.65;\n}\n\n\n\/* ============================================================\n   RELATED\n============================================================ *\/\n\n.tjcl-related{\n    background:var(--cream);\n}\n\n.tjcl-related-grid{\n    display:grid;\n    grid-template-columns:repeat(3,1fr);\n    gap:16px;\n}\n\n.tjcl-related-card{\n    position:relative;\n\n    min-height:330px;\n\n    overflow:hidden;\n\n    border-radius:23px;\n\n    background:\n        linear-gradient(\n            135deg,\n            #315b45,\n            #10291f\n        );\n\n    isolation:isolate;\n}\n\n.tjcl-related-card img{\n    position:absolute;\n    inset:0;\n    z-index:-2;\n\n    width:100%;\n    height:100%;\n\n    object-fit:cover;\n\n    transition:\n        transform .7s cubic-bezier(.2,.7,.2,1);\n}\n\n.tjcl-related-card:hover img{\n    transform:scale(1.055);\n}\n\n.tjcl-related-card::after{\n    content:\"\";\n\n    position:absolute;\n    inset:0;\n    z-index:-1;\n\n    background:\n        linear-gradient(\n            0deg,\n            rgba(6,22,15,.95),\n            rgba(6,22,15,.17)\n        );\n}\n\n.tjcl-related-content{\n    position:absolute;\n\n    left:24px;\n    right:24px;\n    bottom:22px;\n}\n\n.tjcl-related-content span{\n    display:block;\n\n    margin-bottom:6px;\n\n    color:var(--gold);\n\n    font-size:8px;\n    font-weight:850;\n    letter-spacing:.1em;\n    text-transform:uppercase;\n}\n\n.tjcl-related-content strong{\n    display:block;\n\n    color:#fff;\n\n    font-size:21px;\n}\n\n.tjcl-related-content small{\n    display:block;\n\n    margin-top:7px;\n\n    color:rgba(255,255,255,.63);\n\n    font-size:10px;\n}\n\n\n\/* ============================================================\n   FAQ\n============================================================ *\/\n\n.tjcl-faq{\n    background:#fff;\n}\n\n.tjcl-faq-grid{\n    display:grid;\n    grid-template-columns:.72fr 1.28fr;\n    gap:70px;\n\n    align-items:start;\n}\n\n.tjcl-faq-intro{\n    position:sticky;\n    top:120px;\n}\n\n.tjcl-faq-list{\n    display:grid;\n    gap:10px;\n}\n\n.tjcl-faq-item{\n    overflow:hidden;\n\n    border:1px solid var(--border);\n    border-radius:18px;\n\n    background:var(--cream);\n}\n\n.tjcl-faq-item summary{\n    position:relative;\n\n    padding:21px 58px 21px 22px;\n\n    cursor:pointer;\n    list-style:none;\n\n    color:var(--deep);\n\n    font-size:14px;\n    font-weight:800;\n}\n\n.tjcl-faq-item summary::-webkit-details-marker{\n    display:none;\n}\n\n.tjcl-faq-item summary::after{\n    content:\"+\";\n\n    position:absolute;\n\n    right:20px;\n    top:50%;\n\n    width:28px;\n    height:28px;\n\n    display:grid;\n    place-items:center;\n\n    transform:translateY(-50%);\n\n    border-radius:50%;\n\n    background:rgba(213,185,133,.22);\n\n    color:var(--deep);\n\n    font-size:17px;\n}\n\n.tjcl-faq-item[open] summary::after{\n    content:\"\u2212\";\n}\n\n.tjcl-faq-answer{\n    padding:0 22px 21px;\n\n    color:var(--text);\n\n    font-size:12px;\n    line-height:1.7;\n}\n\n\n\/* ============================================================\n   FINAL CTA\n============================================================ *\/\n\n.tjcl-final{\n    padding:105px 0;\n\n    background:var(--cream);\n}\n\n.tjcl-final-box{\n    position:relative;\n\n    overflow:hidden;\n\n    padding:88px 60px;\n\n    border-radius:32px;\n\n    background:var(--deep);\n    color:#fff;\n\n    text-align:center;\n}\n\n.tjcl-final-box::before{\n    content:\"\";\n\n    position:absolute;\n\n    width:500px;\n    height:500px;\n\n    right:-260px;\n    top:-280px;\n\n    border:1px solid rgba(213,185,133,.16);\n    border-radius:50%;\n}\n\n.tjcl-final-box::after{\n    content:\"\";\n\n    position:absolute;\n\n    width:370px;\n    height:370px;\n\n    left:-220px;\n    bottom:-230px;\n\n    border-radius:50%;\n\n    background:rgba(213,185,133,.07);\n}\n\n.tjcl-final-content{\n    position:relative;\n    z-index:2;\n\n    max-width:840px;\n\n    margin:auto;\n}\n\n.tjcl-final .tjcl-kicker{\n    color:var(--gold);\n}\n\n.tjcl-final h2{\n    margin:0;\n\n    color:#fff;\n\n    font-size:clamp(46px,6vw,79px);\n    line-height:.95;\n    letter-spacing:-.052em;\n}\n\n.tjcl-final h2 span{\n    color:var(--gold);\n}\n\n.tjcl-final p{\n    max-width:670px;\n\n    margin:24px auto 0;\n\n    color:rgba(255,255,255,.70);\n\n    font-size:15px;\n    line-height:1.75;\n}\n\n.tjcl-final-actions{\n    display:flex;\n    flex-wrap:wrap;\n    justify-content:center;\n    gap:12px;\n\n    margin-top:32px;\n}\n\n.tjcl-final-points{\n    display:flex;\n    flex-wrap:wrap;\n    justify-content:center;\n    gap:13px 24px;\n\n    margin-top:34px;\n}\n\n.tjcl-final-point{\n    display:flex;\n    align-items:center;\n    gap:8px;\n\n    color:rgba(255,255,255,.70);\n\n    font-size:10px;\n}\n\n\n\/* ============================================================\n   SAFE REVEAL\n============================================================ *\/\n\n.tjcl-reveal{\n    opacity:1;\n    transform:none;\n}\n\n.tjcl-page.tjcl-motion-ready\n.tjcl-reveal:not(.tjcl-visible){\n    opacity:0;\n    transform:translateY(42px);\n}\n\n.tjcl-page.tjcl-motion-ready\n.tjcl-reveal.tjcl-visible{\n    opacity:1;\n    transform:translateY(0);\n\n    transition:\n        opacity .75s cubic-bezier(.2,.7,.2,1),\n        transform .75s cubic-bezier(.2,.7,.2,1);\n}\n\n.tjcl-page.tjcl-motion-ready\n.tjcl-included-card:nth-child(2),\n.tjcl-page.tjcl-motion-ready\n.tjcl-type:nth-child(2),\n.tjcl-page.tjcl-motion-ready\n.tjcl-related-card:nth-child(2){\n    transition-delay:.08s;\n}\n\n.tjcl-page.tjcl-motion-ready\n.tjcl-included-card:nth-child(3),\n.tjcl-page.tjcl-motion-ready\n.tjcl-type:nth-child(3),\n.tjcl-page.tjcl-motion-ready\n.tjcl-related-card:nth-child(3){\n    transition-delay:.16s;\n}\n\n.tjcl-page.tjcl-motion-ready\n.tjcl-included-card:nth-child(5){\n    transition-delay:.08s;\n}\n\n.tjcl-page.tjcl-motion-ready\n.tjcl-included-card:nth-child(6){\n    transition-delay:.16s;\n}\n\n\n\/* ============================================================\n   TABLET\n============================================================ *\/\n\n@media(max-width:1050px){\n\n    .tjcl-hero-inner{\n        grid-template-columns:1fr;\n    }\n\n    .tjcl-hero-side{\n        display:none;\n    }\n\n    .tjcl-intro-grid,\n    .tjcl-faq-grid{\n        grid-template-columns:1fr;\n    }\n\n    .tjcl-intro-image{\n        aspect-ratio:16\/10;\n    }\n\n    .tjcl-included-grid,\n    .tjcl-types-grid,\n    .tjcl-related-grid{\n        grid-template-columns:repeat(2,1fr);\n    }\n\n    .tjcl-faq-intro{\n        position:static;\n    }\n\n}\n\n\n\/* ============================================================\n   MOBILE\n============================================================ *\/\n\n@media(max-width:700px){\n\n    .tjcl-container{\n        width:calc(100% - 28px);\n    }\n\n    .tjcl-section{\n        padding:70px 0;\n    }\n\n    .tjcl-kicker{\n        margin-bottom:13px;\n\n        font-size:8px;\n    }\n\n    .tjcl-kicker::before{\n        width:25px;\n    }\n\n    .tjcl-title{\n        font-size:37px;\n        line-height:1;\n        letter-spacing:-.04em;\n    }\n\n    .tjcl-text{\n        margin-top:16px;\n\n        font-size:13px;\n        line-height:1.68;\n    }\n\n\n    \/* HERO *\/\n\n    .tjcl-hero{\n        min-height:700px;\n\n        align-items:flex-end;\n    }\n\n    .tjcl-hero-overlay{\n        background:\n            linear-gradient(\n                0deg,\n                rgba(6,22,15,.98) 0%,\n                rgba(6,22,15,.90) 56%,\n                rgba(6,22,15,.31) 100%\n            );\n    }\n\n    .tjcl-hero-inner{\n        width:calc(100% - 28px);\n\n        padding:135px 0 45px;\n\n        display:block;\n    }\n\n    .tjcl-hero-badge{\n        margin-bottom:16px;\n        padding:7px 10px;\n\n        font-size:8px;\n    }\n\n    .tjcl-hero h1{\n        font-size:clamp(40px,11.7vw,53px);\n        line-height:.95;\n    }\n\n    .tjcl-hero-desc{\n        margin-top:18px;\n\n        font-size:14px;\n        line-height:1.55;\n    }\n\n    .tjcl-hero-points{\n        display:grid;\n        gap:8px;\n\n        margin-top:19px;\n    }\n\n    .tjcl-hero-point{\n        font-size:10px;\n    }\n\n    .tjcl-hero-actions{\n        display:grid;\n        grid-template-columns:1fr;\n\n        margin-top:24px;\n    }\n\n    .tjcl-btn{\n        width:100%;\n        min-height:50px;\n\n        font-size:12px;\n    }\n\n\n    \/* BENEFITS *\/\n\n    .tjcl-benefits{\n        padding:48px 0;\n    }\n\n    .tjcl-benefits-grid{\n        grid-template-columns:1fr 1fr;\n        gap:26px 0;\n    }\n\n    .tjcl-benefit{\n        padding:8px;\n    }\n\n    .tjcl-benefit:nth-child(2){\n        border-right:0;\n    }\n\n    .tjcl-benefit strong{\n        font-size:12px;\n    }\n\n    .tjcl-benefit span{\n        font-size:8px;\n    }\n\n\n    \/* INTRO *\/\n\n    .tjcl-intro-grid{\n        gap:40px;\n    }\n\n    .tjcl-intro-image{\n        aspect-ratio:4\/5;\n\n        border-radius:21px;\n    }\n\n    .tjcl-intro-badge{\n        right:10px;\n        bottom:10px;\n\n        width:155px;\n\n        padding:15px;\n    }\n\n    .tjcl-intro-badge strong{\n        font-size:15px;\n    }\n\n    .tjcl-intro-cards{\n        grid-template-columns:1fr;\n        gap:9px;\n\n        margin-top:25px;\n    }\n\n\n    \/* INCLUDED *\/\n\n    .tjcl-included-head{\n        margin-bottom:32px;\n    }\n\n    .tjcl-included-grid{\n        grid-template-columns:1fr;\n        gap:11px;\n    }\n\n    .tjcl-included-card{\n        min-height:auto;\n\n        padding:20px;\n\n        border-radius:19px;\n    }\n\n    .tjcl-included-top{\n        margin-bottom:18px;\n    }\n\n    .tjcl-included-icon{\n        width:47px;\n        height:47px;\n    }\n\n    .tjcl-included-card h3{\n        font-size:18px;\n    }\n\n    .tjcl-included-card p{\n        font-size:11px;\n    }\n\n\n    \/* TYPES *\/\n\n    .tjcl-types-grid{\n        grid-template-columns:1fr;\n        gap:11px;\n    }\n\n    .tjcl-type{\n        min-height:370px;\n\n        border-radius:19px;\n    }\n\n\n    \/* FEATURE *\/\n\n    .tjcl-feature-box{\n        min-height:540px;\n\n        border-radius:21px;\n    }\n\n    .tjcl-feature-box::after{\n        background:\n            linear-gradient(\n                0deg,\n                rgba(6,22,15,.97),\n                rgba(6,22,15,.35)\n            );\n    }\n\n    .tjcl-feature-content{\n        min-height:540px;\n\n        padding:30px 22px;\n\n        justify-content:flex-end;\n    }\n\n    .tjcl-feature h2{\n        font-size:40px;\n    }\n\n    .tjcl-feature p{\n        font-size:12px;\n    }\n\n\n    \/* PROCESS *\/\n\n    .tjcl-process-wrap{\n        margin-top:45px;\n    }\n\n    .tjcl-process-line{\n        top:39px;\n        bottom:40px;\n\n        left:39px;\n        right:auto;\n\n        width:3px;\n        height:auto;\n    }\n\n    .tjcl-process-progress{\n        transform:\n            scaleY(var(--tjcl-progress));\n\n        transform-origin:center top;\n    }\n\n    .tjcl-process-grid{\n        grid-template-columns:1fr;\n        gap:0;\n    }\n\n    .tjcl-process-step{\n        min-height:160px;\n\n        padding:\n            0\n            0\n            32px\n            98px;\n\n        text-align:left;\n    }\n\n    .tjcl-process-number{\n        position:absolute;\n\n        left:0;\n        top:0;\n\n        width:78px;\n        height:78px;\n\n        margin:0;\n    }\n\n    .tjcl-process-step p{\n        max-width:none;\n\n        margin:0;\n    }\n\n\n    \/* RELATED *\/\n\n    .tjcl-related-grid{\n        grid-template-columns:1fr;\n        gap:11px;\n    }\n\n    .tjcl-related-card{\n        min-height:270px;\n\n        border-radius:18px;\n    }\n\n\n    \/* FAQ *\/\n\n    .tjcl-faq-grid{\n        gap:35px;\n    }\n\n    .tjcl-faq-item summary{\n        padding:18px 54px 18px 18px;\n\n        font-size:12px;\n    }\n\n    .tjcl-faq-answer{\n        padding:0 18px 18px;\n\n        font-size:11px;\n    }\n\n\n    \/* FINAL *\/\n\n    .tjcl-final{\n        padding:65px 0;\n    }\n\n    .tjcl-final-box{\n        padding:55px 20px;\n\n        border-radius:22px;\n    }\n\n    .tjcl-final h2{\n        font-size:40px;\n        line-height:.98;\n    }\n\n    .tjcl-final p{\n        margin-top:18px;\n\n        font-size:12px;\n    }\n\n    .tjcl-final-actions{\n        display:grid;\n        grid-template-columns:1fr;\n    }\n\n    .tjcl-final-points{\n        width:max-content;\n        max-width:100%;\n\n        margin:25px auto 0;\n\n        flex-direction:column;\n        align-items:flex-start;\n        gap:8px;\n    }\n\n}\n\n\n\/* ============================================================\n   REDUCED MOTION\n============================================================ *\/\n\n@media(prefers-reduced-motion:reduce){\n\n    .tjcl-page *,\n    .tjcl-page *::before,\n    .tjcl-page *::after{\n        animation:none !important;\n        transition:none !important;\n    }\n\n    .tjcl-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=\"tjcl-hero\">\n\n    <div class=\"tjcl-hero-bg\">\n\n        <img decoding=\"async\"\n            src=\"https:\/\/images.unsplash.com\/photo-1620905969432-e33e332c5f38?auto=format&#038;fit=crop&#038;w=2000&#038;q=85\"\n            alt=\"Cl\u00f4ture ext\u00e9rieure dans un jardin paysager\"\n            fetchpriority=\"high\"\n            onerror=\"this.onerror=null;this.src='https:\/\/images.pexels.com\/photos\/30130899\/pexels-photo-30130899.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=2000';\">\n\n    <\/div>\n\n    <div class=\"tjcl-hero-overlay\"><\/div>\n\n\n    <div class=\"tjcl-hero-inner\">\n\n        <div class=\"tjcl-hero-content\">\n\n            <div class=\"tjcl-hero-badge\">\n\n                <span class=\"tjcl-hero-badge-dot\"><\/span>\n\n                Cl\u00f4tures\n\n            <\/div>\n\n\n            <h1>\n                D\u00e9limitez votre terrain.\n                <span>Pr\u00e9servez votre tranquillit\u00e9.<\/span>\n            <\/h1>\n\n\n            <p class=\"tjcl-hero-desc\">\n                Cl\u00f4ture, brise-vue et d\u00e9limitation :\n                Terra Jardin int\u00e8gre votre cl\u00f4ture\n                dans l&rsquo;am\u00e9nagement global de l&rsquo;ext\u00e9rieur\n                pour obtenir un r\u00e9sultat propre et harmonieux.\n            <\/p>\n\n\n            <div class=\"tjcl-hero-points\">\n\n                <div class=\"tjcl-hero-point\">\n\n                    <span class=\"tjcl-check\">\u2713<\/span>\n\n                    D\u00e9limitation du terrain\n\n                <\/div>\n\n\n                <div class=\"tjcl-hero-point\">\n\n                    <span class=\"tjcl-check\">\u2713<\/span>\n\n                    Int\u00e9gration paysag\u00e8re\n\n                <\/div>\n\n\n                <div class=\"tjcl-hero-point\">\n\n                    <span class=\"tjcl-check\">\u2713<\/span>\n\n                    Devis gratuit\n\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"tjcl-hero-actions\">\n\n                <a\n                    class=\"tjcl-btn tjcl-btn-gold\"\n                    href=\"\/paysagiste\/contact\/\">\n\n                    Demander un devis\n                    <span class=\"tjcl-arrow\">\u2192<\/span>\n\n                <\/a>\n\n\n                <a\n                    class=\"tjcl-btn tjcl-btn-light\"\n                    href=\"#clotures\">\n\n                    D\u00e9couvrir la prestation\n                    <span>\u2193<\/span>\n\n                <\/a>\n\n            <\/div>\n\n        <\/div>\n\n\n        <div class=\"tjcl-hero-side\">\n\n            <div class=\"tjcl-hero-main\">\n\n                <img decoding=\"async\"\n                    src=\"https:\/\/images.unsplash.com\/photo-1620905969432-e33e332c5f38?auto=format&#038;fit=crop&#038;w=1100&#038;q=85\"\n                    alt=\"Cl\u00f4ture de jardin\"\n                    onerror=\"this.onerror=null;this.src='https:\/\/images.pexels.com\/photos\/34360409\/pexels-photo-34360409.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1100';\">\n\n            <\/div>\n\n\n            <div class=\"tjcl-floating tjcl-floating-top\">\n\n                <strong>\n                    D\u00e9limitation nette\n                <\/strong>\n\n                <small>\n                    Structurez clairement\n                    les limites de votre ext\u00e9rieur.\n                <\/small>\n\n            <\/div>\n\n\n            <div class=\"tjcl-floating tjcl-floating-bottom\">\n\n                <strong>\n                    Plus d&rsquo;intimit\u00e9\n                <\/strong>\n\n                <small>\n                    Une solution int\u00e9gr\u00e9e\n                    naturellement au jardin.\n                <\/small>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- ============================================================\n     BENEFITS\n============================================================ -->\n\n<section class=\"tjcl-benefits\">\n\n    <div class=\"tjcl-container\">\n\n        <div class=\"tjcl-benefits-grid\">\n\n\n            <div class=\"tjcl-benefit tjcl-reveal\">\n\n                <div class=\"tjcl-benefit-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 4v16\"\/>\n                        <path d=\"M10 4v16\"\/>\n                        <path d=\"M16 4v16\"\/>\n                        <path d=\"M22 4v16\"\/>\n                        <path d=\"M4 8h18\"\/>\n                        <path d=\"M4 16h18\"\/>\n\n                    <\/svg>\n\n                <\/div>\n\n                <strong>\n                    D\u00e9limitation\n                <\/strong>\n\n                <span>\n                    Des limites clairement\n                    d\u00e9finies autour du terrain.\n                <\/span>\n\n            <\/div>\n\n\n            <div class=\"tjcl-benefit tjcl-reveal\">\n\n                <div class=\"tjcl-benefit-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 12h18\"\/>\n                        <path d=\"M6 7h12\"\/>\n                        <path d=\"M6 17h12\"\/>\n\n                    <\/svg>\n\n                <\/div>\n\n                <strong>\n                    Intimit\u00e9\n                <\/strong>\n\n                <span>\n                    Une s\u00e9paration plus confortable\n                    avec l&rsquo;environnement ext\u00e9rieur.\n                <\/span>\n\n            <\/div>\n\n\n            <div class=\"tjcl-benefit tjcl-reveal\">\n\n                <div class=\"tjcl-benefit-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                <strong>\n                    Int\u00e9gration\n                <\/strong>\n\n                <span>\n                    Une cl\u00f4ture pens\u00e9e\n                    avec le jardin.\n                <\/span>\n\n            <\/div>\n\n\n            <div class=\"tjcl-benefit tjcl-reveal\">\n\n                <div class=\"tjcl-benefit-icon\">\n                    \u2713\n                <\/div>\n\n                <strong>\n                    Finitions\n                <\/strong>\n\n                <span>\n                    Des raccords propres\n                    avec les abords.\n                <\/span>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- ============================================================\n     INTRO\n============================================================ -->\n\n<section\n    class=\"tjcl-section tjcl-intro\"\n    id=\"clotures\">\n\n    <div class=\"tjcl-container\">\n\n        <div class=\"tjcl-intro-grid\">\n\n\n            <div class=\"tjcl-intro-visual tjcl-reveal\">\n\n                <div class=\"tjcl-intro-image\">\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/images.unsplash.com\/photo-1620905969432-e33e332c5f38?auto=format&#038;fit=crop&#038;w=1200&#038;q=85\"\n                        loading=\"lazy\"\n                        alt=\"Cl\u00f4ture int\u00e9gr\u00e9e dans un jardin\"\n                        onerror=\"this.onerror=null;this.src='https:\/\/images.pexels.com\/photos\/30130899\/pexels-photo-30130899.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1200';\">\n\n                <\/div>\n\n\n                <div class=\"tjcl-intro-badge\">\n\n                    <small>\n                        Terra Jardin\n                    <\/small>\n\n                    <strong>\n                        D\u00e9limitez sans d\u00e9naturer votre jardin.\n                    <\/strong>\n\n                <\/div>\n\n            <\/div>\n\n\n            <div>\n\n                <div class=\"tjcl-heading tjcl-reveal\">\n\n                    <span class=\"tjcl-kicker\">\n                        D\u00e9limitation ext\u00e9rieure\n                    <\/span>\n\n                    <h2 class=\"tjcl-title\">\n                        Une cl\u00f4ture utile.\n                        <span>Et parfaitement int\u00e9gr\u00e9e.<\/span>\n                    <\/h2>\n\n                    <p class=\"tjcl-text\">\n                        Une cl\u00f4ture ne sert pas uniquement\n                        \u00e0 marquer les limites d&rsquo;une propri\u00e9t\u00e9.\n                        Elle participe \u00e9galement \u00e0 l&rsquo;esth\u00e9tique\n                        du jardin, \u00e0 l&rsquo;intimit\u00e9 et \u00e0 l&rsquo;organisation\n                        g\u00e9n\u00e9rale de votre ext\u00e9rieur.\n                    <\/p>\n\n                <\/div>\n\n\n                <div class=\"tjcl-intro-cards\">\n\n                    <div class=\"tjcl-intro-card tjcl-reveal\">\n\n                        <span>01<\/span>\n\n                        <strong>\n                            Votre terrain\n                        <\/strong>\n\n                        <p>\n                            Longueur et configuration prises en compte.\n                        <\/p>\n\n                    <\/div>\n\n\n                    <div class=\"tjcl-intro-card tjcl-reveal\">\n\n                        <span>02<\/span>\n\n                        <strong>\n                            Votre besoin\n                        <\/strong>\n\n                        <p>\n                            D\u00e9limiter, pr\u00e9server ou structurer.\n                        <\/p>\n\n                    <\/div>\n\n\n                    <div class=\"tjcl-intro-card tjcl-reveal\">\n\n                        <span>03<\/span>\n\n                        <strong>\n                            Votre style\n                        <\/strong>\n\n                        <p>\n                            Une solution coh\u00e9rente avec l&rsquo;ext\u00e9rieur.\n                        <\/p>\n\n                    <\/div>\n\n\n                    <div class=\"tjcl-intro-card tjcl-reveal\">\n\n                        <span>04<\/span>\n\n                        <strong>\n                            Les abords\n                        <\/strong>\n\n                        <p>\n                            Raccords avec jardin et am\u00e9nagements.\n                        <\/p>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- ============================================================\n     PRESTATIONS\n============================================================ -->\n\n<section class=\"tjcl-section tjcl-included\">\n\n    <div class=\"tjcl-container\">\n\n        <div class=\"tjcl-included-head tjcl-reveal\">\n\n            <span class=\"tjcl-kicker\">\n                Une installation compl\u00e8te\n            <\/span>\n\n            <h2 class=\"tjcl-title\">\n                De la pr\u00e9paration\n                <span>jusqu&rsquo;aux finitions.<\/span>\n            <\/h2>\n\n            <p class=\"tjcl-text\">\n                La cl\u00f4ture est int\u00e9gr\u00e9e\n                \u00e0 votre terrain et \u00e0 l&rsquo;am\u00e9nagement\n                d\u00e9j\u00e0 pr\u00e9sent autour de la propri\u00e9t\u00e9.\n            <\/p>\n\n        <\/div>\n\n\n        <div class=\"tjcl-included-grid\">\n\n\n            <article class=\"tjcl-included-card tjcl-reveal\">\n\n                <div class=\"tjcl-included-top\">\n\n                    <div class=\"tjcl-included-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 5h16\"\/>\n                            <path d=\"M4 12h16\"\/>\n                            <path d=\"M4 19h16\"\/>\n                            <path d=\"M7 3v18\"\/>\n                            <path d=\"M17 3v18\"\/>\n\n                        <\/svg>\n\n                    <\/div>\n\n                    <span class=\"tjcl-included-number\">\n                        01\n                    <\/span>\n\n                <\/div>\n\n                <h3>\n                    D\u00e9finition du trac\u00e9\n                <\/h3>\n\n                <p>\n                    Le positionnement de la cl\u00f4ture\n                    est \u00e9tudi\u00e9 selon la configuration\n                    et les limites du terrain.\n                <\/p>\n\n                <div class=\"tjcl-included-meta\">\n                    Implantation\n                <\/div>\n\n            <\/article>\n\n\n            <article class=\"tjcl-included-card tjcl-reveal\">\n\n                <div class=\"tjcl-included-top\">\n\n                    <div class=\"tjcl-included-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 18h18\"\/>\n                            <path d=\"M6 14h12\"\/>\n                            <path d=\"M9 10h6\"\/>\n\n                        <\/svg>\n\n                    <\/div>\n\n                    <span class=\"tjcl-included-number\">\n                        02\n                    <\/span>\n\n                <\/div>\n\n                <h3>\n                    Pr\u00e9paration des abords\n                <\/h3>\n\n                <p>\n                    La zone est pr\u00e9par\u00e9e\n                    pour permettre une implantation\n                    propre de la nouvelle cl\u00f4ture.\n                <\/p>\n\n                <div class=\"tjcl-included-meta\">\n                    Pr\u00e9paration\n                <\/div>\n\n            <\/article>\n\n\n            <article class=\"tjcl-included-card tjcl-reveal\">\n\n                <div class=\"tjcl-included-top\">\n\n                    <div class=\"tjcl-included-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=\"tjcl-included-number\">\n                        03\n                    <\/span>\n\n                <\/div>\n\n                <h3>\n                    Pose de cl\u00f4ture\n                <\/h3>\n\n                <p>\n                    Mise en place de la cl\u00f4ture\n                    selon le projet\n                    et la configuration des lieux.\n                <\/p>\n\n                <div class=\"tjcl-included-meta\">\n                    Installation\n                <\/div>\n\n            <\/article>\n\n\n            <article class=\"tjcl-included-card tjcl-reveal\">\n\n                <div class=\"tjcl-included-top\">\n\n                    <div class=\"tjcl-included-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 4v16\"\/>\n                            <path d=\"M20 4v16\"\/>\n                            <path d=\"M4 8h16\"\/>\n                            <path d=\"M4 12h16\"\/>\n                            <path d=\"M4 16h16\"\/>\n\n                        <\/svg>\n\n                    <\/div>\n\n                    <span class=\"tjcl-included-number\">\n                        04\n                    <\/span>\n\n                <\/div>\n\n                <h3>\n                    Brise-vue\n                <\/h3>\n\n                <p>\n                    Cr\u00e9ation d&rsquo;une s\u00e9paration\n                    apportant davantage d&rsquo;intimit\u00e9\n                    \u00e0 certaines zones du jardin.\n                <\/p>\n\n                <div class=\"tjcl-included-meta\">\n                    Intimit\u00e9\n                <\/div>\n\n            <\/article>\n\n\n            <article class=\"tjcl-included-card tjcl-reveal\">\n\n                <div class=\"tjcl-included-top\">\n\n                    <div class=\"tjcl-included-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=\"tjcl-included-number\">\n                        05\n                    <\/span>\n\n                <\/div>\n\n                <h3>\n                    Int\u00e9gration v\u00e9g\u00e9tale\n                <\/h3>\n\n                <p>\n                    La cl\u00f4ture peut \u00eatre accompagn\u00e9e\n                    de plantations afin de mieux\n                    l&rsquo;int\u00e9grer dans le jardin.\n                <\/p>\n\n                <div class=\"tjcl-included-meta\">\n                    Paysage\n                <\/div>\n\n            <\/article>\n\n\n            <article class=\"tjcl-included-card tjcl-reveal\">\n\n                <div class=\"tjcl-included-top\">\n\n                    <div class=\"tjcl-included-icon\">\n\n                        <svg viewBox=\"0 0 24 24\"\n                             fill=\"none\"\n                             stroke=\"currentColor\"\n                             stroke-width=\"1.8\">\n\n                            <path d=\"m5 12 4 4L19 6\"\/>\n\n                        <\/svg>\n\n                    <\/div>\n\n                    <span class=\"tjcl-included-number\">\n                        06\n                    <\/span>\n\n                <\/div>\n\n                <h3>\n                    Finitions\n                <\/h3>\n\n                <p>\n                    Les abords et les raccords\n                    sont finalis\u00e9s pour conserver\n                    un ext\u00e9rieur propre et coh\u00e9rent.\n                <\/p>\n\n                <div class=\"tjcl-included-meta\">\n                    R\u00e9sultat final\n                <\/div>\n\n            <\/article>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- ============================================================\n     TYPES\n============================================================ -->\n\n<section class=\"tjcl-section tjcl-types\">\n\n    <div class=\"tjcl-container\">\n\n        <div class=\"tjcl-heading tjcl-reveal\">\n\n            <span class=\"tjcl-kicker\">\n                Selon votre projet\n            <\/span>\n\n            <h2 class=\"tjcl-title\">\n                Une cl\u00f4ture adapt\u00e9e\n                <span>\u00e0 votre ext\u00e9rieur.<\/span>\n            <\/h2>\n\n            <p class=\"tjcl-text\">\n                L&rsquo;objectif peut \u00eatre de d\u00e9limiter,\n                pr\u00e9server l&rsquo;intimit\u00e9\n                ou simplement structurer davantage le jardin.\n            <\/p>\n\n        <\/div>\n\n\n        <div class=\"tjcl-types-grid\">\n\n\n            <article class=\"tjcl-type tjcl-reveal\">\n\n                <div class=\"tjcl-type-media\">\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/images.unsplash.com\/photo-1620905969432-e33e332c5f38?auto=format&#038;fit=crop&#038;w=1100&#038;q=85\"\n                        loading=\"lazy\"\n                        alt=\"Cl\u00f4ture de jardin\"\n                        onerror=\"this.onerror=null;this.src='https:\/\/images.pexels.com\/photos\/30130899\/pexels-photo-30130899.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1100';\">\n\n                <\/div>\n\n                <div class=\"tjcl-type-content\">\n\n                    <span>\n                        Projet 01\n                    <\/span>\n\n                    <h3>\n                        D\u00e9limitation\n                    <\/h3>\n\n                    <p>\n                        Une solution pour marquer\n                        proprement les limites\n                        de votre ext\u00e9rieur.\n                    <\/p>\n\n                <\/div>\n\n            <\/article>\n\n\n            <article class=\"tjcl-type tjcl-reveal\">\n\n                <div class=\"tjcl-type-media\">\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/images.pexels.com\/photos\/30130899\/pexels-photo-30130899.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1100\"\n                        loading=\"lazy\"\n                        alt=\"Jardin v\u00e9g\u00e9talis\u00e9 avec espaces pr\u00e9serv\u00e9s\">\n\n                <\/div>\n\n                <div class=\"tjcl-type-content\">\n\n                    <span>\n                        Projet 02\n                    <\/span>\n\n                    <h3>\n                        Intimit\u00e9\n                    <\/h3>\n\n                    <p>\n                        Cr\u00e9ez une s\u00e9paration\n                        autour d&rsquo;une terrasse\n                        ou d&rsquo;une zone de d\u00e9tente.\n                    <\/p>\n\n                <\/div>\n\n            <\/article>\n\n\n            <article class=\"tjcl-type tjcl-reveal\">\n\n                <div class=\"tjcl-type-media\">\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/images.pexels.com\/photos\/34360409\/pexels-photo-34360409.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1100\"\n                        loading=\"lazy\"\n                        alt=\"Am\u00e9nagement ext\u00e9rieur paysager\">\n\n                <\/div>\n\n                <div class=\"tjcl-type-content\">\n\n                    <span>\n                        Projet 03\n                    <\/span>\n\n                    <h3>\n                        Int\u00e9gration paysag\u00e8re\n                    <\/h3>\n\n                    <p>\n                        Associez cl\u00f4ture,\n                        plantations et am\u00e9nagement\n                        dans un projet coh\u00e9rent.\n                    <\/p>\n\n                <\/div>\n\n            <\/article>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- ============================================================\n     FEATURE\n============================================================ -->\n\n<section class=\"tjcl-section tjcl-feature\">\n\n    <div class=\"tjcl-container\">\n\n        <div class=\"tjcl-feature-box tjcl-reveal\">\n\n            <img decoding=\"async\"\n                src=\"https:\/\/images.unsplash.com\/photo-1620905969432-e33e332c5f38?auto=format&#038;fit=crop&#038;w=1800&#038;q=85\"\n                loading=\"lazy\"\n                alt=\"Cl\u00f4ture int\u00e9gr\u00e9e \u00e0 un jardin\"\n                onerror=\"this.onerror=null;this.src='https:\/\/images.pexels.com\/photos\/34360409\/pexels-photo-34360409.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1800';\">\n\n\n            <div class=\"tjcl-feature-content\">\n\n                <span class=\"tjcl-feature-tag\">\n                    Int\u00e9gration paysag\u00e8re\n                <\/span>\n\n                <h2>\n                    Une cl\u00f4ture qui d\u00e9limite\n                    <span>sans enfermer le jardin.<\/span>\n                <\/h2>\n\n                <p>\n                    En associant la cl\u00f4ture aux plantations,\n                    aux massifs et aux autres am\u00e9nagements,\n                    elle devient un v\u00e9ritable \u00e9l\u00e9ment\n                    du paysage ext\u00e9rieur.\n                <\/p>\n\n\n                <div class=\"tjcl-feature-chips\">\n\n                    <span>\n                        Cl\u00f4ture\n                    <\/span>\n\n                    <span>+<\/span>\n\n                    <span>\n                        Plantations\n                    <\/span>\n\n                    <span>+<\/span>\n\n                    <span>\n                        Jardin\n                    <\/span>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- ============================================================\n     PROCESS\n============================================================ -->\n\n<section\n    class=\"tjcl-section tjcl-process\"\n    data-tjcl-process>\n\n    <div class=\"tjcl-container\">\n\n        <div class=\"tjcl-heading tjcl-heading-center tjcl-reveal\">\n\n            <span class=\"tjcl-kicker\">\n                Votre projet\n            <\/span>\n\n            <h2 class=\"tjcl-title\">\n                Comment se d\u00e9roule\n                <span>la pose d&rsquo;une cl\u00f4ture ?<\/span>\n            <\/h2>\n\n            <p class=\"tjcl-text\">\n                Un projet organis\u00e9\n                depuis la d\u00e9finition du trac\u00e9\n                jusqu&rsquo;aux derni\u00e8res finitions.\n            <\/p>\n\n        <\/div>\n\n\n        <div class=\"tjcl-process-wrap\">\n\n            <div class=\"tjcl-process-line\">\n\n                <div class=\"tjcl-process-progress\"><\/div>\n\n            <\/div>\n\n\n            <div class=\"tjcl-process-grid\">\n\n\n                <article class=\"tjcl-process-step\">\n\n                    <div class=\"tjcl-process-number\">\n                        01\n                    <\/div>\n\n                    <h3>\n                        Votre besoin\n                    <\/h3>\n\n                    <p>\n                        D\u00e9limitation,\n                        intimit\u00e9 ou am\u00e9nagement.\n                    <\/p>\n\n                <\/article>\n\n\n                <article class=\"tjcl-process-step\">\n\n                    <div class=\"tjcl-process-number\">\n                        02\n                    <\/div>\n\n                    <h3>\n                        Implantation\n                    <\/h3>\n\n                    <p>\n                        Le trac\u00e9 et la zone\n                        sont \u00e9tudi\u00e9s.\n                    <\/p>\n\n                <\/article>\n\n\n                <article class=\"tjcl-process-step\">\n\n                    <div class=\"tjcl-process-number\">\n                        03\n                    <\/div>\n\n                    <h3>\n                        Pr\u00e9paration\n                    <\/h3>\n\n                    <p>\n                        Les abords\n                        sont pr\u00e9par\u00e9s.\n                    <\/p>\n\n                <\/article>\n\n\n                <article class=\"tjcl-process-step\">\n\n                    <div class=\"tjcl-process-number\">\n                        04\n                    <\/div>\n\n                    <h3>\n                        Installation\n                    <\/h3>\n\n                    <p>\n                        La nouvelle cl\u00f4ture\n                        est mise en place.\n                    <\/p>\n\n                <\/article>\n\n\n                <article class=\"tjcl-process-step\">\n\n                    <div class=\"tjcl-process-number\">\n                        05\n                    <\/div>\n\n                    <h3>\n                        Finitions\n                    <\/h3>\n\n                    <p>\n                        Les raccords\n                        avec le jardin sont finalis\u00e9s.\n                    <\/p>\n\n                <\/article>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- ============================================================\n     RELATED\n============================================================ -->\n\n<section class=\"tjcl-section tjcl-related\">\n\n    <div class=\"tjcl-container\">\n\n        <div class=\"tjcl-heading tjcl-reveal\">\n\n            <span class=\"tjcl-kicker\">\n                Compl\u00e9ter votre ext\u00e9rieur\n            <\/span>\n\n            <h2 class=\"tjcl-title\">\n                Une cl\u00f4ture int\u00e9gr\u00e9e\n                <span>dans un projet complet.<\/span>\n            <\/h2>\n\n        <\/div>\n\n\n        <div class=\"tjcl-related-grid\">\n\n\n            <a\n                class=\"tjcl-related-card tjcl-reveal\"\n                href=\"\/paysagiste\/amenagement-exterieur\/\">\n\n                <img decoding=\"async\"\n                    src=\"https:\/\/images.pexels.com\/photos\/34360409\/pexels-photo-34360409.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1000\"\n                    loading=\"lazy\"\n                    alt=\"Am\u00e9nagement ext\u00e9rieur\">\n\n                <div class=\"tjcl-related-content\">\n\n                    <span>\n                        Projet global\n                    <\/span>\n\n                    <strong>\n                        Am\u00e9nagement ext\u00e9rieur \u2192\n                    <\/strong>\n\n                    <small>\n                        Int\u00e9grez la cl\u00f4ture\n                        dans tout votre am\u00e9nagement.\n                    <\/small>\n\n                <\/div>\n\n            <\/a>\n\n\n            <a\n                class=\"tjcl-related-card tjcl-reveal\"\n                href=\"\/paysagiste\/creation-jardin\/\">\n\n                <img decoding=\"async\"\n                    src=\"https:\/\/images.pexels.com\/photos\/30130899\/pexels-photo-30130899.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1000\"\n                    loading=\"lazy\"\n                    alt=\"Cr\u00e9ation de jardin\">\n\n                <div class=\"tjcl-related-content\">\n\n                    <span>\n                        V\u00e9g\u00e9taliser les abords\n                    <\/span>\n\n                    <strong>\n                        Cr\u00e9ation de jardin \u2192\n                    <\/strong>\n\n                    <small>\n                        Ajoutez plantations\n                        et massifs autour de la cl\u00f4ture.\n                    <\/small>\n\n                <\/div>\n\n            <\/a>\n\n\n            <a\n                class=\"tjcl-related-card tjcl-reveal\"\n                href=\"\/paysagiste\/terrasses-allees\/\">\n\n                <img decoding=\"async\"\n                    src=\"https:\/\/images.pexels.com\/photos\/7546775\/pexels-photo-7546775.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1000\"\n                    loading=\"lazy\"\n                    alt=\"Terrasse et all\u00e9es\">\n\n                <div class=\"tjcl-related-content\">\n\n                    <span>\n                        Structurer les espaces\n                    <\/span>\n\n                    <strong>\n                        Terrasses &#038; all\u00e9es \u2192\n                    <\/strong>\n\n                    <small>\n                        Organisez les circulations\n                        et les espaces de vie.\n                    <\/small>\n\n                <\/div>\n\n            <\/a>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- ============================================================\n     FAQ\n============================================================ -->\n\n<section class=\"tjcl-section tjcl-faq\">\n\n    <div class=\"tjcl-container\">\n\n        <div class=\"tjcl-faq-grid\">\n\n\n            <div class=\"tjcl-faq-intro tjcl-reveal\">\n\n                <span class=\"tjcl-kicker\">\n                    Questions fr\u00e9quentes\n                <\/span>\n\n                <h2 class=\"tjcl-title\">\n                    Votre cl\u00f4ture,\n                    <span>simplement.<\/span>\n                <\/h2>\n\n                <p class=\"tjcl-text\">\n                    Quelques r\u00e9ponses utiles\n                    avant de lancer votre projet\n                    de d\u00e9limitation ext\u00e9rieure.\n                <\/p>\n\n            <\/div>\n\n\n            <div class=\"tjcl-faq-list\">\n\n\n                <details class=\"tjcl-faq-item tjcl-reveal\">\n\n                    <summary>\n                        Peut-on poser une cl\u00f4ture dans un jardin existant ?\n                    <\/summary>\n\n                    <div class=\"tjcl-faq-answer\">\n                        Oui. La cl\u00f4ture peut \u00eatre int\u00e9gr\u00e9e\n                        \u00e0 un ext\u00e9rieur d\u00e9j\u00e0 am\u00e9nag\u00e9,\n                        en tenant compte des plantations,\n                        all\u00e9es et autres \u00e9l\u00e9ments existants.\n                    <\/div>\n\n                <\/details>\n\n\n                <details class=\"tjcl-faq-item tjcl-reveal\">\n\n                    <summary>\n                        Peut-on cr\u00e9er davantage d&rsquo;intimit\u00e9 autour d&rsquo;une terrasse ?\n                    <\/summary>\n\n                    <div class=\"tjcl-faq-answer\">\n                        Oui. Une solution de s\u00e9paration\n                        ou de brise-vue peut \u00eatre int\u00e9gr\u00e9e\n                        autour d&rsquo;une terrasse ou d&rsquo;un espace d\u00e9tente.\n                    <\/div>\n\n                <\/details>\n\n\n                <details class=\"tjcl-faq-item tjcl-reveal\">\n\n                    <summary>\n                        Peut-on ajouter des plantations devant la cl\u00f4ture ?\n                    <\/summary>\n\n                    <div class=\"tjcl-faq-answer\">\n                        Oui. Des plantations peuvent \u00eatre pr\u00e9vues\n                        afin d&rsquo;adoucir visuellement la cl\u00f4ture\n                        et de mieux l&rsquo;int\u00e9grer au jardin.\n                    <\/div>\n\n                <\/details>\n\n\n                <details class=\"tjcl-faq-item tjcl-reveal\">\n\n                    <summary>\n                        Peut-on int\u00e9grer la cl\u00f4ture dans un am\u00e9nagement complet ?\n                    <\/summary>\n\n                    <div class=\"tjcl-faq-answer\">\n                        Oui. Elle peut faire partie\n                        d&rsquo;un projet comprenant \u00e9galement\n                        terrasse, all\u00e9es, pelouse et plantations.\n                    <\/div>\n\n                <\/details>\n\n\n                <details class=\"tjcl-faq-item tjcl-reveal\">\n\n                    <summary>\n                        Comment demander un devis ?\n                    <\/summary>\n\n                    <div class=\"tjcl-faq-answer\">\n                        Pr\u00e9sentez la longueur approximative\n                        \u00e0 cl\u00f4turer, la configuration du terrain\n                        et le r\u00e9sultat souhait\u00e9 via la page contact.\n                    <\/div>\n\n                <\/details>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- ============================================================\n     FINAL CTA\n============================================================ -->\n\n<section class=\"tjcl-final\">\n\n    <div class=\"tjcl-container\">\n\n        <div class=\"tjcl-final-box tjcl-reveal\">\n\n            <div class=\"tjcl-final-content\">\n\n                <span class=\"tjcl-kicker\">\n                    Cl\u00f4tures\n                <\/span>\n\n                <h2>\n                    D\u00e9limitez votre ext\u00e9rieur\n                    <span>avec \u00e9l\u00e9gance.<\/span>\n                <\/h2>\n\n                <p>\n                    Pr\u00e9sentez-nous votre terrain,\n                    la longueur \u00e0 cl\u00f4turer et le r\u00e9sultat recherch\u00e9.\n                    Terra Jardin vous propose\n                    une solution adapt\u00e9e \u00e0 votre ext\u00e9rieur.\n                <\/p>\n\n\n                <div class=\"tjcl-final-actions\">\n\n                    <a\n                        class=\"tjcl-btn tjcl-btn-gold\"\n                        href=\"\/paysagiste\/contact\/\">\n\n                        Demander un devis\n                        <span class=\"tjcl-arrow\">\u2192<\/span>\n\n                    <\/a>\n\n\n                    <a\n                        class=\"tjcl-btn tjcl-btn-light\"\n                        href=\"\/paysagiste\/services\/\">\n\n                        Voir tous nos services\n                        <span class=\"tjcl-arrow\">\u2192<\/span>\n\n                    <\/a>\n\n                <\/div>\n\n\n                <div class=\"tjcl-final-points\">\n\n                    <span class=\"tjcl-final-point\">\n\n                        <span class=\"tjcl-check\">\u2713<\/span>\n\n                        Devis gratuit\n\n                    <\/span>\n\n\n                    <span class=\"tjcl-final-point\">\n\n                        <span class=\"tjcl-check\">\u2713<\/span>\n\n                        Projet personnalis\u00e9\n\n                    <\/span>\n\n\n                    <span class=\"tjcl-final-point\">\n\n                        <span class=\"tjcl-check\">\u2713<\/span>\n\n                        Int\u00e9gration paysag\u00e8re\n\n                    <\/span>\n\n\n                    <span class=\"tjcl-final-point\">\n\n                        <span class=\"tjcl-check\">\u2713<\/span>\n\n                        Finitions soign\u00e9es\n\n                    <\/span>\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\n    function initTerraClotures(){\n\n        var root =\n            document.querySelector(\n                \".tjcl-page\"\n            );\n\n\n        if(!root){\n            return;\n        }\n\n\n        var reducedMotion =\n            false;\n\n\n        try{\n\n            reducedMotion =\n                window.matchMedia(\n                    \"(prefers-reduced-motion: reduce)\"\n                ).matches;\n\n        }catch(error){\n\n            reducedMotion =\n                false;\n\n        }\n\n\n\n        \/* ====================================================\n           REVEAL SECURISE\n        ==================================================== *\/\n\n        try{\n\n            var revealItems =\n                root.querySelectorAll(\n                    \".tjcl-reveal\"\n                );\n\n\n            if(\n                reducedMotion ||\n                !(\"IntersectionObserver\" in window)\n            ){\n\n                revealItems.forEach(\n                    function(item){\n\n                        item.classList.add(\n                            \"tjcl-visible\"\n                        );\n\n                    }\n                );\n\n            }else{\n\n\n                var viewport =\n                    window.innerHeight ||\n                    document.documentElement.clientHeight;\n\n\n                revealItems.forEach(\n                    function(item){\n\n                        var rect =\n                            item.getBoundingClientRect();\n\n\n                        if(\n                            rect.top <\n                            viewport * .94\n                        ){\n\n                            item.classList.add(\n                                \"tjcl-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                                                \"tjcl-visible\"\n                                            );\n\n\n                                        observer.unobserve(\n                                            entry.target\n                                        );\n\n                                    }\n\n                                }\n                            );\n\n                        },\n\n                        {\n                            threshold:.12,\n\n                            rootMargin:\n                                \"0px 0px -45px 0px\"\n                        }\n\n                    );\n\n\n                revealItems.forEach(\n                    function(item){\n\n                        observer.observe(\n                            item\n                        );\n\n                    }\n                );\n\n\n                root.classList.add(\n                    \"tjcl-motion-ready\"\n                );\n\n            }\n\n        }catch(error){\n\n            root.classList.remove(\n                \"tjcl-motion-ready\"\n            );\n\n        }\n\n\n\n        \/* ====================================================\n           TIMELINE\n        ==================================================== *\/\n\n        try{\n\n            var process =\n                root.querySelector(\n                    \"[data-tjcl-process]\"\n                );\n\n\n            if(!process){\n                return;\n            }\n\n\n            var steps =\n                process.querySelectorAll(\n                    \".tjcl-process-step\"\n                );\n\n\n            var ticking =\n                false;\n\n\n            function clamp(\n                value,\n                min,\n                max\n            ){\n\n                return Math.min(\n                    Math.max(\n                        value,\n                        min\n                    ),\n                    max\n                );\n\n            }\n\n\n            function updateProcess(){\n\n                ticking =\n                    false;\n\n\n                var rect =\n                    process.getBoundingClientRect();\n\n\n                var viewport =\n                    window.innerHeight ||\n                    document.documentElement.clientHeight;\n\n\n                var start =\n                    viewport * .78;\n\n\n                var distance =\n                    Math.max(\n                        rect.height +\n                        viewport * .20,\n                        1\n                    );\n\n\n                var progress =\n                    (\n                        start -\n                        rect.top\n                    ) \/\n                    distance;\n\n\n                progress =\n                    clamp(\n                        progress,\n                        0,\n                        1\n                    );\n\n\n                process.style.setProperty(\n                    \"--tjcl-progress\",\n                    progress.toFixed(4)\n                );\n\n\n                var thresholds =\n                    [\n                        .03,\n                        .24,\n                        .45,\n                        .67,\n                        .88\n                    ];\n\n\n                steps.forEach(\n                    function(step,index){\n\n                        if(\n                            progress >=\n                            thresholds[index]\n                        ){\n\n                            step.classList.add(\n                                \"tjcl-active\"\n                            );\n\n                        }else{\n\n                            step.classList.remove(\n                                \"tjcl-active\"\n                            );\n\n                        }\n\n                    }\n                );\n\n            }\n\n\n            function requestProcess(){\n\n                if(ticking){\n                    return;\n                }\n\n\n                ticking =\n                    true;\n\n\n                requestAnimationFrame(\n                    updateProcess\n                );\n\n            }\n\n\n            if(reducedMotion){\n\n                process.style.setProperty(\n                    \"--tjcl-progress\",\n                    \"1\"\n                );\n\n\n                steps.forEach(\n                    function(step){\n\n                        step.classList.add(\n                            \"tjcl-active\"\n                        );\n\n                    }\n                );\n\n            }else{\n\n                window.addEventListener(\n                    \"scroll\",\n                    requestProcess,\n                    {\n                        passive:true\n                    }\n                );\n\n\n                window.addEventListener(\n                    \"resize\",\n                    requestProcess\n                );\n\n\n                updateProcess();\n\n            }\n\n        }catch(error){\n\n            \/* La page reste utilisable et visible *\/\n\n        }\n\n    }\n\n\n\n    if(\n        document.readyState ===\n        \"loading\"\n    ){\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initTerraClotures\n        );\n\n    }else{\n\n        initTerraClotures();\n\n    }\n\n})();\n<\/script>\n\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Cl\u00f4tures D\u00e9limitez votre terrain. Pr\u00e9servez votre tranquillit\u00e9. Cl\u00f4ture, brise-vue et d\u00e9limitation : Terra Jardin int\u00e8gre votre cl\u00f4ture dans l&rsquo;am\u00e9nagement global de l&rsquo;ext\u00e9rieur pour obtenir un r\u00e9sultat propre et harmonieux. \u2713 D\u00e9limitation du terrain \u2713 Int\u00e9gration paysag\u00e8re \u2713 Devis gratuit Demander un devis \u2192 D\u00e9couvrir la prestation \u2193 D\u00e9limitation nette Structurez clairement les limites de votre [&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-31","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\/31","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=31"}],"version-history":[{"count":2,"href":"https:\/\/demo.jouglet-web.fr\/paysagiste\/wp-json\/wp\/v2\/pages\/31\/revisions"}],"predecessor-version":[{"id":81,"href":"https:\/\/demo.jouglet-web.fr\/paysagiste\/wp-json\/wp\/v2\/pages\/31\/revisions\/81"}],"wp:attachment":[{"href":"https:\/\/demo.jouglet-web.fr\/paysagiste\/wp-json\/wp\/v2\/media?parent=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}