:root{
  --paper:#F1F4F0; --paper-2:#E6EBE4; --card:#FFFFFF; --card-2:#F7F9F6;
  --ink:#161B17; --ink-2:#4B554D; --ink-3:#79837B;
  --line:#CCD4CC; --line-2:#DDE3DC;
  --vert:#12432E; --vert-2:#1E6C4B; --vert-wash:#E1EBE3;
  --accent:#CE3B24; --accent-soft:#F6E1DC;
  --lime:#7FA31E; --teal:#137C7C;
  --shadow:0 1px 2px rgba(20,30,22,.05), 0 8px 24px -12px rgba(20,30,22,.18);
  --r:3px;
  --maxw:1180px;
  --fd:"Archivo","Helvetica Neue",Arial,sans-serif;
  --fb:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fm:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F1310; --paper-2:#151A16; --card:#1A211C; --card-2:#151B17;
    --ink:#E7EBE5; --ink-2:#A5AFA7; --ink-3:#7B857D;
    --line:#2B342D; --line-2:#232B25;
    --vert:#66B78B; --vert-2:#4E9E72; --vert-wash:#17271E;
    --accent:#FF6B52; --accent-soft:#33201C;
    --lime:#A6CC3B; --teal:#3FA8A8;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --paper:#0F1310; --paper-2:#151A16; --card:#1A211C; --card-2:#151B17;
  --ink:#E7EBE5; --ink-2:#A5AFA7; --ink-3:#7B857D;
  --line:#2B342D; --line-2:#232B25;
  --vert:#66B78B; --vert-2:#4E9E72; --vert-wash:#17271E;
  --accent:#FF6B52; --accent-soft:#33201C;
  --lime:#A6CC3B; --teal:#3FA8A8;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--fb); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
h1,h2,h3,h4{font-family:var(--fd); font-weight:700; letter-spacing:-.02em; text-wrap:balance; margin:0}
p{margin:0}
a{color:inherit}
button,input,select{font:inherit; color:inherit}

/* ---------- rail technique ---------- */
.rule{border-top:1px solid var(--line); position:relative}
.rule::before,.rule::after{
  content:""; position:absolute; top:-1px; width:1px; height:9px; background:var(--line);
}
.rule::before{left:0} .rule::after{right:0}

.eyebrow{
  font-family:var(--fm); font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}

/* ---------- entête ---------- */
header.top{
  position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line-2);
}
.topbar{display:flex; align-items:center; gap:18px; padding:12px 0}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none}
.brand img{width:38px; height:auto; display:block}
.brand b{font-family:var(--fd); font-size:19px; letter-spacing:-.025em; line-height:1}
.brand b i{font-style:normal; color:var(--vert-2)}
.brand small{display:block; font-family:var(--fm); font-size:9.5px; letter-spacing:.13em; color:var(--ink-3); text-transform:uppercase; margin-top:3px}
nav.links{margin-left:auto; display:flex; gap:26px; align-items:center}
nav.links a{font-size:14px; text-decoration:none; color:var(--ink-2); padding:4px 0; border-bottom:1px solid transparent}
nav.links a:hover{color:var(--ink); border-bottom-color:var(--accent)}
.tel{font-family:var(--fm); font-size:13px; font-weight:500; color:var(--vert-2); white-space:nowrap}
@media(max-width:880px){nav.links a:not(.tel){display:none}}

/* ---------- héros ---------- */
.hero{padding:64px 0 40px}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:52px; align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr; gap:34px}}
.hero h1{font-size:clamp(38px,5.4vw,64px); line-height:1.02}
.hero h1 em{font-style:normal; color:var(--vert-2)}
.hero .lede{margin-top:20px; font-size:17.5px; color:var(--ink-2); max-width:44ch}
.hero .cta{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:12px 20px; border-radius:var(--r);
  font-size:14.5px; font-weight:600; text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--accent); color:#fff}
