/* ============================================================================
   ged ged — refonte : parcours en écrans
   Parti pris : quasi monochrome. La seule couleur du site vient des MEUBLES.
   C'est ce que font les marques d'intérieur haut de gamme : le fond se tait.
   ========================================================================== */
:root{
  --paper:#FAF9F7; --card:#FFFFFF; --sunk:#F2F0EC; --veil:rgba(250,249,247,.86);
  --ink:#131311; --ink2:#57564F; --ink3:#8A8880; --ink4:#BFBCB4;
  --line:#E4E1DA; --line2:#D2CEC5;
  --pop:#131311; --pop-ink:#FAF9F7;
  --ok:#3E6B4E; --warn:#96541F;
  --plan-line:#131311; --plan-fill:rgba(19,19,17,.07);
  --sh-1:0 1px 2px rgba(19,19,17,.05);
  --sh-2:0 2px 4px rgba(19,19,17,.04), 0 12px 28px -10px rgba(19,19,17,.14);
  --sh-3:0 4px 8px rgba(19,19,17,.05), 0 24px 60px -18px rgba(19,19,17,.22);
  --r:10px; --r-s:6px; --r-l:16px;
  --pad:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0D0D0C; --card:#161615; --sunk:#121211; --veil:rgba(13,13,12,.86);
  --ink:#F2F0EC; --ink2:#A5A29A; --ink3:#75726B; --ink4:#4A4842;
  --line:#242422; --line2:#33322E;
  --pop:#F2F0EC; --pop-ink:#131311;
  --ok:#7FB694; --warn:#CE9A5F;
  --plan-line:#F2F0EC; --plan-fill:rgba(242,240,236,.09);
  --sh-2:0 2px 4px rgba(0,0,0,.4), 0 12px 28px -10px rgba(0,0,0,.7);
  --sh-3:0 4px 8px rgba(0,0,0,.4), 0 24px 60px -18px rgba(0,0,0,.8);
}}
:root[data-theme="dark"]{
  --paper:#0D0D0C; --card:#161615; --sunk:#121211; --veil:rgba(13,13,12,.86);
  --ink:#F2F0EC; --ink2:#A5A29A; --ink3:#75726B; --ink4:#4A4842;
  --line:#242422; --line2:#33322E;
  --pop:#F2F0EC; --pop-ink:#131311;
  --ok:#7FB694; --warn:#CE9A5F;
  --plan-line:#F2F0EC; --plan-fill:rgba(242,240,236,.09);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 16px/1.5 "Instrument Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
button{font:inherit;cursor:pointer;color:inherit;border:0;background:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.hidden{display:none!important}
::selection{background:var(--ink);color:var(--paper)}

/* type display : Archivo très serrée, c'est elle qui donne le ton */
.dsp{font-family:Archivo,ui-sans-serif,system-ui,sans-serif;font-weight:700;
  letter-spacing:-.042em;line-height:.96}
.eyebrow{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink3)}

/* ---------- barre haute ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:60;background:var(--veil);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.top-in{max-width:1320px;margin:0 auto;padding:14px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{font-family:Archivo,sans-serif;font-weight:700;font-size:19px;letter-spacing:-.04em}
.top-r{display:flex;align-items:center;gap:18px}
.top-meta{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--ink3);
  font-variant-numeric:tabular-nums}
@media (max-width:700px){.top-meta{display:none}}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:100px;font-size:15px;font-weight:600;
  background:var(--pop);color:var(--pop-ink);letter-spacing:-.01em;
  transition:transform .18s var(--ease),opacity .18s var(--ease)}
.btn:hover{transform:translateY(-1px);opacity:.9}
.btn:active{transform:translateY(0)}
.btn-g{background:transparent;color:var(--ink);border:1px solid var(--line2)}
.btn-g:hover{border-color:var(--ink);opacity:1}
.btn-s{padding:9px 17px;font-size:13.5px;font-weight:500}
.btn[disabled]{opacity:.35;pointer-events:none}

/* ---------- écrans ---------- */
.view{display:none;padding-top:57px}
.view.on{display:block;animation:fade .38s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.view.on{animation:none}}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--pad)}

/* ================= 1. ACCUEIL ================= */
.hero{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,5vw,72px);
  align-items:center;padding:clamp(46px,7vw,96px) 0 clamp(40px,6vw,80px)}
