@font-face{font-family:"Bricolage Grotesque";font-weight:700;font-display:swap;src:url(fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:800;font-display:swap;src:url(fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:400;font-display:swap;src:url(fonts/figtree-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:600;font-display:swap;src:url(fonts/figtree-latin-600-normal.woff2) format("woff2")}
:root{--forest:#0e2a18;--forest2:#143a22;--grass:#2f7d34;--leaf:#64b046;--leaf-l:#9bd67a;--water:#2896d2;--water-l:#8fd0f2;--cream:#f2f6ec;--ink:#0c2014;--mute:#5b7160;
--disp:"Bricolage Grotesque","Arial Black",sans-serif;--sans:Figtree,system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}html,body{overflow-x:clip}
body{font:400 18px/1.6 var(--sans);color:var(--ink);background:var(--cream);-webkit-text-size-adjust:100%}
a{color:inherit}.mono{font-family:var(--sans);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:10px 14px;z-index:99}.skip:focus{left:8px}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.todo{background:#ffe9a8;color:#4a3a00;padding:0 4px;font:600 .78em var(--sans)}
:focus-visible{outline:3px solid var(--water);outline-offset:3px}

.top{position:fixed;inset:0 0 auto 0;z-index:60;height:70px;display:flex;align-items:center;gap:16px;padding:0 22px;background:rgba(14,42,24,.9);backdrop-filter:blur(6px);color:#fff}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.brand svg{width:38px;height:38px}.brand span{display:flex;flex-direction:column;line-height:1}
.brand b{font:800 22px var(--disp);letter-spacing:.06em}.brand i{font:600 11px var(--sans);font-style:normal;color:var(--leaf-l);text-transform:uppercase;letter-spacing:.12em;margin-top:3px}
#nav{display:flex;gap:4px;margin-left:auto}
#nav a{padding:0 14px;min-height:44px;display:grid;place-items:center;text-decoration:none;font:600 15px var(--sans)}
#nav a:hover{color:var(--leaf-l)}
.h-tel{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;background:var(--leaf);color:var(--forest);text-decoration:none;font:800 18px var(--disp);border-radius:24px 24px 24px 4px;white-space:nowrap}
.h-tel .lbl{font:600 11px var(--sans);text-transform:uppercase;letter-spacing:.1em}.h-tel:hover{background:var(--leaf-l)}
.burger{display:none;width:44px;height:44px;border:2px solid var(--leaf);background:none;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;align-items:center;border-radius:50%}
.burger i{display:block;width:20px;height:3px;background:var(--leaf)}

.hero{position:relative;min-height:100svh;background:linear-gradient(#0a2013,var(--forest) 55%,#173f25);color:#fff;display:flex;align-items:center;padding:100px 22px 90px;overflow:hidden}
#spray{position:absolute;inset:0;width:100%;height:100%}
.hero-in{position:relative;z-index:2;max-width:1180px;width:100%;margin:0 auto}
.gps{color:var(--water-l);margin-bottom:14px}
.kicker{font:600 14px var(--sans);text-transform:uppercase;letter-spacing:.14em;color:var(--leaf-l)}
h1{font:800 min(10.5vw,136px)/.92 var(--disp);letter-spacing:-.025em;margin:16px 0 24px}
h1 .ln{display:block;overflow:hidden;padding:.1em 0;margin:-.1em 0}
h1 .ln>span{display:block;transform:translateY(110%);animation:up .9s cubic-bezier(.2,.8,.2,1) .2s forwards}
h1 .ln:nth-child(2)>span{animation-delay:.34s}h1 .ln:nth-child(3)>span{animation-delay:.48s}
h1 em{font-style:normal;color:var(--water-l)}
@keyframes up{to{transform:none}}
.lead{max-width:32em;font-size:clamp(18px,2vw,22px);color:#dbe9d6}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:14px;min-height:58px;padding:0 30px;background:var(--leaf);color:var(--forest);border:2px solid var(--leaf);text-decoration:none;cursor:pointer;font:700 16px var(--sans);border-radius:30px 30px 30px 6px;transition:background .2s,transform .2s}
.btn b{font:800 26px var(--disp);white-space:nowrap}.btn:hover{background:var(--leaf-l);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:#fff;border-color:#fff}.btn.ghost:hover{background:#fff;color:var(--forest)}
.btn.ghost-d{background:transparent;color:var(--forest);border-color:var(--forest)}.btn.ghost-d:hover{background:var(--forest);color:#fff}
.scroll{position:absolute;z-index:2;bottom:22px;left:50%;transform:translateX(-50%);color:var(--water-l)}

.band{background:var(--leaf);color:var(--forest);overflow:hidden;white-space:nowrap;border-block:2px solid var(--forest)}
.band-in{display:inline-flex;gap:0;animation:mq 28s linear infinite}
.band span{font:800 clamp(28px,4vw,48px)/1 var(--disp);text-transform:uppercase;padding:16px 28px}
.band span::after{content:"";display:inline-block;width:.5em;height:.7em;margin-left:56px;background:var(--water);border-radius:50% 50% 50% 50%/65% 65% 35% 35%;transform:rotate(180deg)}
.band2{background:var(--water);border-color:var(--forest)}.band2 span::after{background:var(--forest)}
@keyframes mq{to{transform:translateX(-50%)}}

.say{background:var(--forest);color:#fff;padding:100px 0}
.st{font:800 clamp(38px,7vw,96px)/1 var(--disp);letter-spacing:-.02em;margin:0 0 .5em;max-width:14em}
.st:nth-child(2){margin-left:min(14vw,160px)}.st em{font-style:normal;color:var(--water-l)}
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s}.rv.in{opacity:1;transform:none}

.sec{font:700 14px var(--sans);text-transform:uppercase;letter-spacing:.14em;color:var(--grass);display:flex;align-items:center;gap:10px}
.sec::before{content:"";width:12px;height:16px;background:var(--water);border-radius:50% 50% 50% 50%/65% 65% 35% 35%;transform:rotate(180deg)}
.big{font:800 clamp(46px,8vw,108px)/.95 var(--disp);letter-spacing:-.025em;color:var(--forest);margin:14px 0 0}
.services{padding:100px 0}
.cards{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:50px}
.card{background:#fff;border:2px solid var(--forest);padding:26px 22px 28px;border-radius:30px 30px 30px 6px;display:flex;flex-direction:column;min-height:300px}
.card:nth-child(2){background:var(--leaf-l)}.card:nth-child(3){background:var(--water-l)}.card:nth-child(4){background:#fff}
.no{font:800 54px/1 var(--disp);color:var(--grass);margin-bottom:30px}.card:nth-child(3) .no{color:var(--forest)}
.card h3{font:800 26px/1.05 var(--disp);margin:24px 0 8px}.card p{font-size:16px}

.garden{background:var(--forest2);color:#fff;padding:100px 0}
.garden .big{color:#fff}.garden .sec{color:var(--leaf-l)}
.p-big{margin:20px 0 0;max-width:30em;font-size:20px}
.lab{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:34px;margin-top:40px;align-items:center}
.plan{margin:0}.plan svg{width:100%;height:auto;display:block;border:2px solid #2a5a38}
.plan figcaption{color:var(--leaf-l);margin-top:8px}
.zone{cursor:pointer;outline:0}
.zone .area{fill:#bba886;stroke:#0e2a18;stroke-width:2;transition:fill .9s}
.zone.on .area{fill:#3f9a3a}
.zone[data-z=terrasse] .area{fill:#a9a49a}.zone[data-z=terrasse].on .area{fill:#8cb9a3}
.zone[data-z=potager] .area{fill:#8a6a4a}.zone[data-z=potager].on .area{fill:#4a7a3a}
.zone text{font:700 16px Figtree,sans-serif;fill:#e8f2e1}
.tiles path,.rows path{stroke:rgba(0,0,0,.25);stroke-width:3;fill:none}
.hedge circle{fill:#4d6b3c;transition:fill .9s}.zone.on .hedge circle{fill:#2fa03a}
.zone:focus-visible .area{stroke:var(--water-l);stroke-width:4}
.spr .dot{fill:#fff}.ring{fill:none;stroke:var(--water-l);stroke-width:3;opacity:0}
.zone.on .ring{animation:ring 2.2s ease-out infinite}.zone.on .r2{animation-delay:1.1s}
@keyframes ring{0%{r:8;opacity:.95}100%{r:70;opacity:0}}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opts button{min-height:48px;padding:0 20px;background:transparent;color:#fff;border:2px solid #fff;border-radius:24px 24px 24px 4px;font:700 16px var(--sans);cursor:pointer}
.opts button[aria-pressed=true]{background:var(--water);border-color:var(--water);color:var(--forest)}
.sum{margin:20px 0;color:var(--leaf-l);min-height:3em}
.ctrl .btn{margin-top:10px;width:100%;justify-content:center}
.ctrl .ghost-d{color:#fff;border-color:#fff}.ctrl .ghost-d:hover{background:#fff;color:var(--forest)}

.works{padding:100px 0}
.shots{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px}
.ph{aspect-ratio:4/3;background:repeating-linear-gradient(45deg,#e1ead8,#e1ead8 12px,#d4e0c9 12px,#d4e0c9 24px);border:2px solid var(--forest);border-radius:30px 30px 30px 6px;display:grid;place-items:center;font:800 18px var(--disp);color:var(--mute)}
.shot h3{font:800 24px var(--disp);margin:14px 0 2px}.shot .mono{color:var(--mute)}

.contact{padding:100px 0;background:#e6efdc;border-top:2px solid var(--forest)}
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.phone{display:inline-flex;align-items:center;min-height:64px;margin:16px 0 8px;font:800 clamp(40px,6.5vw,72px)/1 var(--disp);color:var(--grass);text-decoration:none}
.phone:hover{color:var(--forest);text-decoration:underline;text-decoration-thickness:4px}
address{font-style:normal;margin:8px 0}address a{color:var(--grass);font-weight:600}
form{background:#fff;padding:30px;border:2px solid var(--forest);border-radius:30px 30px 30px 6px}
label{display:block;font:700 12px var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--grass);margin:18px 0 4px}label:first-of-type{margin-top:0}
input[type=text],input[type=tel],select,textarea{width:100%;min-height:48px;padding:10px 4px;font:400 18px var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:3px solid #cfdcc4;border-radius:0}
input:focus,select:focus,textarea:focus{outline:0;border-bottom-color:var(--water)}
.hp{position:absolute;left:-9999px}form .btn{margin-top:24px;width:100%;justify-content:center}
.form-msg{margin-top:14px;font-size:16px;min-height:1.4em}.form-msg.ok{color:#17653c}.form-msg.err{color:#a02020}.form-msg.info{color:var(--mute)}
footer{background:var(--forest);color:#cfe3c8;padding:34px 22px;font-size:15px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 30px}
footer a{color:#fff;display:inline-block;padding:10px 0}
.legal-page{background:#fff}.legal{max-width:760px;margin:0 auto;padding:40px 22px 80px}
.legal h1{font:800 44px/1 var(--disp);color:var(--forest);margin:20px 0}.legal h2{font:800 24px var(--disp);margin:26px 0 6px}.legal p{margin-bottom:10px}.draft{background:#ffe9a8;padding:12px 14px}

@media(max-width:960px){
 #nav{position:fixed;inset:70px 0 auto 0;margin:0;flex-direction:column;background:var(--forest);padding:8px 22px 20px;transform:translateY(-130%);transition:transform .3s}
 #nav.open{transform:none}#nav a{place-items:start;font-size:18px;border-bottom:1px solid #2a5a38}
 .burger{display:flex}.h-tel{margin-left:auto}
 .cards{grid-template-columns:1fr 1fr}.lab,.ct-grid{grid-template-columns:1fr}.shots{grid-template-columns:1fr}
 h1{font-size:min(15vw,110px)}
}
@media(max-width:520px){
 h1{font-size:12.6vw}
 .top{gap:8px;padding:0 14px}.brand b{font-size:18px}.brand i{font-size:9px;letter-spacing:.06em}.brand svg{width:32px;height:32px}
 .h-tel .lbl{display:none}.h-tel{font-size:16px;padding:0 12px}.cards{grid-template-columns:1fr}.card{min-height:220px}
 .btn{padding:0 22px;font-size:15px}.btn b{font-size:23px}form{padding:22px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}h1 .ln>span{animation:none;transform:none}.rv{opacity:1;transform:none;transition:none}.band-in{animation:none}.zone.on .ring{animation:none;opacity:.6;r:30}}