:root{--vert:#1c3326;--vert2:#24412f;--creme:#f3ecdc;--creme2:#eae2cf;--or:#c9a96a;--sauge:#9fb09a;--encre:#1c3326;--gris:#5f6d5a}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--encre);font-family:"Jost",system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit}
.serif{font-family:"Playfair Display",Didot,serif;font-weight:400}
.cap{font-size:12px;letter-spacing:.3em;text-transform:uppercase}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
/* barre */
.top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px 22px;color:var(--creme);transition:.3s;background:linear-gradient(rgba(28,51,38,.75),rgba(28,51,38,0))}
.top.on{background:rgba(28,51,38,.96);box-shadow:0 2px 20px rgba(0,0,0,.15)}
.top .logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.top .logo img{width:40px;height:40px;border-radius:50%}
.top .logo span{font-family:"Playfair Display",serif;letter-spacing:.22em;text-transform:uppercase;font-size:15px}
.top nav a{text-decoration:none;font-size:12px;letter-spacing:.22em;text-transform:uppercase;margin-left:22px;opacity:.9}
.top nav a:hover{opacity:1;color:var(--or)}
.top .tel{display:inline-block;border:1px solid var(--or);color:var(--or);padding:8px 14px;text-decoration:none;font-size:13px;letter-spacing:.14em;white-space:nowrap}
.top .tel:hover{background:var(--or);color:var(--vert)}
@media (max-width:860px){.top nav{display:none}}
/* hero */
.hero{position:relative;background:var(--vert);color:var(--creme);overflow:hidden;min-height:100svh;display:flex;align-items:center}
.hero .bg{position:absolute;inset:0;background:url(../img/hero_terrasses_portrait.jpg) center 35%/cover no-repeat;opacity:.55;filter:saturate(.9)}
.hero .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,51,38,.96) 0%,rgba(28,51,38,.85) 45%,rgba(28,51,38,.35) 100%)}
.hero .g{position:absolute;right:-120px;bottom:-80px;width:min(820px,110vw);opacity:.12;pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-top:110px;padding-bottom:70px}
.hero h1{font-family:"Playfair Display",serif;font-weight:400;font-size:clamp(34px,5.2vw,64px);line-height:1.08;margin:0 0 20px;letter-spacing:.01em}
.hero h1 em{font-style:italic;color:var(--or)}
.hero .lead{font-size:18px;max-width:520px;color:#dcd6c6;margin:0 0 30px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 22px;text-decoration:none;font-size:13px;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--or);color:var(--vert);background:var(--or);transition:.2s}
.btn:hover{background:#d9bb80}
.btn.ghost{background:transparent;color:var(--creme);border-color:rgba(243,236,220,.55)}
.btn.ghost:hover{border-color:var(--creme)}
.btn svg{width:18px;height:18px;fill:currentColor}
.hero .brand{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.hero .brand .f{width:40px;height:1.5px;background:var(--or)}
.hero .brand span{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--or)}
.phone{justify-self:center;width:min(320px,78vw);aspect-ratio:9/16;border-radius:28px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(201,169,106,.35);position:relative;background:#000}
.phone video{width:100%;height:100%;object-fit:cover;display:block}
.phone button{position:absolute;right:14px;bottom:14px;background:rgba(28,51,38,.7);border:1px solid rgba(243,236,220,.5);color:var(--creme);border-radius:999px;padding:8px 14px;font:inherit;font-size:11px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(6px)}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;gap:34px;padding-top:96px}.hero .bg{background-position:center 20%}.phone{width:min(280px,70vw)}}
/* sections */
section{padding:88px 0}
.k{color:var(--or);margin-bottom:14px}
h2{font-family:"Playfair Display",serif;font-weight:400;font-size:clamp(28px,3.6vw,44px);line-height:1.15;margin:0 0 18px;letter-spacing:.01em}
.intro{font-size:18px;max-width:640px;color:var(--gris);margin:0 0 40px}
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.sv{background:#fff;border:1px solid rgba(28,51,38,.1);padding:30px 28px 28px;position:relative;overflow:hidden}
.sv::after{content:"";position:absolute;left:28px;right:28px;bottom:0;height:3px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:.35s}
.sv:hover::after{transform:scaleX(1)}
.sv .n{font-family:"Playfair Display",serif;font-size:13px;letter-spacing:.3em;color:var(--or);margin-bottom:12px}
.sv h3{font-family:"Playfair Display",serif;font-weight:400;font-size:24px;margin:0 0 10px}
.sv p{margin:0;color:var(--gris);font-size:15.5px}
/* méthode (fond vert) */
.methode{background:var(--vert);color:var(--creme);position:relative;overflow:hidden}
.methode .g{position:absolute;left:-140px;top:-60px;width:min(760px,100vw);opacity:.1;pointer-events:none}
.methode .wrap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.methode .intro{color:#cfd7c6}
.methode img.ph{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.pts{list-style:none;margin:0;padding:0}
.pts li{display:grid;grid-template-columns:54px 1fr;gap:16px;padding:20px 0;border-top:1px solid rgba(243,236,220,.15)}
.pts li:last-child{border-bottom:1px solid rgba(243,236,220,.15)}
.pts .num{font-family:"Playfair Display",serif;font-size:30px;color:var(--or);line-height:1}
.pts b{display:block;font-weight:500;font-size:17px;margin-bottom:4px}
.pts span{color:#cfd7c6;font-size:15px}
@media (max-width:860px){.methode .wrap{grid-template-columns:1fr}}
/* galerie */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gal figure{margin:0;position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--creme2)}
.gal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.gal figure:hover img{transform:scale(1.04)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 16px;background:linear-gradient(transparent,rgba(28,51,38,.75));color:var(--creme);font-family:"Playfair Display",serif;font-style:italic;font-size:17px}
@media (max-width:760px){.gal{grid-template-columns:repeat(2,1fr);gap:10px}.gal figcaption{font-size:14px;padding:30px 12px 12px}}
.note{font-size:13px;color:var(--gris);margin-top:14px}
/* zone */
.zone .wrap{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.zone ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.zone li{padding:12px 0;border-bottom:1px solid rgba(28,51,38,.12);font-size:16px}
.zone li::before{content:"·";color:var(--or);font-weight:700;margin-right:10px}
.zone img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
@media (max-width:860px){.zone .wrap{grid-template-columns:1fr}}
/* contact */
.contact{background:#fff;border-top:1px solid rgba(28,51,38,.1)}
.contact .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:60px}
.big{font-family:"Jost",sans-serif;font-weight:500;font-size:clamp(28px,4vw,42px);letter-spacing:.08em;text-decoration:none;display:block;margin:10px 0 18px}
.big:hover{color:var(--or)}
.contact .ways{display:flex;flex-direction:column;gap:12px;max-width:360px}
.contact .ways .btn{justify-content:center}
.btn.wa{background:var(--vert);border-color:var(--vert);color:var(--creme)}
.btn.wa:hover{background:var(--vert2)}
form{background:var(--creme);border:1px solid rgba(28,51,38,.12);padding:30px}
form h3{font-family:"Playfair Display",serif;font-weight:400;font-size:24px;margin:0 0 6px}
form p.h{margin:0 0 20px;color:var(--gris);font-size:14.5px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);margin:14px 0 6px}
input,select,textarea{width:100%;border:1px solid rgba(28,51,38,.25);background:#fff;padding:12px 14px;font:inherit;font-size:15px;color:var(--encre);outline:none;border-radius:0;-webkit-appearance:none}
input:focus,select:focus,textarea:focus{border-color:var(--or)}
textarea{min-height:110px;resize:vertical}
form .btn{width:100%;justify-content:center;margin-top:20px}
form .small{font-size:12.5px;color:var(--gris);margin-top:12px}
@media (max-width:860px){.contact .wrap{grid-template-columns:1fr;gap:40px}.row{grid-template-columns:1fr}}
/* footer */
footer{background:var(--vert);color:#b9c3b2;padding:46px 22px 60px;text-align:center}
footer .m{font-family:"Playfair Display",serif;letter-spacing:.3em;text-transform:uppercase;color:var(--creme);font-size:16px;margin-bottom:8px}
footer .f{width:40px;height:1.5px;background:var(--or);margin:16px auto}
footer p{margin:6px 0;font-size:13px}
footer a{color:#b9c3b2}
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;background:rgba(28,51,38,.97);padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:10px;box-shadow:0 -4px 20px rgba(0,0,0,.2)}
.sticky .btn{flex:1;justify-content:center;padding:13px 10px;font-size:12px}
@media (max-width:860px){.sticky{display:flex}body{padding-bottom:70px}}
/* --- seo:v1 : h1 porteur, en bref, faq, pages intérieures --- */
h1 .k1{display:block;font-family:"Jost",system-ui,sans-serif;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--or);margin-bottom:18px;font-style:normal;font-weight:500}
.sv a.more{display:inline-block;margin-top:12px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--or);padding-bottom:2px}
.sv a.more:hover{color:var(--or)}
.bref{background:#fff;border:1px solid rgba(28,51,38,.12);padding:34px 36px;margin-top:40px}
.bref h3{font-family:"Playfair Display",serif;font-weight:400;font-size:24px;margin:0 0 18px}
.bref dl{display:grid;grid-template-columns:170px 1fr;gap:10px 22px;margin:0;font-size:15px}
.bref dt{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);padding-top:3px}.bref dd{margin:0}
@media (max-width:640px){.bref dl{grid-template-columns:1fr;gap:2px}.bref dd{margin-bottom:12px}.bref{padding:26px 22px}}
.faq{background:var(--creme2)}
.faq details{border-top:1px solid rgba(28,51,38,.15);padding:18px 0}
.faq details:last-of-type{border-bottom:1px solid rgba(28,51,38,.15)}
.faq summary{cursor:pointer;list-style:none;font-family:"Playfair Display",serif;font-size:20px;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--or);font-size:26px;line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:12px 0 0;max-width:760px;color:#2f4536;font-size:15.5px}
footer .links{margin:14px 0 4px;font-size:12.5px;letter-spacing:.08em}
footer .links a{margin:0 8px;text-decoration:none;border-bottom:1px solid rgba(201,169,106,.6)}
/* pages intérieures */
.page-hero{background:var(--vert);color:var(--creme);padding:150px 0 70px;position:relative;overflow:hidden}
.page-hero img.g{position:absolute;right:-60px;top:-40px;width:420px;opacity:.16;pointer-events:none}
.page-hero .crumbs{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--or);margin-bottom:18px}
.page-hero .crumbs a{color:var(--or);text-decoration:none}
.page-hero h1{font-family:"Playfair Display",serif;font-weight:400;font-size:clamp(32px,4.4vw,54px);line-height:1.1;margin:0 0 20px;max-width:900px}
.page-hero p.lead{font-size:18px;max-width:720px;margin:0 0 28px;color:#dfe6da}
.art{max-width:780px}
.art h2{font-size:clamp(24px,3vw,34px);margin-top:50px}
.art p,.art li{font-size:16.5px;color:#2a3f31}
.art ul{padding-left:20px}.art li{margin:6px 0}
.art .enc{background:#fff;border-left:3px solid var(--or);padding:18px 22px;margin:28px 0;font-size:15.5px}
.cal{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:30px 0}
.cal .mo{background:#fff;border:1px solid rgba(28,51,38,.12);padding:18px 18px 16px}
.cal .mo b{display:block;font-family:"Playfair Display",serif;font-weight:400;font-size:20px;margin-bottom:8px}
.cal .mo p{margin:0;font-size:14.5px;color:#2a3f31}
.cta{background:var(--vert);color:var(--creme);padding:60px 0;text-align:center}
.cta h2{color:var(--creme)}
.cta .big{display:inline-block;font-family:"Playfair Display",serif;font-size:clamp(30px,4vw,44px);color:var(--creme);text-decoration:none;margin:10px 0 22px}
.cta .ways{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.autres{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:26px}
.autres a{display:block;background:#fff;border:1px solid rgba(28,51,38,.12);padding:18px;text-decoration:none}
.autres a b{display:block;font-family:"Playfair Display",serif;font-weight:400;font-size:19px;margin-bottom:4px}
.autres a span{font-size:13.5px;color:var(--gris)}
.autres a:hover{border-color:var(--or)}

.page-hero .ctas{display:flex;gap:14px;flex-wrap:wrap}
.page-hero .btn.ghost{color:var(--creme);border-color:rgba(243,236,220,.6)}
.page-hero .btn.ghost:hover{background:var(--creme);color:var(--vert)}

.zone li a{color:inherit;text-decoration:none;border-bottom:1px solid var(--or)}.zone li a:hover{color:var(--or)}
#merci a{color:var(--vert)}