@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/Poppins-Light.ttf') format('truetype')}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Poppins-Regular.ttf') format('truetype')}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/Poppins-Medium.ttf') format('truetype')}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/Poppins-SemiBold.ttf') format('truetype')}

/* Default tokens = dark (overridden by data-theme) */
:root,
html[data-theme="dark"],
html.theme-dark{
  --bg:#0c0c0c; --bg2:#141414; --ink:#f3efe7; --muted:rgba(243,239,231,.62);
  --line:rgba(243,239,231,.18); --card:#161616; --accent:#FFC700; --phone-bg:#0c0c0c;
  --pic-pad:#111; --shadow:rgba(0,0,0,.45); --veil:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.15) 55%,transparent);
  --cover-ink:#f3efe7; --asm-bg:#000; --full-bg:#000; --full-ink:#f3efe7;
  color-scheme:dark;
}
html[data-theme="light"],
html.theme-light{
  --bg:#f7f5ef; --bg2:#fff; --ink:#111; --muted:rgba(17,17,17,.58);
  --line:rgba(17,17,17,.14); --card:#fff; --accent:#FFC700; --phone-bg:#1a1a1c;
  --pic-pad:#eceae3; --shadow:rgba(0,0,0,.12); --veil:linear-gradient(90deg,rgba(0,0,0,.4),rgba(0,0,0,.08) 55%,transparent);
  --cover-ink:#f3efe7; --asm-bg:#000; --full-bg:#000; --full-ink:#f3efe7;
  color-scheme:light;
}

html{scroll-behavior:smooth}
html,body{background:var(--bg);color:var(--ink)}
body,body *{transition:background-color .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease}
img,svg,.pt,.stage,.phone-screen,.progress>i{transition:none}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Poppins,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--muted);margin-bottom:14px}
h1{font-weight:300;font-size:clamp(36px,7vw,72px);line-height:1.05;letter-spacing:-.02em}
h2{font-weight:400;font-size:clamp(24px,3.4vw,34px);line-height:1.15;letter-spacing:-.01em;margin-bottom:16px}
p{font-size:clamp(14px,1.5vw,16px);line-height:1.65;font-weight:300;color:var(--ink)}
.em{border-left:2px solid var(--accent);padding-left:14px;margin-top:16px;font-weight:400}
.logo{height:24px;width:auto}
.logo-light{display:none} html[data-theme="dark"] .logo-light,html.theme-dark .logo-light{display:block}
.logo-dark{display:block} html[data-theme="dark"] .logo-dark,html.theme-dark .logo-dark{display:none}
html[data-theme="light"] .logo-light,html.theme-light .logo-light{display:none}
html[data-theme="light"] .logo-dark,html.theme-light .logo-dark{display:block}

.btn{display:inline-flex;align-items:center;gap:10px;background:#111;color:#fff;font-size:14px;font-weight:500;padding:12px 20px;border-radius:999px;border:0;cursor:pointer}
.btn .ic{width:15px;height:15px;color:var(--accent)}
.cta{position:fixed;right:18px;bottom:18px;z-index:40;box-shadow:0 10px 30px var(--shadow)}

.s{min-height:100svh;position:relative;display:flex;align-items:stretch;overflow:hidden}
.s.cover{display:block}
.cover .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);will-change:transform}
.cover.in .bg{transform:scale(1);transition:transform 6s ease-out}
.cover .veil{position:absolute;inset:0;background:var(--veil)}
.cover .cv{position:relative;z-index:1;min-height:100svh;padding:clamp(24px,5vw,64px);display:flex;flex-direction:column;color:var(--cover-ink)}
.cover .eyebrow{margin-top:auto;color:rgba(243,239,231,.8)}
.cover .sub{margin-top:12px;opacity:.88;font-weight:300}
.cover .logo{filter:none}
.cover .logo-light{display:block!important}
.cover .logo-dark{display:none!important}

.split{display:grid;grid-template-columns:1fr}
.split .txt{padding:clamp(48px,10vh,96px) clamp(22px,5vw,64px);display:flex;flex-direction:column;justify-content:center;background:var(--bg)}
.split .pic{min-height:55svh;position:relative;overflow:hidden;background:var(--pic-pad)}
.split .pic img.full{width:100%;height:100%;object-fit:cover;min-height:55svh}
.split .pic.contain{display:flex;align-items:center;justify-content:center;padding:40px;background:var(--pic-pad)}
.split .pic.contain img{max-width:min(420px,86%);max-height:70svh;width:auto;height:auto;object-fit:contain}
@media(min-width:900px){
  .split{grid-template-columns:minmax(320px,38%) 1fr;min-height:100svh}
  .split.flip{grid-template-columns:1fr minmax(320px,38%)}
  .split.flip .txt{order:2}
  .split.flip .pic{order:1}
  .split .pic{min-height:100svh}
  .split .pic img.full{min-height:100svh}
}

