/* Cleanzeno — feuille de style commune à toutes les pages.
   Une seule modification ici se répercute sur les six pages. */

:root{
  --ground:#EDF0EE; --surface:#FFFFFF; --surface-2:#E4E9E6; --surface-3:#F6F8F7;
  --ink:#14201D; --ink-2:#4E5C58; --ink-3:#7B8884;
  --line:#CDD6D2; --line-strong:#AEBBB6;
  --pine:#0E4A40; --pine-2:#136155; --pine-soft:#DBE7E3;
  --signal:#F2C233; --signal-ink:#3A2E05; --signal-soft:#FBEFC8;
  --btn-fg:#FFFFFF;
  --shadow:0 1px 2px rgba(20,32,29,.06), 0 8px 24px -12px rgba(20,32,29,.18);
  --font-display:'Familjen Grotesk','Aptos','Lato',system-ui,sans-serif;
  --font-body:'Public Sans','Aptos','Lato','Calibri',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'Courier New',monospace;
  --r:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0F1513; --surface:#161F1C; --surface-2:#1E2925; --surface-3:#131B19;
    --ink:#E9EEEC; --ink-2:#A7B4B0; --ink-3:#7C8985;
    --line:#2B3833; --line-strong:#3C4B46;
    --pine:#63D2B9; --pine-2:#7FDCC6; --pine-soft:#152F2A;
    --signal:#F5CE55; --signal-ink:#241B02; --signal-soft:#2E2508;
    --btn-fg:#07110F;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#0F1513; --surface:#161F1C; --surface-2:#1E2925; --surface-3:#131B19;
  --ink:#E9EEEC; --ink-2:#A7B4B0; --ink-3:#7C8985;
  --line:#2B3833; --line-strong:#3C4B46;
  --pine:#63D2B9; --pine-2:#7FDCC6; --pine-soft:#152F2A;
  --signal:#F5CE55; --signal-ink:#241B02; --signal-soft:#2E2508;
  --btn-fg:#07110F;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
}

/* Socle */
html{color-scheme:light dark}
:root{padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%}
[hidden]{display:none !important}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.1; text-wrap:balance; margin:0}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--pine); outline-offset:3px; border-radius:4px}
@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important}}

.wrap{width:100%; max-width:1120px; margin-inline:auto; padding-inline:20px}
.sec{padding-block:clamp(48px,7vw,88px)}
.h2{font-size:clamp(26px,3.6vw,36px); letter-spacing:-.02em}
.eyebrow{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pine); margin:0 0 14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--signal); flex:none}
.lede{color:var(--ink-2); font-size:17px; max-width:64ch}
.band{background:var(--surface); border-block:1px solid var(--line)}

/* Barre */
.topbar{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.topbar-in{display:flex; align-items:center; gap:16px; min-height:64px; flex-wrap:wrap; padding-block:10px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-.015em; text-decoration:none}
.brand-mark{width:27px; height:27px; flex:none}
.topbar-spacer{flex:1 1 auto}
.navlinks{display:flex; gap:20px; font-size:14.5px; color:var(--ink-2)}
.navlinks a{text-decoration:none}
.navlinks a:hover{color:var(--pine)}
.navlinks a[aria-current="page"]{color:var(--ink); font-weight:600}
@media (max-width:940px){.navlinks{display:none}}
.tel{font-family:var(--font-mono); font-size:14px; text-decoration:none; white-space:nowrap}
@media (max-width:640px){.tel{display:none}}
.lang{display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em}
.lang a,.lang span{text-decoration:none; padding:3px 6px; border-radius:5px}
.lang [aria-current="true"]{background:var(--surface-2); color:var(--ink); font-weight:500}
.lang a:hover{color:var(--pine)}
.lang i{font-style:normal; color:var(--line-strong)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--pine); color:var(--btn-fg); text-decoration:none;
  font-family:var(--font-body); font-weight:600; font-size:15px;
  padding:11px 20px; border-radius:var(--r); border:1px solid transparent; cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}