.btn-p:hover{background:color-mix(in srgb, var(--accent) 86%, #000)}
.btn-s{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-s:hover{border-color:var(--vert-2); color:var(--vert-2)}
.facts{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:38px; border-top:1px solid var(--line)}
@media(max-width:640px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fact{padding:14px 16px 14px 0; border-right:1px solid var(--line-2)}
@media(max-width:640px){.fact{padding-right:12px}.fact b{font-size:21px}
.fact:nth-child(2){border-right:0}.fact:nth-child(3),.fact:nth-child(4){border-top:1px solid var(--line-2)}}
.fact:last-child{border-right:0}
.fact b{display:block; font-family:var(--fd); font-size:25px; letter-spacing:-.03em}
.fact span{font-family:var(--fm); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}

.drawing{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 18px 12px; box-shadow:var(--shadow);
}
.drawing-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px}
.drawing svg{width:100%; height:auto; display:block}
.drawing figcaption{font-family:var(--fm); font-size:10.5px; color:var(--ink-3); margin-top:8px; letter-spacing:.03em}

/* ---------- sections ---------- */
section{padding:64px 0}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:34px; flex-wrap:wrap}
.sec-head h2{font-size:clamp(26px,3.2vw,36px); line-height:1.08; margin-top:10px}
.sec-head p{color:var(--ink-2); max-width:52ch; font-size:15.5px}

/* ---------- configurateur ---------- */
#configurateur{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.cfg{display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--card)}
@media(max-width:920px){.cfg{grid-template-columns:minmax(0,1fr)}}
.cfg-in{padding:24px; background:var(--card-2); border-right:1px solid var(--line)}
@media(max-width:920px){.cfg-in{border-right:0; border-bottom:1px solid var(--line)}}
.cfg-out{padding:24px}
.field{margin-bottom:16px}
.field > label{display:block; font-family:var(--fm); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
.field .row{display:flex; align-items:center; gap:10px}
input[type="number"], select{
  width:100%; padding:9px 11px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); font-family:var(--fm); font-size:14px;
}
input[type="number"]:focus-visible, select:focus-visible, .seg button:focus-visible, .btn:focus-visible, .chk:focus-within{
  outline:2px solid var(--vert-2); outline-offset:2px;
}
input[type="range"]{width:100%; accent-color:var(--vert-2)}
.val{font-family:var(--fm); font-size:13.5px; font-weight:500; min-width:72px; text-align:right; color:var(--vert-2)}
.seg{display:flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.seg button{flex:1; padding:9px 8px; background:var(--card); border:0; cursor:pointer; font-size:13px; font-weight:500; color:var(--ink-2)}
.seg button + button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--vert); color:#fff}
:root[data-theme="dark"] .seg button[aria-pressed="true"], :root:not([data-theme="light"]) .seg button[aria-pressed="true"]{color:#0F1310}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .seg button[aria-pressed="true"]{color:#fff}}
.chk{display:flex; align-items:center; gap:9px; font-size:14px; padding:7px 0; cursor:pointer}
.chk input{accent-color:var(--vert-2); width:16px; height:16px}
.mini{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px}

.result-top{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid var(--line)}
.price b{display:block; font-family:var(--fd); font-size:40px; letter-spacing:-.035em; line-height:1; color:var(--vert-2)}
.price span{font-family:var(--fm); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.kpis{display:flex; gap:24px; flex-wrap:wrap}
.kpi b{display:block; font-family:var(--fd); font-size:19px; letter-spacing:-.02em}
.kpi span{font-family:var(--fm); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}

.tbl-wrap{overflow-x:auto; margin-top:18px}
table{width:100%; border-collapse:collapse; font-size:13.5px}
th{
  font-family:var(--fm); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); text-align:right; padding:0 8px 8px; font-weight:500; white-space:nowrap;
}
th:first-child,td:first-child{text-align:left}
th:nth-child(2),td:nth-child(2){text-align:left}
td{padding:8px; border-top:1px solid var(--line-2); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
td:nth-child(2){white-space:normal; min-width:200px}
tfoot td:first-child{white-space:nowrap}
td.ref{font-family:var(--fm); font-size:12px; color:var(--ink-3)}
tr.grp td{
  background:var(--vert-wash); font-family:var(--fm); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--vert-2); text-align:left; padding:6px 8px;
}
tfoot td{border-top:1.5px solid var(--vert); font-weight:600}
.note{font-size:12.5px; color:var(--ink-3); margin-top:14px; max-width:64ch}

/* ---------- comparatif ---------- */
.duo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px}
@media(max-width:820px){.duo{grid-template-columns:minmax(0,1fr)}}
.sys{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--shadow)}
.sys h3{font-size:22px; margin-bottom:6px}
.sys .tag{font-family:var(--fm); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.sys ul{list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:9px}
.sys li{display:flex; gap:10px; font-size:14.5px; color:var(--ink-2); align-items:baseline}
.sys li::before{content:""; flex:0 0 auto; width:5px; height:5px; background:var(--vert-2); border-radius:50%; transform:translateY(-2px)}
.sys dl{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:20px 0 0; padding-top:16px; border-top:1px solid var(--line-2); font-size:13.5px}
.sys dt{font-family:var(--fm); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); align-self:center}
.sys dd{margin:0; text-align:right; font-variant-numeric:tabular-nums}

/* ---------- gamme ---------- */
.grid-prod{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:18px}
.prod{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px; display:flex; flex-direction:column; gap:10px}
.prod .ref{font-family:var(--fm); font-size:10.5px; letter-spacing:.09em; color:var(--ink-3)}
.prod h4{font-size:16.5px; letter-spacing:-.01em}
.prod p{font-size:13.8px; color:var(--ink-2)}
.prod .spec{margin-top:auto; padding-top:12px; border-top:1px solid var(--line-2); font-family:var(--fm); font-size:11.5px; color:var(--ink-3); display:flex; flex-wrap:wrap; gap:4px 12px}

/* ---------- process ---------- */
.phases{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:0; border-top:1px solid var(--line)}
.phase{padding:22px 22px 22px 0; border-right:1px solid var(--line-2); position:relative}
.phase:last-child{border-right:0}
.phase::before{content:""; position:absolute; top:-1px; left:0; width:26px; height:3px; background:var(--accent)}
.phase b{display:block; font-family:var(--fm); font-size:10.5px; letter-spacing:.11em; color:var(--accent); margin-bottom:8px; text-transform:uppercase}
.phase h4{font-size:16px; margin-bottom:6px}
.phase p{font-size:13.8px; color:var(--ink-2)}
@media(max-width:700px){.phase{border-right:0; border-bottom:1px solid var(--line-2); padding-right:0}}

/* ---------- demande ---------- */
#devis{background:var(--vert); color:#EAF2EC; border-top:1px solid var(--line)}
#devis h2, #devis .eyebrow{color:#fff}
#devis .eyebrow{color:#9CC7AE}
#devis p{color:#C2D8C9}
.form{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; margin-top:26px}
@media(max-width:760px){.form{grid-template-columns:minmax(0,1fr)}}
.form .full{grid-column:1/-1}
.form label{display:block; font-family:var(--fm); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:#9CC7AE; margin-bottom:5px}
.form input, .form textarea, .form select{
  width:100%; padding:10px 12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r); color:#fff; font-family:var(--fb); font-size:14.5px;
}
.form textarea{min-height:88px; resize:vertical}
.form input::placeholder, .form textarea::placeholder{color:rgba(255,255,255,.42)}
.form input:focus-visible, .form textarea:focus-visible, .form select:focus-visible{outline:2px solid #9CC7AE; outline-offset:1px}
.form option{color:#111}
.form-actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:6px}
#devis .btn-p{background:var(--accent)}
#devis .btn-s{border-color:rgba(255,255,255,.35); color:#fff}
#devis .btn-s:hover{border-color:#fff; color:#fff}
.copied{font-family:var(--fm); font-size:12px; color:#9CC7AE}
.checklist{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:7px}
.checklist li{display:flex; gap:10px; font-size:14px; color:#C2D8C9}
.checklist li::before{content:"—"; color:#6FA487}

/* ---------- pied ---------- */
footer{padding:44px 0 30px; font-size:13px; color:var(--ink-2)}
.foot-grid{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap:32px}
@media(max-width:760px){.foot-grid{grid-template-columns:minmax(0,1fr)}}
footer h5{font-family:var(--fm); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:0 0 10px; font-weight:500}
footer .legal{margin-top:28px; padding-top:16px; border-top:1px solid var(--line-2); font-size:11.5px; color:var(--ink-3)}
.theme-btn{background:none; border:1px solid var(--line); border-radius:var(--r); padding:5px 10px; cursor:pointer; font-family:var(--fm); font-size:11px; color:var(--ink-2)}
.theme-btn:hover{border-color:var(--vert-2); color:var(--vert-2)}
@media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important}}

/* ---------- ajouts site ---------- */
.horaires{font-size:12.5px; color:var(--ink-3); line-height:1.55}
.skip{
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  background:var(--vert); color:#fff; padding:10px 16px; z-index:100;
  border-radius:var(--r); text-decoration:none; white-space:nowrap;
}
.skip:focus{position:fixed; width:auto; height:auto; clip-path:none; left:12px; top:12px}
.page{padding:56px 0 24px; max-width:74ch}
.page h1{font-size:clamp(30px,4vw,42px); margin-bottom:8px}
.page h2{font-size:20px; margin:32px 0 10px; color:var(--vert-2)}
.page p, .page li{color:var(--ink-2); font-size:15.5px; margin-bottom:10px}
.page ul{padding-left:20px}
.page a{color:var(--vert-2)}
.page dl{display:grid; grid-template-columns:auto 1fr; gap:6px 18px; margin:14px 0}
.page dt{font-family:var(--fm); font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3)}
.page dd{margin:0; font-size:15px}
.retour{display:inline-block; margin-top:34px; font-family:var(--fm); font-size:12px; letter-spacing:.06em; color:var(--vert-2); text-decoration:none}
.retour:hover{text-decoration:underline}

/* ---------- traceur de plan ---------- */
.plan{border:1px solid var(--line); border-radius:var(--r); margin-bottom:22px; background:var(--card-2); overflow:hidden}
.plan-bar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid var(--line); background:var(--card)}
.seg.outils{flex:0 0 auto}
.seg.outils button{padding:7px 11px; font-size:12.5px; white-space:nowrap}
.plan-actions{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.lien{background:none; border:0; padding:2px 0; cursor:pointer; font-size:12.5px; color:var(--ink-2);
  border-bottom:1px solid var(--line); font-family:var(--fb)}
.lien:hover{color:var(--accent); border-bottom-color:var(--accent)}
.lien:disabled{opacity:.4; cursor:default; border-bottom-color:transparent}
.mini-chk{font-size:12.5px; padding:0; gap:6px; color:var(--ink-2)}
.mini-chk input{width:14px; height:14px}
#plan{display:block; width:100%; height:340px; background:var(--card-2); touch-action:none; cursor:crosshair}
#plan.deplacer{cursor:grab}
#plan.gomme{cursor:not-allowed}
.plan-pied{display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  padding:9px 12px; border-top:1px solid var(--line); background:var(--card); flex-wrap:wrap}
.plan-pied p{font-size:12px; color:var(--ink-3)}
.plan-tot{font-family:var(--fm); font-size:12.5px; color:var(--vert-2); font-weight:500; white-space:nowrap}
.hint{font-size:12.5px; color:var(--ink-3); line-height:1.5}
.cote{cursor:text}
.cote:hover rect{fill:var(--accent)}
.cote:hover text{fill:#fff}
.piquet{cursor:grab}
.plan-in{position:absolute; z-index:60; width:96px; padding:6px 8px; font-family:var(--fm); font-size:13px;
  border:1px solid var(--vert-2); border-radius:var(--r); background:var(--card); color:var(--ink);
  box-shadow:var(--shadow)}
#plan.pose .cote{pointer-events:none}
#plan.pose{cursor:copy}
#plan.gomme{cursor:not-allowed}
.mini label{display:block; font-family:var(--fm); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
[hidden]{display:none !important}