.ba{padding:clamp(48px,8vh,88px) clamp(22px,5vw,64px);background:var(--bg);display:flex;flex-direction:column;justify-content:center;width:100%}
.ba .grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:22px}
@media(min-width:800px){.ba .grid{grid-template-columns:1fr 1fr;gap:22px}}
.ba figure{background:var(--card);border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.ba img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ba figcaption{padding:14px 16px;font-size:13px;font-weight:300;color:var(--ink)}
.ba figcaption b{display:block;font-weight:500;margin-bottom:2px}

.full{background:var(--full-bg);color:var(--full-ink);padding:clamp(48px,8vh,80px) clamp(12px,4vw,48px);display:flex;flex-direction:column;justify-content:center;width:100%}
.full .eyebrow{color:rgba(243,239,231,.65)}
.heat-wrap{margin-top:18px;display:flex;justify-content:center}
.heat-wrap img{width:min(1100px,100%);height:auto;border-radius:8px}

.asm{background:var(--asm-bg);color:#f3efe7;height:420vh;position:relative}
.asm-st{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center;perspective:1400px;perspective-origin:50% 45%}
.stage{position:relative;width:min(92vw,720px);aspect-ratio:1;transform-style:preserve-3d;transform-origin:50% 55%;will-change:transform}
.pt{position:absolute;height:auto;will-change:transform,opacity,filter;user-select:none;pointer-events:none;transform-style:preserve-3d;backface-visibility:hidden}
.asm .cap{position:absolute;left:0;right:0;bottom:7svh;text-align:center;font-size:13px;opacity:0;transition:opacity .6s;padding:0 22px;pointer-events:none;color:#f3efe7}
.asm .cap span{display:block;color:var(--accent);font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px}
.asm.done .cap{opacity:1}
.asm.auto{height:100svh}
.progress{position:absolute;left:50%;bottom:3.5svh;transform:translateX(-50%);width:min(220px,40vw);height:2px;background:rgba(243,239,231,.15);border-radius:2px;overflow:hidden}
.progress>i{display:block;height:100%;width:0;background:var(--accent)}

.phone-wrap{display:flex;align-items:center;justify-content:center;background:var(--phone-bg);min-height:70svh;padding:40px 0;width:100%}
.phone{position:relative;width:min(280px,72vw);aspect-ratio:9/19.5}
.phone-bezel{position:absolute;inset:0;background:#1a1a1c;border-radius:42px;padding:12px 10px;border:2px solid #333}
.phone-island{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:90px;height:22px;background:#0a0a0a;border-radius:14px;z-index:2}
.phone-screen{width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:32px;display:block}

.mini{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin-top:22px;font-size:13px}
.mini dt{color:var(--muted)}.mini dd{font-weight:400}

.nums{padding:clamp(48px,8vh,96px) clamp(22px,5vw,64px);background:var(--bg);display:flex;flex-direction:column;width:100%}
.nums .nh{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px;gap:16px}
.n4{display:grid;grid-template-columns:1fr;gap:22px;border-top:1px solid var(--line);padding-top:22px}
@media(min-width:700px){.n4{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.n4{grid-template-columns:repeat(4,1fr);gap:28px}}
.n4 .big{font-size:clamp(28px,4vw,40px);font-weight:300;letter-spacing:-.02em;line-height:1.1;margin-bottom:8px}
.n4 p:not(.big){font-size:13px;color:var(--muted)}
.note{margin:18px 0 22px;font-size:12.5px;color:var(--muted);line-height:1.55;max-width:70ch}
.spec{border-collapse:collapse;width:100%;font-size:12px;margin:10px 0 28px}
.spec th,.spec td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);font-weight:300}
.spec th{font-weight:500;font-size:11px}.spec td:first-child{color:var(--muted)}
.nums .btn{align-self:flex-start;margin-top:auto}

.rv{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}
.rv.in{opacity:1;transform:none}
.parallax{will-change:transform}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  body,body *{transition:none!important}
  .rv{opacity:1;transform:none;transition:none}
  .cover .bg{transform:none!important;transition:none!important}
  .asm{height:auto}
  .asm-st{position:relative}
  .pt:not(.fin):not([data-k=thermo]){display:none}
  .asm .cap{opacity:1}
  .progress{display:none}
}

/* Assembly part positions (base layout) */
.pt[data-k=carcasse],.pt.fx{left:28%;top:10%;width:44%}
.pt[data-k=isolant]{left:31%;top:8%;width:30%}
.pt[data-k=b1]{left:32%;top:42%;width:28%}
.pt[data-k=b2]{left:32%;top:32%;width:28%}
.pt[data-k=b3]{left:32%;top:22%;width:28%}
.pt[data-k=elements]{left:32%;top:30%;width:28%}
.pt[data-k=ventilateur]{left:35%;top:62%;width:22%}
.pt.fin{left:10%;top:6%;width:80%}
.pt[data-k=thermo]{left:82%;top:36%;width:14%}
html.asm-preview,html.asm-preview body{background:#000;height:100%;overflow:hidden}
html.asm-preview .asm{height:100svh!important}
html.asm-preview .cta{display:none!important}
