/* Mise en page « Kinetic » — charte Telefunken Lumière (Helvetica Neue, palette Telefunken, rouge en accent). */
body.k-page{margin:0;background:#f7f7f6;color:#141414;font-family:"TF Helvetica",Arial,sans-serif;-webkit-font-smoothing:antialiased;letter-spacing:-.01em;
  --panel:#e3e3e2;--bg:#f7f7f6;--ink:#141414;--grey:#a4a5a7;--t2:#5f6164;--line:#d9dadb;--night:#0e0e0f;--red:#e42a20;--redt:#c8231b;--ease:cubic-bezier(.23,1,.32,1)}
.k-page a{color:inherit;text-decoration:none}
.k-page button{font:inherit;color:inherit;cursor:pointer}
.k-page :focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.k-page p,.k-page h1,.k-page h2,.k-page h3{margin:0}
.k{overflow-x:clip}
.k-star{width:18px;height:18px;fill:var(--red);flex:none}
.k-dot{display:block;width:8px;height:8px;border-radius:50%;background:var(--red)}
.k-chip{display:inline-block;align-self:flex-start;height:24px;padding:0 12px;border-radius:999px;box-shadow:inset 0 0 0 1px currentColor;font-size:11px;line-height:24px;white-space:nowrap}
.k-eyebrow{font-size:13px;font-weight:700;color:var(--redt)}

/* héros : panneau gris arrondi en bas */
.k-hero{padding:0 0 0}
.k-panel{position:relative;background:var(--panel);border-radius:0 0 32px 32px;min-height:min(56vw,860px);overflow:hidden}
.k-nav{position:relative;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:24px max(40px,4vw)}
.k-logo{display:flex;align-items:center;gap:8px}.k-jw{width:22px;height:22px}.k-wm{height:14px;width:auto}
.k-links{display:flex;gap:30px;font-size:12px;color:#3a3b3d}
.k-links a[aria-current]{color:var(--ink);font-weight:700;position:relative}
.k-links a[aria-current]::after{content:"";position:absolute;left:50%;bottom:-8px;width:4px;height:4px;border-radius:50%;background:var(--ink);transform:translateX(-50%)}
.k-cart{justify-self:end;height:44px;padding:0 26px;border-radius:999px;border:1px solid var(--ink);background:transparent;font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px}
.k-cart [data-count]:not(.on){display:none}
.k-intro{position:relative;z-index:4;padding:3vw max(40px,4vw) 0;max-width:520px;display:flex;flex-direction:column;gap:14px}
.k-h1{font-size:clamp(32px,3.6vw,54px);line-height:1.04;font-weight:400;letter-spacing:-.03em}
.k-h1a{color:var(--ink)}.k-h1b{color:var(--grey);display:block}
.k-small{font-size:12px;line-height:1.45;color:var(--t2);max-width:300px}
.k-cta{align-self:flex-start;margin-top:12px;display:flex;align-items:center;gap:14px;height:58px;padding:0 26px 0 6px;border-radius:999px;border:0;background:#fff;font-size:14px;font-weight:700;transition:transform .16s var(--ease)}
.k-cta:not(:disabled):active{transform:scale(.97)}
.k-cta:disabled{cursor:default;color:var(--t2)}
.k-cta-img{width:72px;height:46px;border-radius:999px;background:var(--panel) center/cover;display:block}
.k-cta-p{color:var(--t2);font-weight:400}.k-cta-p:empty{display:none}
.k-msg:empty{display:none}.k-msg{font-size:13px;color:var(--redt)}
/* carte flottante empilée, à droite */
.k-float{position:absolute;z-index:4;right:max(40px,4vw);top:110px;width:min(26.4vw,360px);aspect-ratio:1.6}
.k-float-back{position:absolute;left:8%;right:8%;bottom:-14%;height:40%;border-radius:22px;background:#111 center/cover}
.k-float-card{position:absolute;inset:0;border-radius:24px;border:4px solid #fff;background:#222 center/cover;color:#fff;padding:14px 16px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.k-float-card::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.38)}
.k-float-card>*{position:relative}
.k-float-card b{display:block;margin-top:8px;font-size:clamp(14px,1.4vw,20px);font-weight:400;letter-spacing:-.015em}
.k-float-card small{font-size:11px;opacity:.8}
/* produit et nom géant */
.k-prod{position:absolute;z-index:2;left:50%;top:12%;height:64%;width:auto;max-width:56%;object-fit:contain;transform:translateX(-50%);transition:opacity 1s var(--ease)}
.k-giant{position:absolute;z-index:3;left:0;right:0;bottom:0;text-align:center;color:#fff;font-family:"TF Helvetica",Arial,sans-serif;font-weight:400;font-size:min(19.5vw,320px);line-height:.74;letter-spacing:-.035em;white-space:nowrap;transform:translateY(.02em);pointer-events:none}
body:not(.k-ready) .k-prod{opacity:0}

/* énoncé décalé */
.k-about{padding:120px max(40px,4vw) 110px;padding-left:max(40px,calc(4vw + 22%));display:flex;flex-direction:column;gap:22px}
.k-state{max-width:860px;font-size:clamp(28px,3.4vw,50px);line-height:1.14;font-weight:400;letter-spacing:-.03em;text-wrap:pretty}
.k-state .k-star{width:.5em;height:.5em;display:inline-block;vertical-align:.32em;margin-right:2.2em}
.k-state span{color:var(--grey)}
.k-pill{display:inline-block;width:2.4em;height:.92em;border-radius:999px;vertical-align:middle;position:relative;top:-.06em;background:var(--panel) center/cover}
.k-cap{font-size:12px;line-height:1.45;color:var(--t2);max-width:300px;margin-left:clamp(0px,9vw,140px)}

/* cartes en escalier */
.k-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,22px);padding:0 max(40px,4vw) 140px;align-items:start}
.k-card{position:relative;aspect-ratio:.78;border-radius:24px;padding:16px 18px 22px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:#000 center/cover}
.k-card:nth-child(even){margin-top:clamp(40px,6vw,96px)}
.k-dark{background:var(--night);color:#fff}
.k-light{background:var(--panel);color:var(--ink)}
.k-photo{color:#fff}
.k-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.6))}
.k-render{background-size:contain;background-repeat:no-repeat;background-color:#1b1b1c;background-position:center 30%}
.k-card>*{position:relative}
.k-card-img{flex:1;display:flex;align-items:center;justify-content:center;padding:10px 0}
.k-card-img img{max-height:150px;max-width:70%;object-fit:contain}
.k-card-t h3{margin-top:10px;font-size:clamp(15px,1.35vw,20px);line-height:1.2;font-weight:400;letter-spacing:-.015em}
.k-card-t p{margin-top:8px;font-size:11px;line-height:1.45;opacity:.6}
.k-light .k-card-t p{color:var(--t2);opacity:1}

/* vidéo */
.k-film{padding:0 max(40px,4vw) 140px}
.k-film-v{position:relative;border-radius:32px;overflow:hidden;aspect-ratio:2.2;background:#000}
.k-film-v video{width:100%;height:100%;object-fit:cover;display:block}
.k-film-t{position:absolute;left:clamp(20px,3vw,48px);bottom:clamp(20px,3vw,44px);max-width:460px;color:#fff;display:flex;flex-direction:column;gap:8px}
.k-film-t h2{font-size:clamp(22px,2.6vw,38px);font-weight:400;letter-spacing:-.03em;line-height:1.08}
.k-film-t p{font-size:13px;opacity:.8}
.k-vbtn{position:absolute;right:20px;bottom:20px;width:48px;height:48px;border-radius:50%;border:0;background:#fff;display:grid;place-items:center}
.k-vbtn i{width:0;height:0;border-left:11px solid var(--ink);border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.k-vbtn.on i{width:10px;height:13px;border:0;margin:0;background:linear-gradient(90deg,var(--ink) 0 3px,transparent 3px 7px,var(--ink) 7px)}

/* grand titre centré, coupé en bas */
.k-big{position:relative;padding:20px max(40px,4vw) 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:28px;max-height:clamp(320px,34vw,520px);overflow:hidden}
.k-mark{width:30px;height:30px}
.k-bigt{font-size:clamp(44px,7.4vw,118px);line-height:.98;font-weight:400;letter-spacing:-.04em;max-width:1200px;text-wrap:balance}
.k-bigt span{color:var(--grey)}
.k-big::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(180deg,rgba(247,247,246,0),var(--bg))}

/* caractéristiques */
.k-specs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(24px,5vw,80px);padding:120px max(40px,4vw)}
.k-specs-h{display:flex;flex-direction:column;gap:16px}
.k-h2{font-size:clamp(28px,3vw,44px);font-weight:400;letter-spacing:-.03em;line-height:1.05}.k-h2 span{color:var(--grey)}
.k-box{margin-top:16px;background:var(--panel);border-radius:24px;padding:22px 24px;font-size:14px}
.k-box ul{margin:10px 0 0;padding-left:18px;color:var(--t2);display:flex;flex-direction:column;gap:4px}
.k-specs dl{margin:0;border-top:1px solid var(--line)}
.k-specs dl div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px;padding:15px 0;border-bottom:1px solid var(--line);font-size:15px}
.k-specs dt{font-weight:700}.k-specs dd{margin:0;color:var(--t2)}

/* FAQ */
.k-faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(24px,5vw,80px);padding:0 max(40px,4vw) 120px}
.k-faq details{border-bottom:1px solid var(--line)}.k-faq details:first-child{border-top:1px solid var(--line)}
.k-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0;font-size:18px;letter-spacing:-.015em}
.k-faq summary::-webkit-details-marker{display:none}
.k-faq summary i{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--ink);position:relative;flex:none}
.k-faq summary i::before,.k-faq summary i::after{content:"";position:absolute;left:9px;right:9px;top:14px;height:1.5px;background:var(--ink);transition:transform .25s var(--ease)}
.k-faq summary i::after{transform:rotate(90deg)}.k-faq details[open] summary i::after{transform:none}
.k-faq details p{padding:0 0 20px;color:var(--t2);font-size:15px;line-height:1.55;max-width:620px}

/* pied */
.k-foot{margin:0 12px 12px;background:var(--panel);border-radius:32px;padding:36px max(28px,3vw);display:flex;flex-direction:column;gap:22px;font-size:12px;color:var(--t2)}
.k-foot-top{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.k-foot nav{display:flex;gap:24px;flex-wrap:wrap;font-size:13px;color:var(--ink)}
.k-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 28px;line-height:1.5}

/* panier commun */
.k-page .drawer{background:#fff;border-radius:24px}
.k-page .btn-buy{background:var(--ink);border-radius:999px;justify-content:center;padding:0 24px}.k-page .btn-buy .ico{display:none}

@media (max-width:900px){
  .k-links{display:none}.k-nav{grid-template-columns:auto 1fr;padding:18px 20px}
  .k-panel{min-height:0;padding-bottom:30vw}
  .k-intro{padding:12px 20px 0}
  .k-float{display:none}
  .k-prod{position:relative;display:block;left:50%;top:auto;height:auto;width:70%;max-width:none;margin:24px 0 -10vw}
  .k-giant{font-size:20vw}
  .k-about{padding:72px 20px}
  .k-state .k-star{margin-right:.6em}
  .k-cap{margin-left:0}
  .k-cards{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 20px 80px}
  .k-film{padding:0 20px 80px}.k-film-v{aspect-ratio:4/5}
  .k-specs,.k-faq{grid-template-columns:1fr;padding-left:20px;padding-right:20px}
  .k-specs{padding-top:72px;padding-bottom:72px}
}
@media (max-width:520px){
  .k-cards{grid-template-columns:1fr}.k-card:nth-child(even){margin-top:0}.k-card{aspect-ratio:1}
  .k-card-t p{font-size:13px}
  .k-specs dl div{grid-template-columns:1fr;gap:2px}
}
@media (prefers-reduced-motion:reduce){.k-prod{transition:none;opacity:1!important}}