@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/space-grotesk-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/space-grotesk-latin-700-normal.woff2) format('woff2')}

/* Layout: one-page artisan site — sticky header with call button, hero, services grid, steps, zone + contact band, footer */
:root{
  --navy:#1B2A41; --orange:#E8702A; --orange-ink:#B9541A;
  --bg:#F6F5F2; --surface:#FFFFFF; --fg:#1B2A41; --muted:#56606E; --line:#E3E0DA;
  --band:#1B2A41; --band-fg:#FFFFFF; --band-muted:#C3CAD5;
  --ph-bg:#FFF1E6; --ph-fg:#9A4612;
  --display:'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --body:Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#111823; --surface:#18212F; --fg:#EEF1F5; --muted:#A3ADBB; --line:#2A3445;
  --band:#0B1119; --band-fg:#FFFFFF; --band-muted:#A3ADBB; --orange-ink:#F08A4B;
  --ph-bg:#3A2414; --ph-fg:#F6B48A; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#111823; --surface:#18212F; --fg:#EEF1F5; --muted:#A3ADBB; --line:#2A3445;
  --band:#0B1119; --band-fg:#FFFFFF; --band-muted:#A3ADBB; --orange-ink:#F08A4B;
  --ph-bg:#3A2414; --ph-fg:#F6B48A; color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--bg); color:var(--fg); font-family:var(--body); font-size:16px; line-height:1.6}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--surface)}
h1,h2,h3{font-family:var(--display); line-height:1.15; text-wrap:balance; margin:0}
p{margin:0}
a{color:inherit}
.wrap{max-width:1120px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
.ph{background:var(--ph-bg); color:var(--ph-fg); border:1px dashed currentColor; border-radius:4px; padding:0 6px; font-weight:600; white-space:nowrap}
.eyebrow{font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-ink)}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px}

