{"id":39,"date":"2026-09-18T14:17:56","date_gmt":"2026-09-18T12:17:56","guid":{"rendered":"https:\/\/demo.jouglet-web.fr\/paysagiste\/?page_id=39"},"modified":"2026-09-18T16:51:53","modified_gmt":"2026-09-18T14:51:53","slug":"contact","status":"publish","type":"page","link":"https:\/\/demo.jouglet-web.fr\/paysagiste\/contact\/","title":{"rendered":"Contact"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"tjct-page\">\n\n<style>\n\n\/* ============================================================\n   TERRA JARDIN \u2014 CONTACT\n============================================================ *\/\n\n.tjct-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.tjct-page *,\n.tjct-page *::before,\n.tjct-page *::after{\n    box-sizing:border-box;\n}\n\n.tjct-page img{\n    display:block;\n    width:100%;\n    max-width:100%;\n}\n\n.tjct-page a{\n    text-decoration:none;\n}\n\n.tjct-container{\n    width:min(1240px,calc(100% - 48px));\n    margin-inline:auto;\n}\n\n.tjct-section{\n    position:relative;\n    padding:110px 0;\n}\n\n\n\/* ============================================================\n   TYPO\n============================================================ *\/\n\n.tjct-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.tjct-kicker::before{\n    content:\"\";\n\n    width:34px;\n    height:1px;\n\n    background:var(--gold);\n}\n\n.tjct-title{\n    margin:0;\n\n    max-width:850px;\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.tjct-title span{\n    color:var(--gold);\n}\n\n.tjct-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.75;\n}\n\n\n\/* ============================================================\n   BOUTONS\n============================================================ *\/\n\n.tjct-page .tjct-btn{\n    min-height:56px;\n\n    padding:0 26px;\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-family:inherit;\n    font-size:12px;\n    line-height:1;\n    font-weight:850 !important;\n\n    text-decoration:none !important;\n\n    cursor:pointer;\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.tjct-page .tjct-btn:hover{\n    transform:translateY(-3px);\n}\n\n.tjct-page .tjct-btn-gold,\n.tjct-page .tjct-btn-gold:visited{\n    background:var(--gold) !important;\n    color:var(--deep) !important;\n\n    border-color:var(--gold) !important;\n\n    box-shadow:\n        0 14px 34px rgba(0,0,0,.17);\n}\n\n.tjct-page .tjct-btn-gold:hover{\n    background:var(--gold-light) !important;\n    color:var(--deep) !important;\n}\n\n.tjct-page .tjct-btn-gold *{\n    color:var(--deep) !important;\n}\n\n.tjct-page .tjct-btn-light,\n.tjct-page .tjct-btn-light:visited{\n    background:rgba(255,255,255,.12) !important;\n\n    color:#ffffff !important;\n\n    border-color:rgba(255,255,255,.60) !important;\n\n    backdrop-filter:blur(14px);\n    -webkit-backdrop-filter:blur(14px);\n}\n\n.tjct-page .tjct-btn-light:hover{\n    background:#fff !important;\n    color:var(--deep) !important;\n}\n\n.tjct-page .tjct-btn-light *{\n    color:#fff !important;\n}\n\n.tjct-page .tjct-btn-light:hover *{\n    color:var(--deep) !important;\n}\n\n.tjct-arrow{\n    transition:transform .3s ease;\n}\n\n.tjct-btn:hover .tjct-arrow{\n    transform:translateX(5px);\n}\n\n\n\/* ============================================================\n   HERO\n============================================================ *\/\n\n.tjct-hero{\n    position:relative;\n\n    min-height:610px;\n\n    display:flex;\n    align-items:flex-end;\n\n    overflow:hidden;\n    isolation:isolate;\n\n    background:var(--deep);\n}\n\n.tjct-hero-bg{\n    position:absolute;\n    inset:0;\n    z-index:-3;\n}\n\n.tjct-hero-bg img{\n    width:100%;\n    height:110%;\n\n    object-fit:cover;\n\n    transform:\n        translateY(var(--tjct-parallax,0px))\n        scale(1.03);\n}\n\n.tjct-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) 0%,\n            rgba(5,20,14,.88) 45%,\n            rgba(5,20,14,.52) 74%,\n            rgba(5,20,14,.26) 100%\n        ),\n        linear-gradient(\n            0deg,\n            rgba(5,20,14,.73),\n            transparent 65%\n        );\n}\n\n.tjct-hero::before{\n    content:\"\";\n\n    position:absolute;\n    z-index:-1;\n\n    width:650px;\n    height:650px;\n\n    right:-340px;\n    top:-370px;\n\n    border:1px solid rgba(213,185,133,.15);\n    border-radius:50%;\n}\n\n.tjct-hero-inner{\n    width:min(1240px,calc(100% - 48px));\n    margin:auto;\n\n    padding:145px 0 75px;\n}\n\n.tjct-hero-content{\n    max-width:850px;\n}\n\n.tjct-hero-badge{\n    display:inline-flex;\n    align-items:center;\n    gap:10px;\n\n    margin-bottom:23px;\n    padding:9px 14px;\n\n    border:1px solid rgba(255,255,255,.20);\n    border-radius:999px;\n\n    background:rgba(255,255,255,.09);\n\n    backdrop-filter:blur(12px);\n\n    color:#fff;\n\n    font-size:9px;\n    font-weight:850;\n    letter-spacing:.14em;\n    text-transform:uppercase;\n}\n\n.tjct-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.tjct-hero h1{\n    margin:0;\n\n    color:#fff;\n\n    font-size:clamp(55px,7vw,94px);\n    line-height:.9;\n    font-weight:780;\n    letter-spacing:-.065em;\n}\n\n.tjct-hero h1 span{\n    display:block;\n\n    color:var(--gold);\n}\n\n.tjct-hero-desc{\n    max-width:650px;\n\n    margin:27px 0 0;\n\n    color:rgba(255,255,255,.76);\n\n    font-size:17px;\n    line-height:1.65;\n}\n\n.tjct-hero-actions{\n    display:flex;\n    flex-wrap:wrap;\n    gap:14px;\n\n    margin-top:33px;\n}\n\n\n\/* ============================================================\n   CONTACT MAIN\n============================================================ *\/\n\n.tjct-main{\n    background:#fff;\n}\n\n.tjct-main-grid{\n    display:grid;\n    grid-template-columns:.76fr 1.24fr;\n    gap:55px;\n\n    align-items:start;\n}\n\n\n\/* ============================================================\n   CONTACT INFOS\n============================================================ *\/\n\n.tjct-info{\n    position:sticky;\n    top:100px;\n}\n\n.tjct-info-intro{\n    margin-bottom:30px;\n}\n\n.tjct-info-cards{\n    display:grid;\n    gap:10px;\n}\n\n.tjct-info-card{\n    position:relative;\n\n    min-height:115px;\n\n    padding:20px 20px 20px 70px;\n\n    border:1px solid var(--border);\n    border-radius:18px;\n\n    background:var(--cream);\n\n    transition:\n        transform .35s ease,\n        background .35s ease,\n        box-shadow .35s ease;\n}\n\n.tjct-info-card:hover{\n    transform:translateX(5px);\n\n    background:#fff;\n\n    box-shadow:\n        0 18px 40px rgba(16,41,31,.07);\n}\n\n.tjct-info-icon{\n    position:absolute;\n\n    left:18px;\n    top:18px;\n\n    width:38px;\n    height:38px;\n\n    display:grid;\n    place-items:center;\n\n    border-radius:12px;\n\n    background:#efe4ce;\n    color:var(--deep);\n}\n\n.tjct-info-icon svg{\n    width:18px;\n    height:18px;\n}\n\n.tjct-info-card small{\n    display:block;\n\n    color:var(--green);\n\n    font-size:8px;\n    font-weight:850;\n    letter-spacing:.08em;\n    text-transform:uppercase;\n}\n\n.tjct-info-card strong{\n    display:block;\n\n    margin-top:6px;\n\n    color:var(--deep);\n\n    font-size:14px;\n}\n\n.tjct-info-card p{\n    margin:5px 0 0;\n\n    color:var(--text);\n\n    font-size:10px;\n    line-height:1.5;\n}\n\n\n\/* NOTICE *\/\n\n.tjct-demo-note{\n    margin-top:18px;\n\n    padding:17px;\n\n    border:1px dashed rgba(84,116,93,.30);\n    border-radius:16px;\n\n    background:rgba(144,169,141,.08);\n}\n\n.tjct-demo-note strong{\n    display:block;\n\n    color:var(--deep);\n\n    font-size:10px;\n}\n\n.tjct-demo-note p{\n    margin:6px 0 0;\n\n    color:var(--text);\n\n    font-size:9px;\n    line-height:1.55;\n}\n\n\n\/* ============================================================\n   FORMULAIRE\n============================================================ *\/\n\n.tjct-form-shell{\n    position:relative;\n\n    overflow:hidden;\n\n    padding:38px;\n\n    border:1px solid var(--border);\n    border-radius:28px;\n\n    background:var(--cream);\n\n    box-shadow:\n        0 24px 65px rgba(16,41,31,.07);\n}\n\n.tjct-form-shell::before{\n    content:\"\";\n\n    position:absolute;\n\n    width:400px;\n    height:400px;\n\n    right:-250px;\n    top:-260px;\n\n    border-radius:50%;\n\n    background:\n        radial-gradient(\n            circle,\n            rgba(213,185,133,.18),\n            transparent 70%\n        );\n}\n\n.tjct-form-head{\n    position:relative;\n    z-index:2;\n\n    margin-bottom:31px;\n}\n\n.tjct-form-title{\n    margin:0;\n\n    color:var(--deep);\n\n    font-size:32px;\n    line-height:1.05;\n    letter-spacing:-.04em;\n}\n\n.tjct-form-title span{\n    color:var(--gold);\n}\n\n.tjct-form-subtitle{\n    max-width:580px;\n\n    margin:11px 0 0;\n\n    color:var(--text);\n\n    font-size:11px;\n    line-height:1.65;\n}\n\n.tjct-form{\n    position:relative;\n    z-index:2;\n}\n\n.tjct-fields{\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    gap:13px;\n}\n\n.tjct-field{\n    display:grid;\n    gap:8px;\n}\n\n.tjct-field-full{\n    grid-column:1\/-1;\n}\n\n.tjct-field label{\n    color:var(--deep);\n\n    font-size:9px;\n    font-weight:850;\n    letter-spacing:.04em;\n}\n\n.tjct-field input,\n.tjct-field select,\n.tjct-field textarea{\n    width:100%;\n\n    border:1px solid rgba(24,57,43,.13);\n    border-radius:14px;\n\n    outline:none;\n\n    background:#fff;\n    color:var(--deep);\n\n    font-family:inherit;\n    font-size:12px;\n\n    transition:\n        border-color .25s ease,\n        box-shadow .25s ease,\n        background .25s ease;\n}\n\n.tjct-field input,\n.tjct-field select{\n    height:54px;\n\n    padding:0 15px;\n}\n\n.tjct-field textarea{\n    min-height:145px;\n\n    padding:15px;\n\n    resize:vertical;\n}\n\n.tjct-field input:focus,\n.tjct-field select:focus,\n.tjct-field textarea:focus{\n    border-color:var(--gold);\n\n    background:#fff;\n\n    box-shadow:\n        0 0 0 3px rgba(213,185,133,.13);\n}\n\n.tjct-field input::placeholder,\n.tjct-field textarea::placeholder{\n    color:#9ca29d;\n}\n\n\n\/* ============================================================\n   TYPE DE PROJET\n============================================================ *\/\n\n.tjct-project-label{\n    margin:25px 0 11px;\n\n    color:var(--deep);\n\n    font-size:9px;\n    font-weight:850;\n}\n\n.tjct-project-grid{\n    display:grid;\n    grid-template-columns:repeat(4,1fr);\n    gap:8px;\n}\n\n.tjct-project-option{\n    position:relative;\n}\n\n.tjct-project-option input{\n    position:absolute;\n\n    opacity:0;\n    pointer-events:none;\n}\n\n.tjct-project-option span{\n    min-height:58px;\n\n    padding:9px;\n\n    display:flex;\n    align-items:center;\n    justify-content:center;\n\n    border:1px solid rgba(24,57,43,.12);\n    border-radius:13px;\n\n    background:#fff;\n\n    color:var(--green);\n\n    cursor:pointer;\n\n    text-align:center;\n\n    font-size:8px;\n    line-height:1.25;\n    font-weight:800;\n\n    transition:\n        background .25s ease,\n        color .25s ease,\n        border-color .25s ease,\n        transform .25s ease;\n}\n\n.tjct-project-option span:hover{\n    transform:translateY(-2px);\n\n    border-color:var(--gold);\n}\n\n.tjct-project-option input:checked + span{\n    background:var(--deep);\n    color:#fff;\n\n    border-color:var(--deep);\n}\n\n\n\/* ============================================================\n   FORM FOOTER\n============================================================ *\/\n\n.tjct-form-footer{\n    display:flex;\n    align-items:center;\n    justify-content:space-between;\n    gap:20px;\n\n    margin-top:26px;\n}\n\n.tjct-form-help{\n    max-width:350px;\n\n    color:var(--text);\n\n    font-size:8px;\n    line-height:1.5;\n}\n\n.tjct-submit{\n    min-width:200px;\n\n    border:0;\n}\n\n\n\/* SUCCESS *\/\n\n.tjct-form-message{\n    display:none;\n\n    margin-top:17px;\n    padding:15px 17px;\n\n    border:1px solid rgba(84,116,93,.18);\n    border-radius:14px;\n\n    background:rgba(84,116,93,.10);\n\n    color:var(--deep);\n\n    font-size:10px;\n    line-height:1.6;\n}\n\n.tjct-form-message.tjct-show{\n    display:block;\n}\n\n\n\/* ============================================================\n   PROJECT TYPES VISUAL\n============================================================ *\/\n\n.tjct-needs{\n    background:var(--cream);\n}\n\n.tjct-needs-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.tjct-needs-head .tjct-text{\n    max-width:390px;\n}\n\n.tjct-needs-grid{\n    display:grid;\n    grid-template-columns:repeat(4,1fr);\n    gap:14px;\n}\n\n.tjct-need{\n    position:relative;\n\n    min-height:290px;\n\n    overflow:hidden;\n\n    padding:25px;\n\n    border:1px solid var(--border);\n    border-radius:22px;\n\n    background:#fff;\n\n    transition:\n        transform .4s ease,\n        border-color .4s ease,\n        box-shadow .4s ease;\n}\n\n.tjct-need::before{\n    content:\"\";\n\n    position:absolute;\n\n    top:0;\n    left: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.tjct-need:hover{\n    transform:translateY(-7px);\n\n    border-color:rgba(213,185,133,.58);\n\n    box-shadow:\n        0 25px 55px rgba(16,41,31,.08);\n}\n\n.tjct-need:hover::before{\n    transform:scaleX(1);\n}\n\n.tjct-need-icon{\n    width:53px;\n    height:53px;\n\n    display:grid;\n    place-items:center;\n\n    border-radius:16px;\n\n    background:#efe4ce;\n    color:var(--deep);\n}\n\n.tjct-need-icon svg{\n    width:22px;\n    height:22px;\n}\n\n.tjct-need span{\n    display:block;\n\n    margin-top:35px;\n\n    color:var(--gold);\n\n    font-size:8px;\n    font-weight:900;\n}\n\n.tjct-need h3{\n    margin:8px 0 0;\n\n    color:var(--deep);\n\n    font-size:18px;\n}\n\n.tjct-need p{\n    margin:8px 0 0;\n\n    color:var(--text);\n\n    font-size:10px;\n    line-height:1.6;\n}\n\n\n\/* ============================================================\n   PROCESS\n============================================================ *\/\n\n.tjct-process{\n    background:var(--deep);\n    color:#fff;\n\n    --tjct-progress:0;\n}\n\n.tjct-process .tjct-kicker{\n    color:var(--gold);\n}\n\n.tjct-process .tjct-title{\n    color:#fff;\n}\n\n.tjct-process .tjct-text{\n    color:rgba(255,255,255,.64);\n}\n\n.tjct-process-wrap{\n    position:relative;\n\n    margin-top:65px;\n}\n\n.tjct-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:999px;\n\n    background:rgba(255,255,255,.10);\n}\n\n.tjct-process-progress{\n    position:absolute;\n    inset:0;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--gold),\n            var(--sage)\n        );\n\n    transform:\n        scaleX(var(--tjct-progress));\n\n    transform-origin:left center;\n}\n\n.tjct-process-grid{\n    position:relative;\n\n    display:grid;\n    grid-template-columns:repeat(4,1fr);\n    gap:28px;\n}\n\n.tjct-step{\n    text-align:center;\n}\n\n.tjct-step-number{\n    width:80px;\n    height:80px;\n\n    margin:0 auto 23px;\n\n    display:grid;\n    place-items:center;\n\n    border:9px solid var(--deep);\n    border-radius:50%;\n\n    background:#29483a;\n    color:rgba(255,255,255,.54);\n\n    font-size:10px;\n    font-weight:900;\n\n    transition:\n        transform .4s ease,\n        background .4s ease,\n        color .4s ease;\n}\n\n.tjct-step.tjct-active\n.tjct-step-number{\n    transform:scale(1.08);\n\n    background:var(--gold);\n    color:var(--deep);\n}\n\n.tjct-step h3{\n    margin:0;\n\n    color:#fff;\n\n    font-size:16px;\n}\n\n.tjct-step p{\n    max-width:220px;\n\n    margin:8px auto 0;\n\n    color:rgba(255,255,255,.55);\n\n    font-size:10px;\n    line-height:1.6;\n}\n\n\n\/* ============================================================\n   ZONE\n============================================================ *\/\n\n.tjct-zone{\n    background:#fff;\n}\n\n.tjct-zone-grid{\n    display:grid;\n    grid-template-columns:1.02fr .98fr;\n    gap:70px;\n\n    align-items:center;\n}\n\n.tjct-zone-map{\n    position:relative;\n\n    min-height:520px;\n\n    overflow:hidden;\n\n    border-radius:28px;\n\n    background:var(--forest);\n}\n\n.tjct-zone-map iframe{\n    position:absolute;\n    inset:0;\n\n    width:100%;\n    height:100%;\n\n    border:0;\n\n    filter:\n        saturate(.78)\n        contrast(.96);\n}\n\n.tjct-zone-overlay{\n    position:absolute;\n\n    left:18px;\n    right:18px;\n    bottom:18px;\n\n    padding:17px;\n\n    border:1px solid rgba(255,255,255,.18);\n    border-radius:16px;\n\n    background:rgba(7,26,18,.85);\n\n    backdrop-filter:blur(14px);\n\n    color:#fff;\n}\n\n.tjct-zone-overlay strong{\n    display:block;\n\n    font-size:13px;\n}\n\n.tjct-zone-overlay span{\n    display:block;\n\n    margin-top:5px;\n\n    color:rgba(255,255,255,.60);\n\n    font-size:9px;\n}\n\n.tjct-zone-points{\n    display:grid;\n    gap:11px;\n\n    margin-top:30px;\n}\n\n.tjct-zone-point{\n    display:flex;\n    align-items:center;\n    gap:12px;\n\n    padding:14px 0;\n\n    border-bottom:1px solid var(--border);\n}\n\n.tjct-zone-point:last-child{\n    border-bottom:0;\n}\n\n.tjct-zone-check{\n    width:27px;\n    height:27px;\n\n    display:grid;\n    place-items:center;\n\n    flex:0 0 auto;\n\n    border-radius:50%;\n\n    background:#efe4ce;\n    color:var(--deep);\n\n    font-size:9px;\n    font-weight:900;\n}\n\n.tjct-zone-point strong{\n    display:block;\n\n    color:var(--deep);\n\n    font-size:12px;\n}\n\n.tjct-zone-point span{\n    display:block;\n\n    margin-top:3px;\n\n    color:var(--text);\n\n    font-size:9px;\n}\n\n\n\/* ============================================================\n   FAQ\n============================================================ *\/\n\n.tjct-faq{\n    background:var(--cream);\n}\n\n.tjct-faq-grid{\n    display:grid;\n    grid-template-columns:.75fr 1.25fr;\n    gap:75px;\n\n    align-items:start;\n}\n\n.tjct-faq-intro{\n    position:sticky;\n    top:110px;\n}\n\n.tjct-faq-list{\n    display:grid;\n    gap:10px;\n}\n\n.tjct-faq-item{\n    overflow:hidden;\n\n    border:1px solid var(--border);\n    border-radius:18px;\n\n    background:#fff;\n}\n\n.tjct-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:13px;\n    font-weight:800;\n}\n\n.tjct-faq-item summary::-webkit-details-marker{\n    display:none;\n}\n\n.tjct-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:#efe4ce;\n    color:var(--deep);\n\n    font-size:17px;\n}\n\n.tjct-faq-item[open] summary::after{\n    content:\"\u2212\";\n}\n\n.tjct-faq-answer{\n    padding:0 22px 21px;\n\n    color:var(--text);\n\n    font-size:11px;\n    line-height:1.7;\n}\n\n\n\/* ============================================================\n   FINAL\n============================================================ *\/\n\n.tjct-final{\n    padding:100px 0;\n\n    background:#fff;\n}\n\n.tjct-final-box{\n    position:relative;\n\n    overflow:hidden;\n\n    padding:88px 55px;\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.tjct-final-box::before{\n    content:\"\";\n\n    position:absolute;\n\n    width:500px;\n    height:500px;\n\n    right:-260px;\n    top:-310px;\n\n    border:1px solid rgba(213,185,133,.17);\n    border-radius:50%;\n}\n\n.tjct-final-box::after{\n    content:\"\";\n\n    position:absolute;\n\n    width:320px;\n    height:320px;\n\n    left:-180px;\n    bottom:-210px;\n\n    border-radius:50%;\n\n    background:rgba(213,185,133,.07);\n}\n\n.tjct-final-content{\n    position:relative;\n    z-index:2;\n\n    max-width:850px;\n\n    margin:auto;\n}\n\n.tjct-final .tjct-kicker{\n    color:var(--gold);\n}\n\n.tjct-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.tjct-final h2 span{\n    color:var(--gold);\n}\n\n.tjct-final p{\n    max-width:630px;\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.tjct-final-actions{\n    display:flex;\n    justify-content:center;\n    flex-wrap:wrap;\n    gap:14px;\n\n    margin-top:31px;\n}\n\n\n\/* ============================================================\n   REVEAL SAFE\n============================================================ *\/\n\n.tjct-reveal{\n    opacity:1;\n    transform:none;\n}\n\n.tjct-page.tjct-motion-ready\n.tjct-reveal:not(.tjct-visible){\n    opacity:0;\n    transform:translateY(42px);\n}\n\n.tjct-page.tjct-motion-ready\n.tjct-reveal.tjct-visible{\n    opacity:1;\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    .tjct-main-grid,\n    .tjct-zone-grid,\n    .tjct-faq-grid{\n        grid-template-columns:1fr;\n    }\n\n    .tjct-info,\n    .tjct-faq-intro{\n        position:static;\n    }\n\n    .tjct-needs-grid{\n        grid-template-columns:repeat(2,1fr);\n    }\n\n    .tjct-project-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    .tjct-container{\n        width:calc(100% - 28px);\n    }\n\n    .tjct-section{\n        padding:70px 0;\n    }\n\n    .tjct-kicker{\n        margin-bottom:13px;\n\n        font-size:8px;\n    }\n\n    .tjct-kicker::before{\n        width:25px;\n    }\n\n    .tjct-title{\n        font-size:38px;\n        line-height:.99;\n    }\n\n    .tjct-text{\n        font-size:13px;\n    }\n\n\n    \/* HERO *\/\n\n    .tjct-hero{\n        min-height:680px;\n    }\n\n    .tjct-hero-bg img{\n        height:100%;\n\n        transform:none !important;\n    }\n\n    .tjct-hero::after{\n        background:\n            linear-gradient(\n                0deg,\n                rgba(5,20,14,.98),\n                rgba(5,20,14,.92) 58%,\n                rgba(5,20,14,.31)\n            );\n    }\n\n    .tjct-hero-inner{\n        width:calc(100% - 28px);\n\n        padding:135px 0 44px;\n    }\n\n    .tjct-hero-badge{\n        padding:7px 10px;\n\n        font-size:8px;\n    }\n\n    .tjct-hero h1{\n        font-size:clamp(46px,13vw,61px);\n        line-height:.91;\n    }\n\n    .tjct-hero-desc{\n        font-size:14px;\n    }\n\n    .tjct-hero-actions{\n        display:grid;\n        grid-template-columns:1fr;\n    }\n\n    .tjct-page .tjct-btn{\n        width:100%;\n        min-height:54px;\n    }\n\n\n    \/* FORM *\/\n\n    .tjct-main-grid{\n        gap:38px;\n    }\n\n    .tjct-form-shell{\n        padding:24px 18px;\n\n        border-radius:21px;\n    }\n\n    .tjct-form-title{\n        font-size:27px;\n    }\n\n    .tjct-fields{\n        grid-template-columns:1fr;\n    }\n\n    .tjct-field-full{\n        grid-column:auto;\n    }\n\n    .tjct-project-grid{\n        grid-template-columns:1fr 1fr;\n    }\n\n    .tjct-form-footer{\n        flex-direction:column;\n        align-items:stretch;\n    }\n\n    .tjct-submit{\n        width:100%;\n    }\n\n\n    \/* NEEDS *\/\n\n    .tjct-needs-head{\n        flex-direction:column;\n        align-items:flex-start;\n\n        gap:20px;\n    }\n\n    .tjct-needs-grid{\n        grid-template-columns:1fr;\n        gap:10px;\n    }\n\n    .tjct-need{\n        min-height:230px;\n\n        padding:21px;\n    }\n\n\n    \/* PROCESS *\/\n\n    .tjct-process-wrap{\n        margin-top:45px;\n    }\n\n    .tjct-process-line{\n        top:39px;\n        bottom:30px;\n\n        left:39px;\n        right:auto;\n\n        width:3px;\n        height:auto;\n    }\n\n    .tjct-process-progress{\n        transform:\n            scaleY(var(--tjct-progress));\n\n        transform-origin:center top;\n    }\n\n    .tjct-process-grid{\n        grid-template-columns:1fr;\n        gap:0;\n    }\n\n    .tjct-step{\n        position:relative;\n\n        min-height:150px;\n\n        padding:\n            0\n            0\n            30px\n            98px;\n\n        text-align:left;\n    }\n\n    .tjct-step-number{\n        position:absolute;\n\n        left:0;\n        top:0;\n\n        margin:0;\n    }\n\n    .tjct-step p{\n        margin:8px 0 0;\n\n        max-width:none;\n    }\n\n\n    \/* MAP *\/\n\n    .tjct-zone-map{\n        min-height:440px;\n\n        border-radius:21px;\n    }\n\n\n    \/* FAQ *\/\n\n    .tjct-faq-grid{\n        gap:35px;\n    }\n\n    .tjct-faq-item summary{\n        font-size:12px;\n    }\n\n\n    \/* FINAL *\/\n\n    .tjct-final{\n        padding:65px 0;\n    }\n\n    .tjct-final-box{\n        padding:56px 20px;\n\n        border-radius:22px;\n    }\n\n    .tjct-final h2{\n        font-size:41px;\n    }\n\n    .tjct-final p{\n        font-size:12px;\n    }\n\n    .tjct-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    .tjct-page *,\n    .tjct-page *::before,\n    .tjct-page *::after{\n        animation:none !important;\n        transition:none !important;\n    }\n\n    .tjct-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=\"tjct-hero\">\n\n    <div class=\"tjct-hero-bg\">\n\n        <img\n            src=\"https:\/\/images.pexels.com\/photos\/4920282\/pexels-photo-4920282.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=2000\"\n            alt=\"Paysagiste pr\u00e9parant un projet ext\u00e9rieur\"\n            fetchpriority=\"high\"\n            decoding=\"async\">\n\n    <\/div>\n\n\n    <div class=\"tjct-hero-inner\">\n\n        <div class=\"tjct-hero-content\">\n\n            <div class=\"tjct-hero-badge\">\n\n                <span class=\"tjct-hero-dot\"><\/span>\n\n                Contact &#038; devis\n\n            <\/div>\n\n\n            <h1>\n                Parlons de votre\n                <span>projet ext\u00e9rieur.<\/span>\n            <\/h1>\n\n\n            <p class=\"tjct-hero-desc\">\n\n                Cr\u00e9ation de jardin, entretien,\n                terrasse, engazonnement, taille ou am\u00e9nagement :\n                pr\u00e9sentez-nous simplement votre besoin\n                pour commencer \u00e0 imaginer votre projet.\n\n            <\/p>\n\n\n            <div class=\"tjct-hero-actions\">\n\n                <a\n                    class=\"tjct-btn tjct-btn-gold\"\n                    href=\"#demande\">\n\n                    Demander un devis\n                    <span>\u2193<\/span>\n\n                <\/a>\n\n\n                <a\n                    class=\"tjct-btn tjct-btn-light\"\n                    href=\"\/paysagiste\/realisations\/\">\n\n                    Voir les r\u00e9alisations\n                    <span class=\"tjct-arrow\">\u2192<\/span>\n\n                <\/a>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- ============================================================\n     CONTACT + FORM\n============================================================ -->\n\n<section\n    class=\"tjct-section tjct-main\"\n    id=\"demande\">\n\n    <div class=\"tjct-container\">\n\n        <div class=\"tjct-main-grid\">\n\n\n            <!-- LEFT -->\n\n            <aside class=\"tjct-info tjct-reveal\">\n\n                <div class=\"tjct-info-intro\">\n\n                    <span class=\"tjct-kicker\">\n                        Nous contacter\n                    <\/span>\n\n                    <h2 class=\"tjct-title\">\n                        Une question ?\n                        <span>Un projet ?<\/span>\n                    <\/h2>\n\n                    <p class=\"tjct-text\">\n                        Envoyez quelques informations\n                        sur votre besoin afin de pr\u00e9parer\n                        au mieux votre demande.\n                    <\/p>\n\n                <\/div>\n\n\n                <div class=\"tjct-info-cards\">\n\n\n                    <div class=\"tjct-info-card\">\n\n                        <div class=\"tjct-info-icon\">\n\n                            <svg\n                                viewBox=\"0 0 24 24\"\n                                fill=\"none\"\n                                stroke=\"currentColor\"\n                                stroke-width=\"1.8\">\n\n                                <path\n                                    d=\"M22 16.92v3a2 2 0 0 1-2.18 2\n                                    19.79 19.79 0 0 1-8.63-3.07\n                                    19.5 19.5 0 0 1-6-6\n                                    19.79 19.79 0 0 1-3.07-8.67\n                                    A2 2 0 0 1 4.11 2h3\n                                    a2 2 0 0 1 2 1.72\n                                    12.84 12.84 0 0 0 .7 2.81\n                                    2 2 0 0 1-.45 2.11L8.09 9.91\n                                    a16 16 0 0 0 6 6l1.27-1.27\n                                    a2 2 0 0 1 2.11-.45\n                                    12.84 12.84 0 0 0 2.81.7\n                                    A2 2 0 0 1 22 16.92Z\"\/>\n\n                            <\/svg>\n\n                        <\/div>\n\n                        <small>\n                            T\u00e9l\u00e9phone\n                        <\/small>\n\n                        <strong>\n                            \u00c0 personnaliser\n                        <\/strong>\n\n                        <p>\n                            Ajoutez ici le num\u00e9ro\n                            du futur paysagiste.\n                        <\/p>\n\n                    <\/div>\n\n\n                    <div class=\"tjct-info-card\">\n\n                        <div class=\"tjct-info-icon\">\n\n                            <svg\n                                viewBox=\"0 0 24 24\"\n                                fill=\"none\"\n                                stroke=\"currentColor\"\n                                stroke-width=\"1.8\">\n\n                                <rect\n                                    x=\"3\"\n                                    y=\"5\"\n                                    width=\"18\"\n                                    height=\"14\"\n                                    rx=\"2\"\/>\n\n                                <path d=\"m3 7 9 6 9-6\"\/>\n\n                            <\/svg>\n\n                        <\/div>\n\n                        <small>\n                            E-mail\n                        <\/small>\n\n                        <strong>\n                            \u00c0 personnaliser\n                        <\/strong>\n\n                        <p>\n                            Ajoutez ici l&rsquo;adresse e-mail\n                            professionnelle.\n                        <\/p>\n\n                    <\/div>\n\n\n                    <div class=\"tjct-info-card\">\n\n                        <div class=\"tjct-info-icon\">\n\n                            <svg\n                                viewBox=\"0 0 24 24\"\n                                fill=\"none\"\n                                stroke=\"currentColor\"\n                                stroke-width=\"1.8\">\n\n                                <circle cx=\"12\" cy=\"10\" r=\"3\"\/>\n\n                                <path\n                                    d=\"M12 21s7-6 7-12a7 7 0 1 0-14 0c0 6 7 12 7 12Z\"\/>\n\n                            <\/svg>\n\n                        <\/div>\n\n                        <small>\n                            Secteur\n                        <\/small>\n\n                        <strong>\n                            Zone d&rsquo;intervention\n                        <\/strong>\n\n                        <p>\n                            La zone sera personnalis\u00e9e\n                            selon l&rsquo;entreprise.\n                        <\/p>\n\n                    <\/div>\n\n                <\/div>\n\n\n                <div class=\"tjct-demo-note\">\n\n                    <strong>\n                        Site de d\u00e9monstration\n                    <\/strong>\n\n                    <p>\n                        Les coordonn\u00e9es seront remplac\u00e9es\n                        par celles du professionnel\n                        lors de la personnalisation du site.\n                    <\/p>\n\n                <\/div>\n\n            <\/aside>\n\n\n            <!-- FORM -->\n\n            <div class=\"tjct-form-shell tjct-reveal\">\n\n                <div class=\"tjct-form-head\">\n\n                    <span class=\"tjct-kicker\">\n                        Demande de devis\n                    <\/span>\n\n                    <h2 class=\"tjct-form-title\">\n                        Parlez-nous de\n                        <span>votre ext\u00e9rieur.<\/span>\n                    <\/h2>\n\n                    <p class=\"tjct-form-subtitle\">\n                        Quelques informations suffisent\n                        pour comprendre votre besoin.\n                    <\/p>\n\n                <\/div>\n\n\n                <form\n                    class=\"tjct-form\"\n                    data-tjct-form>\n\n\n                    <div class=\"tjct-fields\">\n\n\n                        <div class=\"tjct-field\">\n\n                            <label for=\"tjct-name\">\n                                Nom *\n                            <\/label>\n\n                            <input\n                                id=\"tjct-name\"\n                                name=\"name\"\n                                type=\"text\"\n                                placeholder=\"Votre nom\"\n                                required>\n\n                        <\/div>\n\n\n                        <div class=\"tjct-field\">\n\n                            <label for=\"tjct-phone\">\n                                T\u00e9l\u00e9phone *\n                            <\/label>\n\n                            <input\n                                id=\"tjct-phone\"\n                                name=\"phone\"\n                                type=\"tel\"\n                                placeholder=\"Votre num\u00e9ro\"\n                                required>\n\n                        <\/div>\n\n\n                        <div class=\"tjct-field\">\n\n                            <label for=\"tjct-email\">\n                                E-mail\n                            <\/label>\n\n                            <input\n                                id=\"tjct-email\"\n                                name=\"email\"\n                                type=\"email\"\n                                placeholder=\"Votre adresse e-mail\">\n\n                        <\/div>\n\n\n                        <div class=\"tjct-field\">\n\n                            <label for=\"tjct-city\">\n                                Commune \/ code postal *\n                            <\/label>\n\n                            <input\n                                id=\"tjct-city\"\n                                name=\"city\"\n                                type=\"text\"\n                                placeholder=\"Votre commune\"\n                                required>\n\n                        <\/div>\n\n\n                        <div class=\"tjct-field tjct-field-full\">\n\n                            <label for=\"tjct-message\">\n                                Votre projet *\n                            <\/label>\n\n                            <textarea\n                                id=\"tjct-message\"\n                                name=\"message\"\n                                placeholder=\"D\u00e9crivez rapidement votre terrain, vos besoins et ce que vous souhaitez r\u00e9aliser...\"\n                                required><\/textarea>\n\n                        <\/div>\n\n                    <\/div>\n\n\n                    <div class=\"tjct-project-label\">\n                        Quel type de projet vous int\u00e9resse ?\n                    <\/div>\n\n\n                    <div class=\"tjct-project-grid\">\n\n\n                        <label class=\"tjct-project-option\">\n\n                            <input\n                                type=\"radio\"\n                                name=\"project\"\n                                value=\"creation\">\n\n                            <span>\n                                Cr\u00e9ation de jardin\n                            <\/span>\n\n                        <\/label>\n\n\n                        <label class=\"tjct-project-option\">\n\n                            <input\n                                type=\"radio\"\n                                name=\"project\"\n                                value=\"entretien\">\n\n                            <span>\n                                Entretien\n                            <\/span>\n\n                        <\/label>\n\n\n                        <label class=\"tjct-project-option\">\n\n                            <input\n                                type=\"radio\"\n                                name=\"project\"\n                                value=\"haies\">\n\n                            <span>\n                                Taille de haies\n                            <\/span>\n\n                        <\/label>\n\n\n                        <label class=\"tjct-project-option\">\n\n                            <input\n                                type=\"radio\"\n                                name=\"project\"\n                                value=\"elagage\">\n\n                            <span>\n                                \u00c9lagage\n                            <\/span>\n\n                        <\/label>\n\n\n                        <label class=\"tjct-project-option\">\n\n                            <input\n                                type=\"radio\"\n                                name=\"project\"\n                                value=\"gazon\">\n\n                            <span>\n                                Engazonnement\n                            <\/span>\n\n                        <\/label>\n\n\n                        <label class=\"tjct-project-option\">\n\n                            <input\n                                type=\"radio\"\n                                name=\"project\"\n                                value=\"amenagement\">\n\n                            <span>\n                                Am\u00e9nagement\n                            <\/span>\n\n                        <\/label>\n\n\n                        <label class=\"tjct-project-option\">\n\n                            <input\n                                type=\"radio\"\n                                name=\"project\"\n                                value=\"terrasse\">\n\n                            <span>\n                                Terrasse &#038; all\u00e9es\n                            <\/span>\n\n                        <\/label>\n\n\n                        <label class=\"tjct-project-option\">\n\n                            <input\n                                type=\"radio\"\n                                name=\"project\"\n                                value=\"cloture\">\n\n                            <span>\n                                Cl\u00f4tures\n                            <\/span>\n\n                        <\/label>\n\n                    <\/div>\n\n\n                    <div class=\"tjct-form-footer\">\n\n                        <p class=\"tjct-form-help\">\n                            En envoyant ce formulaire,\n                            vos informations servent uniquement\n                            \u00e0 r\u00e9pondre \u00e0 votre demande.\n                        <\/p>\n\n\n                        <button\n                            class=\"tjct-btn tjct-btn-gold tjct-submit\"\n                            type=\"submit\">\n\n                            Envoyer ma demande\n                            <span class=\"tjct-arrow\">\u2192<\/span>\n\n                        <\/button>\n\n                    <\/div>\n\n\n                    <div\n                        class=\"tjct-form-message\"\n                        data-tjct-message>\n\n                        Cette d\u00e9monstration pr\u00e9sente\n                        le fonctionnement visuel du formulaire.\n                        Lors de la mise en ligne d\u00e9finitive,\n                        celui-ci pourra \u00eatre reli\u00e9 \u00e0 WPForms\n                        pour envoyer r\u00e9ellement les demandes.\n\n                    <\/div>\n\n                <\/form>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- ============================================================\n     TYPES DE DEMANDES\n============================================================ -->\n\n<section class=\"tjct-section tjct-needs\">\n\n    <div class=\"tjct-container\">\n\n\n        <div class=\"tjct-needs-head\">\n\n\n            <div class=\"tjct-reveal\">\n\n                <span class=\"tjct-kicker\">\n                    Votre besoin\n                <\/span>\n\n                <h2 class=\"tjct-title\">\n                    Vous pouvez nous contacter\n                    <span>pour diff\u00e9rents projets.<\/span>\n                <\/h2>\n\n            <\/div>\n\n\n            <p class=\"tjct-text tjct-reveal\">\n                Une intervention ponctuelle\n                ou un am\u00e9nagement complet :\n                commencez simplement par nous pr\u00e9senter\n                votre besoin.\n            <\/p>\n\n        <\/div>\n\n\n        <div class=\"tjct-needs-grid\">\n\n\n            <article class=\"tjct-need tjct-reveal\">\n\n                <div class=\"tjct-need-icon\">\n\n                    <svg\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.7\">\n\n                        <path d=\"M12 21V9\"\/>\n\n                        <path\n                            d=\"M12 13C8 13 5 10 5 6c4 0 7 3 7 7Z\"\/>\n\n                        <path\n                            d=\"M12 10c0-4 3-7 7-7 0 4-3 7-7 7Z\"\/>\n\n                    <\/svg>\n\n                <\/div>\n\n                <span>\n                    01\n                <\/span>\n\n                <h3>\n                    Cr\u00e9er un jardin\n                <\/h3>\n\n                <p>\n                    Repenser compl\u00e8tement\n                    un ext\u00e9rieur ou am\u00e9nager\n                    un nouveau terrain.\n                <\/p>\n\n            <\/article>\n\n\n            <article class=\"tjct-need tjct-reveal\">\n\n                <div class=\"tjct-need-icon\">\n\n                    <svg\n                        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>\n                    02\n                <\/span>\n\n                <h3>\n                    Entretenir\n                <\/h3>\n\n                <p>\n                    Tonte, haies, v\u00e9g\u00e9tation\n                    et entretien courant.\n                <\/p>\n\n            <\/article>\n\n\n            <article class=\"tjct-need tjct-reveal\">\n\n                <div class=\"tjct-need-icon\">\n\n                    <svg\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.7\">\n\n                        <rect\n                            x=\"4\"\n                            y=\"4\"\n                            width=\"16\"\n                            height=\"16\"\n                            rx=\"2\"\/>\n\n                        <path d=\"M4 12h16\"\/>\n                        <path d=\"M12 4v16\"\/>\n\n                    <\/svg>\n\n                <\/div>\n\n                <span>\n                    03\n                <\/span>\n\n                <h3>\n                    Am\u00e9nager\n                <\/h3>\n\n                <p>\n                    Terrasse, all\u00e9es,\n                    espaces de circulation\n                    et organisation du terrain.\n                <\/p>\n\n            <\/article>\n\n\n            <article class=\"tjct-need tjct-reveal\">\n\n                <div class=\"tjct-need-icon\">\n\n                    <svg\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.7\">\n\n                        <circle cx=\"12\" cy=\"10\" r=\"3\"\/>\n\n                        <path\n                            d=\"M12 21s7-6 7-12a7 7 0 1 0-14 0c0 6 7 12 7 12Z\"\/>\n\n                    <\/svg>\n\n                <\/div>\n\n                <span>\n                    04\n                <\/span>\n\n                <h3>\n                    V\u00e9rifier la zone\n                <\/h3>\n\n                <p>\n                    Confirmer simplement\n                    si votre commune fait partie\n                    du secteur d&rsquo;intervention.\n                <\/p>\n\n            <\/article>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- ============================================================\n     PROCESS\n============================================================ -->\n\n<section\n    class=\"tjct-section tjct-process\"\n    data-tjct-process>\n\n    <div class=\"tjct-container\">\n\n        <div class=\"tjct-reveal\">\n\n            <span class=\"tjct-kicker\">\n                Votre demande\n            <\/span>\n\n            <h2 class=\"tjct-title\">\n                Un premier \u00e9change\n                <span>simple et clair.<\/span>\n            <\/h2>\n\n            <p class=\"tjct-text\">\n                Quelques \u00e9tapes suffisent\n                pour commencer \u00e0 \u00e9tudier\n                votre projet ext\u00e9rieur.\n            <\/p>\n\n        <\/div>\n\n\n        <div class=\"tjct-process-wrap\">\n\n            <div class=\"tjct-process-line\">\n\n                <div class=\"tjct-process-progress\"><\/div>\n\n            <\/div>\n\n\n            <div class=\"tjct-process-grid\">\n\n\n                <article class=\"tjct-step\">\n\n                    <div class=\"tjct-step-number\">\n                        01\n                    <\/div>\n\n                    <h3>\n                        Votre demande\n                    <\/h3>\n\n                    <p>\n                        Pr\u00e9sentez votre besoin\n                        et votre commune.\n                    <\/p>\n\n                <\/article>\n\n\n                <article class=\"tjct-step\">\n\n                    <div class=\"tjct-step-number\">\n                        02\n                    <\/div>\n\n                    <h3>\n                        Premier \u00e9change\n                    <\/h3>\n\n                    <p>\n                        Les informations principales\n                        sont pr\u00e9cis\u00e9es.\n                    <\/p>\n\n                <\/article>\n\n\n                <article class=\"tjct-step\">\n\n                    <div class=\"tjct-step-number\">\n                        03\n                    <\/div>\n\n                    <h3>\n                        \u00c9tude\n                    <\/h3>\n\n                    <p>\n                        Le terrain et les travaux\n                        sont \u00e9tudi\u00e9s.\n                    <\/p>\n\n                <\/article>\n\n\n                <article class=\"tjct-step\">\n\n                    <div class=\"tjct-step-number\">\n                        04\n                    <\/div>\n\n                    <h3>\n                        Devis\n                    <\/h3>\n\n                    <p>\n                        Une proposition peut ensuite\n                        \u00eatre pr\u00e9par\u00e9e.\n                    <\/p>\n\n                <\/article>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- ============================================================\n     ZONE\n============================================================ -->\n\n<section class=\"tjct-section tjct-zone\">\n\n    <div class=\"tjct-container\">\n\n        <div class=\"tjct-zone-grid\">\n\n\n            <div class=\"tjct-zone-map tjct-reveal\">\n\n                <iframe\n                    src=\"https:\/\/www.google.com\/maps?q=France&#038;z=5&#038;output=embed\"\n                    loading=\"lazy\"\n                    referrerpolicy=\"no-referrer-when-downgrade\"\n                    title=\"Zone d'intervention Terra Jardin\">\n                <\/iframe>\n\n\n                <div class=\"tjct-zone-overlay\">\n\n                    <strong>\n                        Zone d&rsquo;intervention personnalisable\n                    <\/strong>\n\n                    <span>\n                        La carte sera centr\u00e9e\n                        sur la ville du futur paysagiste.\n                    <\/span>\n\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"tjct-reveal\">\n\n                <span class=\"tjct-kicker\">\n                    O\u00f9 intervenons-nous ?\n                <\/span>\n\n                <h2 class=\"tjct-title\">\n                    Votre projet commence\n                    <span>par votre localisation.<\/span>\n                <\/h2>\n\n                <p class=\"tjct-text\">\n                    Indiquez simplement votre commune\n                    ou votre code postal dans le formulaire.\n                    La possibilit\u00e9 d&rsquo;intervention\n                    pourra ensuite \u00eatre confirm\u00e9e.\n                <\/p>\n\n\n                <div class=\"tjct-zone-points\">\n\n\n                    <div class=\"tjct-zone-point\">\n\n                        <div class=\"tjct-zone-check\">\n                            \u2713\n                        <\/div>\n\n                        <div>\n\n                            <strong>\n                                Secteur principal\n                            <\/strong>\n\n                            <span>\n                                Ville principale\n                                et communes voisines.\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n\n                    <div class=\"tjct-zone-point\">\n\n                        <div class=\"tjct-zone-check\">\n                            \u2713\n                        <\/div>\n\n                        <div>\n\n                            <strong>\n                                Secteur \u00e9largi\n                            <\/strong>\n\n                            <span>\n                                Selon le type\n                                et l&rsquo;importance du chantier.\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n\n                    <div class=\"tjct-zone-point\">\n\n                        <div class=\"tjct-zone-check\">\n                            \u2713\n                        <\/div>\n\n                        <div>\n\n                            <strong>\n                                Projet sp\u00e9cifique\n                            <\/strong>\n\n                            <span>\n                                Une demande plus \u00e9loign\u00e9e\n                                peut \u00eatre \u00e9tudi\u00e9e.\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/div>\n\n\n                <div style=\"margin-top:28px;\">\n\n                    <a\n                        class=\"tjct-btn tjct-btn-gold\"\n                        href=\"\/paysagiste\/zones-intervention\/\">\n\n                        Voir les zones d&rsquo;intervention\n                        <span class=\"tjct-arrow\">\u2192<\/span>\n\n                    <\/a>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- ============================================================\n     FAQ\n============================================================ -->\n\n<section class=\"tjct-section tjct-faq\">\n\n    <div class=\"tjct-container\">\n\n        <div class=\"tjct-faq-grid\">\n\n\n            <div class=\"tjct-faq-intro tjct-reveal\">\n\n                <span class=\"tjct-kicker\">\n                    Questions fr\u00e9quentes\n                <\/span>\n\n                <h2 class=\"tjct-title\">\n                    Avant votre\n                    <span>demande.<\/span>\n                <\/h2>\n\n                <p class=\"tjct-text\">\n                    Les principales informations\n                    utiles avant de transmettre\n                    votre projet.\n                <\/p>\n\n            <\/div>\n\n\n            <div class=\"tjct-faq-list\">\n\n\n                <details class=\"tjct-faq-item tjct-reveal\">\n\n                    <summary>\n                        Quelles informations faut-il fournir ?\n                    <\/summary>\n\n                    <div class=\"tjct-faq-answer\">\n                        Votre commune, le type de travaux souhait\u00e9\n                        et quelques d\u00e9tails sur votre ext\u00e9rieur\n                        suffisent pour une premi\u00e8re demande.\n                    <\/div>\n\n                <\/details>\n\n\n                <details class=\"tjct-faq-item tjct-reveal\">\n\n                    <summary>\n                        Puis-je envoyer une demande pour plusieurs travaux ?\n                    <\/summary>\n\n                    <div class=\"tjct-faq-answer\">\n                        Oui. Vous pouvez pr\u00e9senter plusieurs besoins\n                        dans le m\u00eame message, par exemple\n                        une terrasse, de l&rsquo;engazonnement\n                        et des plantations.\n                    <\/div>\n\n                <\/details>\n\n\n                <details class=\"tjct-faq-item tjct-reveal\">\n\n                    <summary>\n                        Dois-je conna\u00eetre pr\u00e9cis\u00e9ment mon projet ?\n                    <\/summary>\n\n                    <div class=\"tjct-faq-answer\">\n                        Non. Vous pouvez simplement expliquer\n                        ce que vous souhaitez am\u00e9liorer\n                        dans votre ext\u00e9rieur.\n                    <\/div>\n\n                <\/details>\n\n\n                <details class=\"tjct-faq-item tjct-reveal\">\n\n                    <summary>\n                        Puis-je joindre des photos ?\n                    <\/summary>\n\n                    <div class=\"tjct-faq-answer\">\n                        Le formulaire d\u00e9finitif pourra \u00eatre configur\u00e9\n                        avec WPForms afin d&rsquo;accepter\n                        des photos du terrain ou du jardin.\n                    <\/div>\n\n                <\/details>\n\n\n                <details class=\"tjct-faq-item tjct-reveal\">\n\n                    <summary>\n                        Comment savoir si vous intervenez dans ma commune ?\n                    <\/summary>\n\n                    <div class=\"tjct-faq-answer\">\n                        Indiquez votre commune\n                        dans votre demande ou consultez\n                        la page Zones d&rsquo;intervention.\n                    <\/div>\n\n                <\/details>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- ============================================================\n     FINAL\n============================================================ -->\n\n<section class=\"tjct-final\">\n\n    <div class=\"tjct-container\">\n\n        <div class=\"tjct-final-box tjct-reveal\">\n\n            <div class=\"tjct-final-content\">\n\n                <span class=\"tjct-kicker\">\n                    Terra Jardin\n                <\/span>\n\n                <h2>\n                    Votre ext\u00e9rieur commence\n                    <span>par une id\u00e9e.<\/span>\n                <\/h2>\n\n                <p>\n                    Dites-nous simplement ce que vous imaginez\n                    pour votre jardin et commencez\n                    \u00e0 donner forme \u00e0 votre projet.\n                <\/p>\n\n\n                <div class=\"tjct-final-actions\">\n\n                    <a\n                        class=\"tjct-btn tjct-btn-gold\"\n                        href=\"#demande\">\n\n                        Demander un devis\n                        <span>\u2191<\/span>\n\n                    <\/a>\n\n\n                    <a\n                        class=\"tjct-btn tjct-btn-light\"\n                        href=\"\/paysagiste\/realisations\/\">\n\n                        Voir les r\u00e9alisations\n                        <span class=\"tjct-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 initTerraContact(){\n\n    var root =\n        document.querySelector(\n            \".tjct-page\"\n        );\n\n\n    if(!root){\n        return;\n    }\n\n\n    var reduced = false;\n\n\n    try{\n\n        reduced =\n            window.matchMedia(\n                \"(prefers-reduced-motion: reduce)\"\n            ).matches;\n\n    }catch(error){\n\n        reduced = false;\n\n    }\n\n\n\n    \/* ========================================================\n       REVEAL SAFE\n    ======================================================== *\/\n\n    try{\n\n        var items =\n            root.querySelectorAll(\n                \".tjct-reveal\"\n            );\n\n\n        if(\n            reduced ||\n            !(\"IntersectionObserver\" in window)\n        ){\n\n            items.forEach(\n                function(item){\n\n                    item.classList.add(\n                        \"tjct-visible\"\n                    );\n\n                }\n            );\n\n        }else{\n\n\n            var viewport =\n                window.innerHeight ||\n                document.documentElement.clientHeight;\n\n\n            items.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                            \"tjct-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                                            \"tjct-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 -40px 0px\"\n                    }\n\n                );\n\n\n            items.forEach(\n                function(item){\n\n                    observer.observe(\n                        item\n                    );\n\n                }\n            );\n\n\n            root.classList.add(\n                \"tjct-motion-ready\"\n            );\n\n        }\n\n    }catch(error){\n\n        root.classList.remove(\n            \"tjct-motion-ready\"\n        );\n\n    }\n\n\n\n    \/* ========================================================\n       HERO PARALLAX\n    ======================================================== *\/\n\n    try{\n\n        var hero =\n            root.querySelector(\n                \".tjct-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\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\n                return;\n            }\n\n\n            var shift =\n                Math.max(\n                    -45,\n\n                    Math.min(\n                        45,\n                        -rect.top * .075\n                    )\n                );\n\n\n            hero.style.setProperty(\n                \"--tjct-parallax\",\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 = 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        \/* aucun impact critique *\/\n\n    }\n\n\n\n    \/* ========================================================\n       FORMULAIRE MODE DEMO\n    ======================================================== *\/\n\n    try{\n\n        var form =\n            root.querySelector(\n                \"[data-tjct-form]\"\n            );\n\n\n        var formMessage =\n            root.querySelector(\n                \"[data-tjct-message]\"\n            );\n\n\n        if(form){\n\n            form.addEventListener(\n                \"submit\",\n                function(event){\n\n                    event.preventDefault();\n\n\n                    if(\n                        typeof form.checkValidity ===\n                        \"function\"\n                        &&\n                        !form.checkValidity()\n                    ){\n\n                        form.reportValidity();\n\n                        return;\n                    }\n\n\n                    if(formMessage){\n\n                        formMessage.classList.add(\n                            \"tjct-show\"\n                        );\n\n\n                        formMessage.scrollIntoView(\n                            {\n                                behavior:\n                                    reduced\n                                    ? \"auto\"\n                                    : \"smooth\",\n\n                                block:\"nearest\"\n                            }\n                        );\n\n                    }\n\n                }\n            );\n\n        }\n\n    }catch(error){\n\n        \/* aucun impact critique *\/\n\n    }\n\n\n\n    \/* ========================================================\n       TIMELINE\n    ======================================================== *\/\n\n    try{\n\n        var process =\n            root.querySelector(\n                \"[data-tjct-process]\"\n            );\n\n\n        if(!process){\n            return;\n        }\n\n\n        var steps =\n            process.querySelectorAll(\n                \".tjct-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 progress =\n                (\n                    viewport * .78 -\n                    rect.top\n                )\n                \/\n                Math.max(\n                    rect.height +\n                    viewport * .2,\n                    1\n                );\n\n\n            progress =\n                clamp(\n                    progress,\n                    0,\n                    1\n                );\n\n\n            process.style.setProperty(\n                \"--tjct-progress\",\n                progress.toFixed(4)\n            );\n\n\n            var thresholds =\n                [\n                    .03,\n                    .32,\n                    .62,\n                    .88\n                ];\n\n\n            steps.forEach(\n                function(step,index){\n\n                    step.classList.toggle(\n                        \"tjct-active\",\n                        progress >=\n                        thresholds[index]\n                    );\n\n                }\n            );\n\n        }\n\n\n        function requestProcess(){\n\n            if(ticking){\n                return;\n            }\n\n\n            ticking = true;\n\n\n            requestAnimationFrame(\n                updateProcess\n            );\n\n        }\n\n\n        if(reduced){\n\n            process.style.setProperty(\n                \"--tjct-progress\",\n                \"1\"\n            );\n\n\n            steps.forEach(\n                function(step){\n\n                    step.classList.add(\n                        \"tjct-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        \/* page toujours visible *\/\n\n    }\n\n}\n\n\n\nif(\n    document.readyState ===\n    \"loading\"\n){\n\n    document.addEventListener(\n        \"DOMContentLoaded\",\n        initTerraContact\n    );\n\n}else{\n\n    initTerraContact();\n\n}\n\n})();\n<\/script>\n\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Contact &#038; devis Parlons de votre projet ext\u00e9rieur. Cr\u00e9ation de jardin, entretien, terrasse, engazonnement, taille ou am\u00e9nagement : pr\u00e9sentez-nous simplement votre besoin pour commencer \u00e0 imaginer votre projet. Demander un devis \u2193 Voir les r\u00e9alisations \u2192 Nous contacter Une question ? Un projet ? Envoyez quelques informations sur votre besoin afin de pr\u00e9parer au mieux [&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-39","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\/39","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=39"}],"version-history":[{"count":2,"href":"https:\/\/demo.jouglet-web.fr\/paysagiste\/wp-json\/wp\/v2\/pages\/39\/revisions"}],"predecessor-version":[{"id":92,"href":"https:\/\/demo.jouglet-web.fr\/paysagiste\/wp-json\/wp\/v2\/pages\/39\/revisions\/92"}],"wp:attachment":[{"href":"https:\/\/demo.jouglet-web.fr\/paysagiste\/wp-json\/wp\/v2\/media?parent=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}