.btn:hover{background:var(--pine-2); transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--surface-2); color:var(--ink)}
.btn-sm{padding:8px 14px; font-size:14px}
.btn-wide{width:100%}

/* Hero */
.hero{padding-block:clamp(40px,6vw,72px) clamp(40px,6vw,64px)}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,56px); align-items:start}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(33px,5.2vw,56px); letter-spacing:-.025em}
.hero h1 em{font-style:normal; color:var(--pine); box-shadow:inset 0 -.28em 0 var(--signal-soft)}
.hero .lede{margin-top:18px; font-size:18.5px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}

.facts{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:38px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
@media (max-width:640px){.facts{grid-template-columns:repeat(2,1fr)}}
.fact{background:var(--surface); padding:16px 14px}
.fact b{display:block; font-family:var(--font-display); font-size:23px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.fact span{display:block; font-size:12.5px; color:var(--ink-3); line-height:1.35; margin-top:3px}

/* Carte devis */
.quote-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; position:sticky; top:calc(env(safe-area-inset-top,0px) + 84px)}
@media (max-width:900px){.quote-card{position:static}}
.quote-head{background:var(--pine); color:var(--btn-fg); padding:16px 20px}
.quote-head h2{font-size:18px; color:inherit}
.quote-head p{font-size:13px; opacity:.85; margin-top:3px}
.quote-body{padding:20px; display:grid; gap:13px}
label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:5px}
input,select,textarea{
  width:100%; font-family:var(--font-body); font-size:15px; color:var(--ink);
  background:var(--surface-3); border:1px solid var(--line); border-radius:8px; padding:10px 12px;
}
textarea{resize:vertical; min-height:80px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:13px}
@media (max-width:420px){.row2{grid-template-columns:1fr}}
.fineprint{font-size:11.5px; color:var(--ink-3); line-height:1.45}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-note{font-size:13px; padding:10px 12px; border-radius:8px; background:var(--signal-soft); color:var(--ink); border:1px solid color-mix(in srgb, var(--signal) 45%, transparent)}

/* Cartes secteur */
.sectors{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:30px}
@media (max-width:880px){.sectors{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.sectors{grid-template-columns:1fr}}
.sector{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px; display:flex; flex-direction:column; gap:9px}
.sector.lead{border-color:var(--pine); box-shadow:inset 3px 0 0 var(--signal)}
.sector h3{font-size:17.5px}
.sector p{font-size:14.5px; color:var(--ink-2)}
.sector .spec{margin-top:auto; padding-top:12px; border-top:1px dashed var(--line); font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3)}
.sector-ic{width:28px; height:28px; color:var(--pine)}
.sector-flag{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--signal-ink); background:var(--signal); padding:2px 7px; border-radius:4px; align-self:flex-start}
.sector a{color:var(--pine); font-weight:600; text-decoration:none; font-size:14.5px}
.sector a:hover{text-decoration:underline}

/* Listes de prestations */
.presta{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; margin-top:26px}
@media (max-width:760px){.presta{grid-template-columns:1fr}}
.presta ul{margin:0; padding:0}
.presta li{list-style:none; display:grid; grid-template-columns:auto 1fr; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); align-items:baseline}
.tick{width:16px; height:16px; color:var(--pine); transform:translateY(2px); flex:none}
.presta b{font-weight:600; font-size:15.5px}
.presta small{display:block; color:var(--ink-3); font-size:13.5px; line-height:1.45}

/* Bloc problème / réponse */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,60px); align-items:start; margin-top:26px}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.split p + p{margin-top:15px}
.trio{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.trio-row{background:var(--surface); padding:17px 18px; display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start}
.trio-row .n{font-family:var(--font-mono); font-size:12px; color:var(--pine); padding-top:3px}
.trio-row b{display:block; font-family:var(--font-display); font-size:16px; font-weight:600}
.trio-row small{display:block; color:var(--ink-2); font-size:14px; line-height:1.5; margin-top:2px}

/* Références */
.refs{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:28px; max-width:760px}
@media (max-width:620px){.refs{grid-template-columns:1fr}}
.ref{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px; min-height:132px; display:flex; flex-direction:column; gap:7px}
.ref .cat{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3)}
.ref b{font-family:var(--font-display); font-size:19px; font-weight:700; letter-spacing:-.015em}
.ref p{font-size:14px; color:var(--ink-2)}