/* Header */
header{position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:var(--surface); border-bottom:1px solid var(--line)}
header .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.mark{width:44px; height:44px; flex-shrink:0}
.brand-name{display:flex; flex-direction:column; line-height:1.05}
.brand-name b{font-family:var(--display); font-size:21px; color:var(--fg)}
.brand-name span{font-family:var(--display); font-size:13px; font-weight:500; color:var(--orange-ink)}
nav{display:flex; align-items:center; gap:24px}
nav a.lnk{text-decoration:none; font-weight:500; color:var(--muted)}
nav a.lnk:hover{color:var(--fg)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border-radius:10px; font-weight:600; text-decoration:none; font-size:16px; border:0; cursor:pointer; font-family:var(--body)}
.btn-call{background:var(--orange); color:#FFFFFF}
.btn-call:hover{background:#D46220}
.btn-ghost{background:transparent; color:var(--fg); border:2px solid var(--line)}
.btn-ghost:hover{border-color:var(--fg)}
.btn svg{width:20px; height:20px}
@media (max-width:760px){ nav a.lnk{display:none} header .btn{padding:0 14px} .brand-name span{display:block} }

/* Hero */
.hero{padding-block:72px 64px}
.hero .wrap{display:grid; grid-template-columns:1.25fr 1fr; gap:56px; align-items:center}
.hero h1{font-size:clamp(36px, 6vw, 60px); margin-top:14px}
.hero h1 em{font-style:normal; color:var(--orange-ink)}
.hero .lead{font-size:19px; color:var(--muted); max-width:34em; margin-top:20px}
.hero .ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.hero-card{background:var(--navy); border-radius:24px; padding:40px 32px; color:#FFFFFF; display:flex; flex-direction:column; gap:22px}
.hero-card .big{width:120px; height:120px}
.hero-card ul{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.hero-card li{display:flex; gap:12px; align-items:center; font-weight:500}
.hero-card li::before{content:""; width:10px; height:10px; border-radius:2px; background:var(--orange); flex-shrink:0}
@media (max-width:860px){ .hero{padding-block:40px} .hero .wrap{grid-template-columns:1fr; gap:36px} }

/* Sections */
section.block{padding-block:72px}
.head{display:flex; flex-direction:column; gap:10px; margin-bottom:36px; max-width:40em}
.head h2{font-size:clamp(28px, 4vw, 40px)}
.head p{color:var(--muted)}

.services{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px}
.svc{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:28px; display:flex; flex-direction:column; gap:12px; min-width:0}
.svc .ic{width:52px; height:52px; border-radius:12px; background:var(--navy); display:grid; place-items:center}
.svc .ic svg{width:28px; height:28px; stroke:var(--orange); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.svc h3{font-size:22px}
.svc p{color:var(--muted); font-size:15px}
@media (max-width:900px){ .services{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:560px){ .services{grid-template-columns:1fr} }

.steps{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:32px; counter-reset:s}
.step{display:flex; flex-direction:column; gap:10px; border-top:3px solid var(--orange); padding-top:20px; min-width:0}
.step .n{font-family:var(--display); font-weight:700; font-size:15px; color:var(--orange-ink)}
.step h3{font-size:21px}
.step p{color:var(--muted)}
@media (max-width:760px){ .steps{grid-template-columns:1fr; gap:24px} }

.gallery{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px}
.shot{aspect-ratio:4/3; max-width:100%; border-radius:14px; border:2px dashed var(--line); display:grid; place-items:center; text-align:center; color:var(--muted); font-size:14px; padding:16px; background:var(--surface)}
.shot.photo{padding:0; border:0; margin:0; overflow:hidden; position:relative; display:block}
.shot.photo img{width:100%; height:100%; object-fit:cover; object-position:center 55%; display:block}
.shot.photo figcaption{position:absolute; left:12px; bottom:12px; right:12px; background:rgba(27,42,65,.85); color:#FFFFFF; font-weight:600; font-size:14px; padding:6px 12px; border-radius:8px; width:fit-content; max-width:calc(100% - 24px)}
.ba{--pos:50%; touch-action:pan-y}
.shot.ba .ba-img{position:absolute; inset:0; object-position:center 78%}
#ba2 .ba-img{object-position:center 50%}
.gallery .shot{aspect-ratio:3/4}
.ba .ba-after{clip-path:inset(0 0 0 var(--pos))}
.ba-line{position:absolute; top:0; bottom:0; left:var(--pos); width:3px; margin-left:-1.5px; background:#FFFFFF; pointer-events:none; box-shadow:0 0 6px rgba(0,0,0,.35)}
.ba-knob{position:absolute; top:50%; left:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; background:#E8702A; color:#FFFFFF; display:grid; place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.3)}
.ba-knob svg{width:22px; height:22px}
.ba-tag{position:absolute; top:12px; background:rgba(27,42,65,.85); color:#FFFFFF; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:6px; pointer-events:none}
.ba-tag-l{left:12px} .ba-tag-r{right:12px}
.ba-range{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize}
.ba-range:focus-visible + figcaption{outline:3px solid #E8702A}
.ba figcaption{pointer-events:none}
@media (max-width:700px){ .gallery{grid-template-columns:1fr} }

/* Contact band */
.band{background:var(--band); color:var(--band-fg)}
.band .wrap{display:grid; grid-template-columns:1fr 1fr; gap:48px; padding-block:72px}
.band h2{font-size:clamp(28px, 4vw, 40px)}
.band .muted{color:var(--band-muted)}
.zone{display:flex; flex-direction:column; gap:16px}
.zone .chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:6px 14px; font-size:14px}
.contact{display:flex; flex-direction:column; gap:14px}
.row{display:flex; align-items:center; justify-content:space-between; gap:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:14px 16px; min-width:0}
.row .k{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--band-muted)}
.row .v{font-weight:600; font-size:17px; overflow-wrap:anywhere; user-select:all}
.row .v .ph{white-space:normal}
.copy{background:transparent; color:var(--band-fg); border:1px solid rgba(255,255,255,.3); border-radius:8px; min-height:44px; padding:0 14px; font:inherit; font-size:14px; cursor:pointer; flex-shrink:0}
.copy:hover{border-color:#FFFFFF}
.band .ph{background:#3A2414; color:#F6B48A}
@media (max-width:860px){ .band .wrap{grid-template-columns:1fr; gap:40px; padding-block:56px} }

footer .wrap{padding-block:28px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; color:var(--muted); font-size:14px}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* ---- multi-page additions ---- */
nav a.lnk[aria-current="page"]{color:var(--fg); box-shadow:inset 0 -3px 0 var(--orange)}
nav a.lnk{padding-block:6px}
.subnav{display:none}
@media (max-width:760px){
  .subnav{display:block; border-top:1px solid var(--line)}
  .subnav .wrap{display:flex; gap:4px; overflow-x:auto; padding-block:0; scrollbar-width:none}
  .subnav a{flex:0 0 auto; padding:12px 12px; font-weight:600; font-size:15px; text-decoration:none; color:var(--muted); min-height:44px; display:flex; align-items:center}
  .subnav a[aria-current="page"]{color:var(--fg); box-shadow:inset 0 -3px 0 var(--orange)}
}
.btn-wa{background:#1F7A4D; color:#FFFFFF}
.btn-wa:hover{background:#17623D}
.page-head{padding-block:56px 32px}
.page-head h1{font-size:clamp(32px,5vw,48px); margin-top:12px}
.page-head p.lead{font-size:18px; color:var(--muted); max-width:38em; margin-top:16px}
.svc a.more{margin-top:auto; font-weight:600; color:var(--orange-ink); text-decoration:none}
.svc a.more:hover{text-decoration:underline}
.detail{display:grid; gap:20px}
.detail article{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:28px; display:grid; grid-template-columns:52px minmax(0,1fr); gap:20px; scroll-margin-top:90px}
.detail .ic{width:52px; height:52px; border-radius:12px; background:var(--navy); display:grid; place-items:center}
.detail .ic svg{width:28px; height:28px; stroke:var(--orange); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.detail h2{font-size:26px}
.detail ul{margin:12px 0 0; padding-left:20px; color:var(--muted); display:grid; gap:4px}
.detail .actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.detail p{color:var(--muted); margin-top:8px}
@media (max-width:560px){ .detail article{grid-template-columns:1fr} }
.cta-band{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:32px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px}
.cta-band h2{font-size:clamp(24px,3.5vw,32px)}
.cta-band p{color:var(--muted); margin-top:6px}
.cta-band .ctas{display:flex; flex-wrap:wrap; gap:10px}
/* form */
.devis-grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:32px; align-items:start}
@media (max-width:900px){ .devis-grid{grid-template-columns:1fr} }
form.devis{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:28px; display:grid; gap:22px}
.field{display:grid; gap:6px; min-width:0}
.field label, .field legend{font-weight:600; font-size:15px}
.field .hint{font-size:13px; color:var(--muted)}
.row2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
@media (max-width:560px){ .row2{grid-template-columns:1fr} }
input[type=text],input[type=tel],input[type=email],textarea{font:inherit; font-size:16px; color:var(--fg); background:var(--bg); border:1.5px solid var(--line); border-radius:10px; padding:12px 14px; width:100%; min-height:48px}
textarea{min-height:130px; resize:vertical}
input:focus,textarea:focus{outline:3px solid var(--orange); outline-offset:1px; border-color:transparent}
fieldset{border:0; padding:0; margin:0; min-width:0}
.choices{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:8px}
@media (max-width:560px){ .choices{grid-template-columns:1fr} }
.choice{position:relative}
.choice input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer}
.choice span{display:flex; align-items:center; gap:10px; min-height:48px; padding:10px 14px; border:1.5px solid var(--line); border-radius:10px; background:var(--bg); font-weight:500}
.choice span::before{content:""; width:18px; height:18px; border-radius:5px; border:2px solid var(--muted); flex-shrink:0}
.choice input:checked + span{border-color:var(--orange); background:var(--ph-bg)}
.choice input:checked + span::before{background:var(--orange); border-color:var(--orange); box-shadow:inset 0 0 0 3px var(--ph-bg)}
.choice input:focus-visible + span{outline:3px solid var(--orange); outline-offset:2px}
.drop{border:2px dashed var(--line); border-radius:14px; padding:20px; display:grid; gap:12px; justify-items:start; background:var(--bg)}
.drop label.btn{cursor:pointer}
.thumbs{display:flex; flex-wrap:wrap; gap:10px}
.thumbs figure{margin:0; position:relative; width:88px; height:88px; border-radius:10px; overflow:hidden; border:1px solid var(--line)}
.thumbs img{width:100%; height:100%; object-fit:cover; display:block}
.thumbs button{position:absolute; top:4px; right:4px; width:28px; height:28px; border-radius:50%; border:0; background:rgba(0,0,0,.65); color:#FFFFFF; font-size:16px; line-height:1; cursor:pointer}
.consent{display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--muted)}
.consent input{width:22px; height:22px; margin-top:2px; flex-shrink:0; accent-color:var(--orange)}
.consent a{color:var(--orange-ink)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.status{border-radius:12px; padding:14px 16px; font-weight:600}
.status.ok{background:#E6F4EC; color:#14532D}
.status.err{background:#FDECEC; color:#8A1C1C}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .status.ok{background:#12301F; color:#A7E3BF} :root:not([data-theme="light"]) .status.err{background:#3A1515; color:#F5B5B5} }
:root[data-theme="dark"] .status.ok{background:#12301F; color:#A7E3BF}
:root[data-theme="dark"] .status.err{background:#3A1515; color:#F5B5B5}
.aside{display:grid; gap:14px}
.aside .card{background:var(--band); color:var(--band-fg); border-radius:20px; padding:24px; display:grid; gap:12px}
.aside .card h2{font-size:22px}
.aside .card .muted{color:var(--band-muted)}
.aside .card .btn{justify-content:flex-start}
.legalpage{max-width:760px}
.legalpage h2{font-size:22px; margin-top:32px}
.legalpage p,.legalpage li{color:var(--muted); margin-top:8px}
.legalpage dl{display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:8px 20px; margin-top:12px}
.legalpage dt{font-weight:600}
.legalpage dd{margin:0; color:var(--muted)}
@media (max-width:560px){ .legalpage dl{grid-template-columns:1fr} .legalpage dd{margin-bottom:8px} }
footer a{color:inherit}

nav .btn-head-wa{margin-right:-12px}
@media (max-width:760px){ nav{gap:8px} nav .btn-head-wa{margin-right:0; width:48px; padding:0} nav .btn-head-wa .lbl{display:none} }

.hero-card .sig{display:flex; align-items:center; gap:18px}
.hero-card .sig .big{width:104px; height:104px; flex-shrink:0}
.hero-card .sig b{display:block; font-family:var(--display); font-size:34px; line-height:1}
.hero-card .sig span{display:block; font-family:var(--display); font-weight:500; font-size:18px; color:var(--orange); margin-top:4px}
.hero-card ul.metiers{border-top:1px solid rgba(255,255,255,.15); padding-top:20px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px}
.hero-card ul.metiers li::before{display:none}
.hero-card ul.metiers svg{width:22px; height:22px; flex-shrink:0; fill:none; stroke:var(--orange); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
@media (max-width:420px){ .hero-card ul.metiers{grid-template-columns:1fr} }

@media (max-width:760px){ nav .btn-head-call{width:48px; padding:0} nav .btn-head-call .lbl{display:none} header .wrap{gap:10px} }

/* ---- accueil épuré ---- */
.hero-simple{padding-block:64px 40px}
.hero-simple .wrap{grid-template-columns:1fr 1.05fr; gap:48px}
.hero-simple .ctas{margin-top:28px}
.promesses{list-style:none; margin:20px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 20px; color:var(--muted); font-size:15px; font-weight:500}
.promesses li{display:flex; align-items:center; gap:8px}
.promesses li::before{content:""; width:8px; height:8px; border-radius:2px; background:var(--orange); flex-shrink:0}
.hero-photo{display:flex; flex-direction:column; gap:10px; text-decoration:none; color:var(--muted); font-size:14px; min-width:0}
.hero-photo img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:18px; border:1px solid var(--line); display:block}
.hero-photo span{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px}
.hero-photo b{color:var(--orange-ink); font-weight:600}
.hero-photo:hover b{text-decoration:underline}
section.metiers-block{padding-block:32px 72px}
.metiers-title{font-size:clamp(22px,3vw,28px); margin-bottom:20px}
.m-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.m-tile{display:flex; align-items:center; gap:14px; padding:16px 18px; background:var(--surface); border:1px solid var(--line); border-radius:14px; text-decoration:none; color:var(--fg); font-weight:600; font-size:17px; min-width:0; transition:border-color .15s}
.m-tile:hover{border-color:var(--orange)}
.m-tile .ic{width:42px; height:42px; border-radius:10px; background:var(--navy); display:grid; place-items:center; flex-shrink:0}
.m-tile .ic svg{width:22px; height:22px; stroke:var(--orange); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.m-more{margin-top:20px}
.m-more a{color:var(--orange-ink); font-weight:600; text-decoration:none}
.m-more a:hover{text-decoration:underline}
@media (max-width:900px){ .hero-simple .wrap{grid-template-columns:1fr; gap:32px} }
@media (max-width:760px){
  .hero-simple{padding-block:32px 16px}
  .m-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .m-tile{flex-direction:column; align-items:flex-start; gap:10px; padding:14px; font-size:15px}
  section.metiers-block{padding-block:24px 48px}
}