:root{--black:#0a0a0a;--dark:#111318;--panel:#1c2028;--border:#3a3e4e;--gold:#c8a86b;--gold-light:#e8c882;--text:#f0ede6;--muted:#b0b0c0;--white:#f5f2ec}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--dark);color:var(--text);font-family:'DM Mono',monospace;font-weight:300;overflow-x:hidden;line-height:1.7}
nav{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:24px 48px;background:linear-gradient(to bottom,rgba(10,10,10,.95),transparent);backdrop-filter:blur(10px)}
.logo{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:6px;color:var(--white);text-decoration:none}
.logo span{color:var(--gold)}
.nav-back{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);text-decoration:none;border:1px solid var(--border);padding:10px 20px;transition:all .3s}
.nav-back:hover{color:var(--gold);border-color:var(--gold)}
.hero{min-height:70vh;display:flex;align-items:center;padding:140px 48px 80px;position:relative;overflow:hidden}
.hero.serrure{background:linear-gradient(135deg,#050810 0%,#0a1020 100%)}
.hero.serrure::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 20% 60%,rgba(80,120,200,.12) 0%,transparent 70%)}
.hero.couvreur{background:linear-gradient(135deg,#0a0a0a 0%,#1a1208 100%)}
.hero.couvreur::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 80% 40%,rgba(200,168,107,.12) 0%,transparent 70%)}
.hero.plombier{background:linear-gradient(135deg,#050810 0%,#0a1020 100%)}
.hero.plombier::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 20% 60%,rgba(80,120,200,.12) 0%,transparent 70%)}
.hero.alarme{background:linear-gradient(135deg,#080808 0%,#150a08 100%)}
.hero.alarme::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 70% 30%,rgba(200,60,60,.1) 0%,transparent 70%)}
.hero-content{position:relative;z-index:2;max-width:900px}
.hero-tag{font-size:10px;letter-spacing:5px;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.hero-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(48px,7vw,90px);line-height:.95;letter-spacing:3px;color:var(--white);margin-bottom:24px}
.hero-title span{color:var(--gold)}
.hero-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(18px,2.2vw,24px);color:var(--muted);max-width:700px;line-height:1.5}
.hero-cta{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap}
.btn-primary{padding:16px 32px;background:var(--gold);color:var(--black);font-size:10px;letter-spacing:4px;text-transform:uppercase;border:none;cursor:pointer;font-family:'DM Mono';text-decoration:none;display:inline-block;transition:all .3s}
.btn-primary:hover{background:var(--gold-light)}
.btn-secondary{padding:16px 32px;background:transparent;color:var(--gold);border:1px solid var(--gold);font-size:10px;letter-spacing:4px;text-transform:uppercase;font-family:'DM Mono';text-decoration:none;display:inline-block;transition:all .3s}
.btn-secondary:hover{background:rgba(200,168,107,.1)}
section{padding:80px 48px}
.section-header{margin-bottom:48px}
.section-num{font-size:10px;letter-spacing:3px;color:var(--gold)}
.section-title{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,3.5vw,44px);font-weight:300;color:var(--white);margin-top:12px;line-height:1.2}
.section-title strong{color:var(--gold);font-weight:400}
.prose{max-width:760px;font-size:13px;line-height:2.2;color:var(--muted)}
.prose p{margin-bottom:20px}
.prose strong{color:var(--text)}
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:40px}
.service-item{background:var(--panel);border:1px solid var(--border);padding:32px 28px}
.service-item h3{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:400;color:var(--white);margin-bottom:12px}
.service-item p{font-size:12px;line-height:2;color:var(--muted)}
.service-item .tag{display:inline-block;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.tarif-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:40px}
.tarif-card{background:var(--dark);padding:32px 24px;text-align:center;border:1px solid var(--border)}
.tarif-card h4{font-family:'DM Mono';font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.tarif-card .price{font-family:'Bebas Neue';font-size:34px;letter-spacing:2px;color:var(--white)}
.tarif-card p{font-size:11px;color:var(--muted);margin-top:12px;line-height:1.8}
.zones-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.zone-tag{padding:8px 16px;border:1px solid var(--border);font-size:10px;letter-spacing:2px;color:var(--muted)}
.zone-tag.featured{border-color:var(--gold);color:var(--gold)}
.testimonial{background:linear-gradient(135deg,rgba(200,168,107,.06) 0%,transparent 100%);border:1px solid rgba(200,168,107,.2);padding:48px;margin-top:48px;max-width:760px}
.testimonial-text{font-family:'Cormorant Garamond',serif;font-size:20px;font-style:italic;color:var(--text);line-height:1.7;margin-bottom:20px}
.testimonial-text::before{content:'"';font-size:48px;color:var(--gold);line-height:0;vertical-align:-20px;margin-right:6px}
.testimonial-author{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold)}
.cta-band{background:var(--black);border-top:1px solid var(--border);padding:80px 48px;text-align:center}
.cta-band h2{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,3vw,40px);font-weight:300;color:var(--white);margin-bottom:32px}
.cta-band h2 strong{color:var(--gold)}
.cta-band .phone{font-family:'Bebas Neue';font-size:48px;letter-spacing:4px;color:var(--gold);text-decoration:none;display:block;margin:24px 0}
footer{background:var(--black);padding:40px 48px;border-top:1px solid var(--border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;font-size:10px;letter-spacing:2px;color:var(--muted)}
footer a{color:var(--gold);text-decoration:none}
.panel-bg{background:var(--panel);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
@media(max-width:900px){nav{padding:16px 24px}section{padding:60px 24px}.hero{padding:120px 24px 60px}.services-grid,.tarif-grid{grid-template-columns:1fr}.cta-band{padding:60px 24px}footer{flex-direction:column;text-align:center}}