/* Étapes */
.steps{display:grid; margin-top:30px}
.step{display:grid; grid-template-columns:auto 1fr auto; gap:20px; padding:22px 0; border-top:1px solid var(--line); align-items:start}
.step:last-child{border-bottom:1px solid var(--line)}
.step-n{font-family:var(--font-mono); font-size:13px; color:var(--pine); padding-top:3px; font-variant-numeric:tabular-nums}
.step h3{font-size:19px; margin-bottom:5px}
.step p{color:var(--ink-2); font-size:15px; max-width:60ch}
.step-when{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); white-space:nowrap; text-align:right; padding-top:4px}
@media (max-width:700px){
  .step{grid-template-columns:auto 1fr}
  .step-when{grid-column:2; text-align:left; padding-top:6px}
}

/* Garanties */
.guarantees{display:grid; grid-template-columns:repeat(3,1fr); gap:28px 32px; margin-top:28px}
@media (max-width:880px){.guarantees{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.guarantees{grid-template-columns:1fr}}
.g h3{font-size:16px; margin-bottom:5px}
.g p{font-size:14.5px; color:var(--ink-2)}
.g .tag{display:inline-block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--signal-ink); background:var(--signal); padding:2px 7px; border-radius:4px; margin-bottom:9px}

/* Prix */
.devis-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,52px); align-items:start; margin-top:26px}
@media (max-width:820px){.devis-grid{grid-template-columns:1fr}}
.devis-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:24px; box-shadow:var(--shadow)}
.devis-card h3{font-size:17px; margin-bottom:14px}
.crit{margin:0; padding:0; list-style:none; display:grid}
.crit li{display:grid; grid-template-columns:auto 1fr; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14.5px; align-items:baseline}
.crit li:last-child{border-bottom:0}
.crit .k{font-family:var(--font-mono); font-size:11px; color:var(--pine); letter-spacing:.06em; padding-top:2px}
.crit span{color:var(--ink-2)}
.crit b{color:var(--ink); font-weight:600}

/* FAQ */
details{border-top:1px solid var(--line)}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer; list-style:none; padding:17px 0; font-family:var(--font-display); font-weight:600; font-size:17px; display:flex; justify-content:space-between; gap:16px; align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-family:var(--font-mono); font-size:19px; color:var(--pine); flex:none}
details[open] summary::after{content:"\2013"}
details .answer{padding:0 0 18px; color:var(--ink-2); font-size:15px; max-width:70ch}

/* CTA final */
.final{background:var(--pine); color:var(--btn-fg)}
.final h2{font-size:clamp(26px,4vw,40px); letter-spacing:-.02em; color:inherit}
.final p{opacity:.88; margin-top:12px; max-width:58ch; font-size:17px}
.final-grid{display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center}
@media (max-width:760px){.final-grid{grid-template-columns:1fr}}
.final .btn{background:var(--signal); color:var(--signal-ink)}
.final .btn:hover{background:#FFD75A; color:var(--signal-ink)}
.final .btn-ghost{background:transparent; color:var(--btn-fg); border-color:color-mix(in srgb, var(--btn-fg) 40%, transparent)}
.final .btn-ghost:hover{background:color-mix(in srgb, var(--btn-fg) 12%, transparent); color:var(--btn-fg)}

/* Pied */
footer{background:var(--surface-3); border-top:1px solid var(--line); font-size:14px; color:var(--ink-2)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; padding-block:44px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}
footer h2{font-family:var(--font-display); font-size:13px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); margin:0 0 12px; font-weight:600}
footer ul{margin:0; padding:0; list-style:none; display:grid; gap:7px}
footer a{text-decoration:none}
footer a:hover{color:var(--pine)}
.foot-legal{border-top:1px solid var(--line); padding-block:18px; font-size:12.5px; color:var(--ink-3); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}