@media (max-width:920px){.hero{grid-template-columns:1fr;gap:34px}}
.hero h1{font-size:clamp(44px,7.4vw,92px)}
.hero .lede{margin-top:24px;max-width:44ch;font-size:clamp(16.5px,1.7vw,19px);
  color:var(--ink2);line-height:1.45}
.hero-cta{margin-top:32px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hero-note{font-size:13px;color:var(--ink3)}

/* aperçu : une vraie composition calculée au chargement */
.peek{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-l);padding:18px;box-shadow:var(--sh-3)}
.peek-h{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:14px;gap:12px}
.peek-h .eyebrow{font-size:10px}
.peek-tot{font-family:"JetBrains Mono",monospace;font-weight:600;font-size:19px;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.peek-g{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.peek-g figure{margin:0;background:var(--sunk);border-radius:var(--r-s);overflow:hidden;
  aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.peek-g img{width:100%;height:100%;object-fit:contain}
.peek-f{display:flex;justify-content:space-between;margin-top:14px;
  font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink3);
  font-variant-numeric:tabular-nums}

/* bandeau chiffres */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip div{padding:22px 4px 22px 0}
.strip b{display:block;font-family:Archivo,sans-serif;font-weight:700;
  font-size:clamp(26px,3.4vw,38px);letter-spacing:-.035em;line-height:1}
.strip span{display:block;margin-top:7px;font-size:13px;color:var(--ink3)}

/* comment ça marche */
.how{padding:clamp(48px,7vw,96px) 0}
.how h2{font-size:clamp(28px,4vw,46px);max-width:16ch}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,46px);
  margin-top:clamp(30px,4vw,54px)}
@media (max-width:820px){.steps{grid-template-columns:1fr;gap:26px}}
.step-n{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink3);
  padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:16px}
.step h3{font-size:20px;letter-spacing:-.02em;margin-bottom:8px}
.step p{color:var(--ink2);font-size:15px;line-height:1.5}

/* ================= 2. PARCOURS ================= */
.flow{min-height:calc(100vh - 57px);display:flex;flex-direction:column}
.prog{height:2px;background:var(--line);position:relative}
.prog i{position:absolute;inset:0 auto 0 0;background:var(--ink);
  transition:width .45s var(--ease)}
.q{flex:1;display:flex;align-items:center;padding:clamp(34px,6vw,74px) 0}
.q-in{width:100%;max-width:860px;margin:0 auto;padding:0 var(--pad)}
.q-n{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink3);
  letter-spacing:.14em;text-transform:uppercase}
.q h2{font-family:Archivo,sans-serif;font-weight:700;letter-spacing:-.038em;line-height:1.02;
  font-size:clamp(30px,5vw,54px);margin:14px 0 10px}
.q .sub{color:var(--ink2);font-size:16px;max-width:52ch;margin-bottom:34px}
.q-foot{display:flex;align-items:center;gap:14px;margin-top:40px;flex-wrap:wrap}
.back{color:var(--ink3);font-size:14px;padding:8px 0}
.back:hover{color:var(--ink)}

/* cartes de style, avec vraies photos */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px}
.card{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;text-align:left;
  transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--line2)}
.card[aria-pressed="true"]{border-color:var(--ink);box-shadow:var(--sh-2)}
.card figure{margin:0;aspect-ratio:4/3;background:var(--sunk);overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.card figure img{width:100%;height:100%;object-fit:contain}
.card-b{padding:13px 15px 15px;display:flex;justify-content:space-between;
  align-items:baseline;gap:10px}
.card-b b{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.card-b span{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--ink3)}
.card[aria-pressed="true"] .tick{opacity:1;transform:scale(1)}
.tick{position:absolute;top:11px;right:11px;width:23px;height:23px;border-radius:50%;
  background:var(--ink);color:var(--paper);display:flex;align-items:center;
  justify-content:center;font-size:12px;opacity:0;transform:scale(.7);
  transition:opacity .18s var(--ease),transform .18s var(--ease)}

/* saisie dimensions */
.dimset{display:flex;align-items:flex-end;gap:clamp(14px,3vw,34px);flex-wrap:wrap}
.dimf label{display:block;font-size:13px;color:var(--ink3);margin-bottom:9px}
.dimf input{width:150px;padding:14px 16px;border:1px solid var(--line2);border-radius:var(--r-s);
  background:var(--card);color:var(--ink);font-family:"JetBrains Mono",monospace;
  font-size:26px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.dimf input:focus{outline:none;border-color:var(--ink)}
.dimx{font-size:22px;color:var(--ink4);padding-bottom:16px}
.dimr{padding-bottom:12px}
.dimr b{font-family:Archivo,sans-serif;font-weight:700;font-size:34px;letter-spacing:-.035em}
.dimr span{display:block;font-size:12.5px;color:var(--ink3);margin-top:2px}

/* budget */
.bignum{font-family:Archivo,sans-serif;font-weight:700;letter-spacing:-.045em;
  font-size:clamp(52px,10vw,104px);line-height:1;font-variant-numeric:tabular-nums}
.slider{width:100%;margin:30px 0 10px;accent-color:var(--ink);height:22px}
.ticks{display:flex;justify-content:space-between;font-family:"JetBrains Mono",monospace;
  font-size:11px;color:var(--ink3)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{padding:11px 19px;border:1px solid var(--line2);border-radius:100px;
  background:var(--card);font-size:14.5px;color:var(--ink2);
  transition:border-color .16s var(--ease),color .16s var(--ease)}
.pill:hover{border-color:var(--ink3);color:var(--ink)}
.pill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);
  color:var(--paper);font-weight:500}
.grp{margin-bottom:30px}
.grp > p{font-size:13.5px;color:var(--ink3);margin-bottom:11px}

/* ================= 3. CALCUL ================= */
.calc{min-height:calc(100vh - 57px);display:flex;align-items:center;justify-content:center;
  text-align:center;padding:40px var(--pad)}
.calc-in{max-width:460px;width:100%}
.calc h2{font-family:Archivo,sans-serif;font-weight:700;letter-spacing:-.035em;
  font-size:clamp(24px,3.6vw,34px);margin-bottom:34px}
.log{text-align:left;display:flex;flex-direction:column;gap:2px}
.log div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--line);font-family:"JetBrains Mono",monospace;
  font-size:12.5px;color:var(--ink4);font-variant-numeric:tabular-nums;
  transition:color .3s var(--ease)}
.log div.done{color:var(--ink)}
.log div em{font-style:normal;color:var(--ink3)}
.log div.done em{color:var(--ink2)}

/* ================= 4. RÉSULTAT ================= */
.res{padding:clamp(28px,4vw,52px) 0 100px}
.res-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  flex-wrap:wrap;margin-bottom:26px}
.res-top h2{font-family:Archivo,sans-serif;font-weight:700;letter-spacing:-.035em;
  font-size:clamp(26px,3.8vw,42px);line-height:1.03;max-width:15ch}
.res-top .eyebrow{margin-bottom:11px}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:30px}
@media (max-width:700px){.opts{grid-template-columns:1fr}}
.opt{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);text-align:left;transition:border-color .16s var(--ease)}
.opt:hover{border-color:var(--line2)}
.opt[aria-selected="true"]{border-color:var(--ink);box-shadow:var(--sh-1)}
.opt b{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.opt .mono{display:block;font-family:Archivo,sans-serif;font-weight:700;font-size:26px;
  letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.opt span{display:block;margin-top:4px;font-size:12px;color:var(--ink3)}

/* grille de meubles : les photos en GRAND, c'est un produit visuel */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px}
.piece{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.piece:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.piece-img{position:relative;aspect-ratio:1;background:var(--sunk);overflow:hidden}
.piece-img img{width:100%;height:100%;object-fit:contain;padding:12px}
.piece-tag{position:absolute;top:10px;left:10px;font-family:"JetBrains Mono",monospace;
  font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2);
  background:var(--veil);backdrop-filter:blur(6px);padding:4px 8px;border-radius:100px}
.piece-swap{position:absolute;bottom:10px;right:10px;font-size:11.5px;padding:6px 12px;
  border-radius:100px;background:var(--veil);backdrop-filter:blur(6px);
  border:1px solid var(--line);opacity:0;transition:opacity .18s var(--ease)}
.piece:hover .piece-swap,.piece:focus-within .piece-swap{opacity:1}
.piece-b{padding:13px 14px 15px;display:flex;flex-direction:column;gap:5px;flex:1}
.piece-n{font-size:14.5px;font-weight:600;letter-spacing:-.012em;line-height:1.28}
.piece-d{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--ink3);
  font-variant-numeric:tabular-nums}
.piece-p{font-family:"JetBrains Mono",monospace;font-size:15.5px;font-weight:600;
  margin-top:auto;padding-top:8px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* colonne latérale résultat */
.res-grid{display:grid;grid-template-columns:1fr 292px;gap:clamp(18px,2.4vw,32px);
  align-items:start}
@media (max-width:1020px){.res-grid{grid-template-columns:1fr}}
.side{position:sticky;top:75px;display:flex;flex-direction:column;gap:14px}
@media (max-width:1020px){.side{position:static}}
.box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:17px}
.box h3{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink3);font-weight:500;margin-bottom:14px}
.plan{display:block;width:100%;height:auto}
.plan-room{fill:none;stroke:var(--line2);stroke-width:1.5}
.plan-rug{fill:var(--plan-fill);stroke:var(--line2);stroke-width:.7;stroke-dasharray:3 2}
.plan-item{fill:var(--plan-fill);stroke:var(--plan-line);stroke-width:1}
.plan-lbl{font-family:"JetBrains Mono",monospace;font-size:6.4px;fill:var(--ink2);font-weight:600}
.plan-dim{font-family:"JetBrains Mono",monospace;font-size:6px;fill:var(--ink4)}
.cap{font-size:11.5px;color:var(--ink3);line-height:1.45;margin-top:11px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--line);font-size:13.5px}
.kv:last-child{border-bottom:0}
.kv dt{color:var(--ink3)}
.kv dd{margin:0;font-family:"JetBrains Mono",monospace;font-weight:600;
  font-variant-numeric:tabular-nums}
.kv dd.ok{color:var(--ok)}.kv dd.warn{color:var(--warn);font-size:11.5px;font-weight:500;
  text-align:right;max-width:170px}
.tools{display:flex;flex-direction:column;gap:8px}
.tools .btn{width:100%}

/* tiroir d'alternatives */
.drawer{grid-column:1/-1;background:var(--sunk);border:1px solid var(--line);
  border-radius:var(--r);padding:17px;margin-top:4px}
.drawer-h{display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin-bottom:14px}
.drawer-h .eyebrow{font-size:10px}
.swaps{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:11px}
.swap{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);
  overflow:hidden;text-align:left;transition:border-color .16s var(--ease)}
.swap:hover{border-color:var(--ink)}
.swap img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--sunk);padding:9px}
.swap-b{padding:10px 11px 12px}
.swap-n{font-size:12.5px;font-weight:500;line-height:1.3}
.swap-p{font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:600;margin-top:6px;
  font-variant-numeric:tabular-nums}
.dlt{font-weight:400;font-size:11px;color:var(--ok)}

/* ================= 5. LISTE D'ACHAT ================= */
.list{padding:clamp(30px,5vw,64px) 0 110px;max-width:880px;margin:0 auto}
.list h2{font-family:Archivo,sans-serif;font-weight:700;letter-spacing:-.038em;
  font-size:clamp(30px,5vw,52px);line-height:1.02}
.list .sub{color:var(--ink2);margin-top:14px;max-width:56ch;font-size:16px}
.shop{margin-top:38px;border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;background:var(--card)}
.shop-h{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:16px 20px;background:var(--sunk);border-bottom:1px solid var(--line);flex-wrap:wrap}
.shop-h b{font-size:16px;font-weight:600}
.shop-h .mono{font-weight:600;font-size:17px;letter-spacing:-.02em}
.line{display:grid;grid-template-columns:52px 1fr auto;gap:15px;align-items:center;
  padding:13px 20px;border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:0}
.line img{width:52px;height:52px;object-fit:contain;background:var(--sunk);
  border-radius:var(--r-s)}
.line-n{font-size:14.5px;font-weight:500;line-height:1.3}
.line-n a:hover{text-decoration:underline;text-underline-offset:3px}
.line-d{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--ink3);margin-top:3px}
.line-p{font-family:"JetBrains Mono",monospace;font-weight:600;font-size:14.5px;
  font-variant-numeric:tabular-nums}
.total{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px;background:var(--sunk);border-top:1px solid var(--line);flex-wrap:wrap}
.total-l{font-size:15px;color:var(--ink2)}
.total-v{font-family:Archivo,sans-serif;font-weight:700;font-size:32px;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}

footer{border-top:1px solid var(--line);margin-top:60px}
.foot-in{max-width:1320px;margin:0 auto;padding:24px var(--pad);font-size:12.5px;
  color:var(--ink3);display:flex;flex-wrap:wrap;gap:8px 28px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}