/* =========================================================
   Vertebro NeckPulse — page unique
   ========================================================= */

:root{
  --ivory:#F5F2EC; --ivory-2:#EFEAE1; --paper:#FFFFFF;
  --ink:#141C18; --ink-2:#3A463F; --muted:#6E7A72;
  --forest:#153A2E; --forest-2:#1E5342; --jade:#8FBFA6; --jade-soft:#D9EAE0;
  --clay:#C46744; --clay-soft:#F3DFD5; --sand:#E4D9C7;
  --line:rgba(21,58,46,.12); --line-2:rgba(21,58,46,.07);
  --shadow-s:0 2px 6px rgba(20,28,24,.05);
  --shadow-m:0 14px 34px rgba(20,28,24,.09);
  --shadow-l:0 30px 70px rgba(20,28,24,.16);
  --r-s:12px; --r-m:18px; --r-l:24px; --r-xl:32px;
  --wrap:1120px; --head-h:60px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--ivory);color:var(--ink);line-height:1.58;font-size:15px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
ul{list-style:none}
h1,h2,h3,h4{font-family:'Fraunces','Georgia',serif;font-weight:500;line-height:1.08;letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,4.6vw,3.6rem)}
h2{font-size:clamp(1.7rem,2.9vw,2.4rem)}
h3{font-size:clamp(1.05rem,1.5vw,1.25rem)}
em{font-style:italic;color:var(--forest-2)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px;width:100%}
.section{padding:76px 0}
.center{text-align:center}
.lead{color:var(--muted);font-size:1rem;max-width:60ch}
.center .lead{margin-left:auto;margin-right:auto}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--forest-2)}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--jade)}
.center .eyebrow::after{content:"";width:22px;height:1px;background:var(--jade)}

/* ---------- Barre de progression ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--clay);z-index:120;transition:width .1s linear}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:100px;border:1px solid transparent;
  font-size:14.5px;font-weight:500;cursor:pointer;white-space:nowrap;
  transition:transform .18s ease,background .2s,box-shadow .25s,color .2s,border-color .2s}
.btn-primary{background:var(--forest);color:#fff;box-shadow:var(--shadow-s)}
.btn-primary:hover{background:var(--forest-2);transform:translateY(-2px);box-shadow:var(--shadow-m)}
.btn-clay{background:var(--clay);color:#fff}
.btn-clay:hover{background:#B25937;transform:translateY(-2px);box-shadow:var(--shadow-m)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--forest);background:rgba(21,58,46,.04)}
.btn-block{width:100%}
.btn-lg{padding:16px 32px;font-size:15.5px}

/* ---------- Header ---------- */
.announce{background:var(--forest);color:#EAF2ED;font-size:12px;height:32px;
  display:flex;align-items:center;justify-content:center;gap:22px;overflow:hidden}
.announce span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.announce .dot{width:4px;height:4px;border-radius:50%;background:var(--jade)}
@media(max-width:700px){.announce span:nth-child(n+2){display:none}}
.head{position:sticky;top:0;z-index:80;background:rgba(245,242,236,.84);
  backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line-2)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--head-h);gap:20px}
.logo{display:flex;align-items:center;gap:9px;font-family:'Fraunces',serif;font-size:21px;font-weight:600;letter-spacing:-.03em}
.logo-mark{width:28px;height:28px;border-radius:9px;background:var(--forest);display:grid;place-items:center;flex:none}
.logo-mark span{width:13px;height:13px;border:2px solid var(--jade);border-radius:50% 50% 50% 2px;transform:rotate(-45deg)}
.logo i{font-style:normal;color:var(--clay);margin-left:-3px}
.nav-links{display:flex;gap:26px}
.nav-links a{font-size:14px;color:var(--ink-2);position:relative;padding:3px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:0;background:var(--clay);transition:width .25s}
.nav-links a:hover::after{width:100%}
@media(max-width:860px){.nav-links{display:none}}
.btn-account{padding:10px 16px}
@media(max-width:620px){.btn-account .lbl{display:none}.btn-account{padding:10px;width:40px}}

/* ---------- Hero ---------- */
.hero{position:relative;padding:52px 0 68px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center}
.hero h1{margin:14px 0 16px}
.hero h1 em{display:block}
.hero-bullets{display:flex;flex-direction:column;gap:9px;margin:22px 0 26px}
.hero-bullets li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-2)}
.hero-bullets svg{flex:none;margin-top:3px;color:var(--jade)}
.buy-line{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.price-tag{display:flex;align-items:baseline;gap:8px}
.price-tag b{font-family:'Fraunces',serif;font-size:2.1rem;font-weight:600;letter-spacing:-.02em}
.price-tag span{font-size:13px;color:var(--muted)}
.trust-line{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.stars-s{color:#E0A43A;letter-spacing:1px}
.blob{position:absolute;border-radius:50%;filter:blur(72px);z-index:-1}
.blob-1{width:380px;height:380px;background:var(--jade);opacity:.42;top:-90px;right:-70px}
.blob-2{width:300px;height:300px;background:var(--clay-soft);opacity:.6;bottom:-110px;left:-90px}
@media(max-width:940px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-visual{order:-1;max-width:440px;margin:0 auto;width:100%}
}

/* ---------- Visuel produit animé ---------- */
.hero-visual{position:relative}
.stage{border-radius:var(--r-xl);background:linear-gradient(150deg,#E7F1EB,#DCEAE2 60%,#EFE6DA);
  box-shadow:var(--shadow-l);position:relative;overflow:hidden;line-height:0}
.stage img{width:100%;height:auto;border-radius:var(--r-xl)}

/* halos qui pulsent au-dessus des deux électrodes de la photo */
.pulse-pad{position:absolute;width:22%;padding-bottom:22%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(143,191,166,.75) 0%,rgba(143,191,166,.28) 42%,rgba(143,191,166,0) 70%);
  mix-blend-mode:screen;animation:padPulse 3.2s ease-in-out infinite}
.pulse-pad.p1{left:41%;top:27%}
.pulse-pad.p2{left:52%;top:34%;animation-delay:1.6s}
@keyframes padPulse{0%,100%{opacity:.25;transform:scale(.9)}50%{opacity:.85;transform:scale(1.15)}}
.chip-float{position:absolute;background:var(--paper);border-radius:14px;padding:10px 14px;
  box-shadow:var(--shadow-m);display:flex;align-items:center;gap:10px;z-index:3}
.chip-float strong{display:block;font-size:13px;font-weight:600;line-height:1.2}
.chip-float span{font-size:11.5px;color:var(--muted)}
.chip-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:var(--jade-soft);color:var(--forest)}
.cf-1{left:-16px;top:6%;animation:floaty 6s ease-in-out infinite}
.cf-2{right:-12px;bottom:8%;animation:floaty 6s ease-in-out infinite 1.4s}
.cf-3{left:4%;bottom:-20px;animation:floaty 6s ease-in-out infinite 2.8s}
@media(max-width:560px){.cf-3{display:none}.cf-1{top:-14px}.cf-2{bottom:-16px}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* animations internes au SVG */
.wave{transform-box:fill-box;transform-origin:50% 50%;animation:wave 2.6s ease-out infinite}
.wave.w2{animation-delay:.85s}
.wave.w3{animation-delay:1.7s}
@keyframes wave{0%{opacity:.75;transform:scale(.35)}70%{opacity:0;transform:scale(1.25)}100%{opacity:0;transform:scale(1.25)}}
.heat{transform-box:fill-box;transform-origin:50% 50%;animation:heat 4.4s ease-in-out infinite}
@keyframes heat{0%,100%{opacity:.28;transform:scale(1)}50%{opacity:.6;transform:scale(1.12)}}
.led{animation:led 2.2s ease-in-out infinite}
@keyframes led{0%,100%{opacity:1}50%{opacity:.3}}
.drift{animation:drift 9s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- Visuel pleine largeur ---------- */
.visual{margin:0;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-m);
  border:1px solid var(--line-2);background:var(--paper)}
.visual img{width:100%;height:auto;display:block}
.visual figcaption{padding:16px 22px;font-size:13.5px;color:var(--muted);text-align:center;
  border-top:1px solid var(--line-2)}

/* ---------- Bande défilante ---------- */
.strip{background:var(--forest);color:#DCEAE3;overflow:hidden;padding:13px 0}
.strip-track{display:flex;width:max-content;animation:slide 34s linear infinite}
.strip-track span{display:inline-flex;align-items:center;gap:10px;font-size:13px;
  letter-spacing:.03em;padding-right:44px;white-space:nowrap}
.strip-track b{color:var(--jade);font-weight:400}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Problème ---------- */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.pain{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-l);padding:26px 24px;
  transition:transform .3s,box-shadow .3s}
.pain:hover{transform:translateY(-5px);box-shadow:var(--shadow-m)}
.pain-ic{width:44px;height:44px;border-radius:14px;background:var(--clay-soft);color:var(--clay);
  display:grid;place-items:center;margin-bottom:16px}
.pain h3{margin-bottom:8px}
.pain p{font-size:14px;color:var(--muted)}
@media(max-width:860px){.pain-grid{grid-template-columns:1fr}}

/* ---------- Technologies ---------- */
.tech{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.tcard{position:relative;background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-l);
  overflow:hidden;transition:transform .3s,box-shadow .3s}
.tcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-m)}
.tcard-art{height:150px;background:var(--jade-soft);display:grid;place-items:center;position:relative;overflow:hidden}
.tcard:nth-child(2) .tcard-art{background:var(--clay-soft)}
.tcard:nth-child(3) .tcard-art{background:var(--sand)}
.tcard-body{padding:20px 22px 24px}
.tcard h3{margin-bottom:8px}
.tcard p{font-size:14px;color:var(--muted)}
.tcard .num{position:absolute;top:12px;left:14px;font-family:'Fraunces',serif;font-size:13px;
  color:var(--forest);opacity:.5}
@media(max-width:860px){.tech{grid-template-columns:1fr}}

/* ---------- Étapes ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px;position:relative}
.steps::before{content:"";position:absolute;top:26px;left:12%;right:12%;height:2px;
  background:linear-gradient(90deg,var(--jade),var(--clay));opacity:.35;z-index:0}
.step{position:relative;z-index:1;text-align:center}
.step-n{width:54px;height:54px;border-radius:50%;background:var(--forest);color:#fff;
  display:grid;place-items:center;margin:0 auto 16px;font-family:'Fraunces',serif;font-size:1.2rem;
  box-shadow:0 0 0 8px var(--ivory)}
.step h3{margin-bottom:7px;font-size:1.05rem}
.step p{font-size:14px;color:var(--muted);max-width:30ch;margin:0 auto}
@media(max-width:760px){.steps{grid-template-columns:1fr;gap:30px}.steps::before{display:none}}

/* ---------- Caractéristiques ---------- */
.spec-panel{background:var(--forest);color:#DCEAE3;border-radius:var(--r-xl);padding:44px;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;position:relative;overflow:hidden}
.spec-panel h2{color:#fff}
.spec-panel .eyebrow{color:var(--jade)}
.spec-panel .eyebrow::before{background:var(--jade)}
.spec-panel p{color:rgba(220,234,227,.72);margin-top:14px}
.spec-list{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.12);
  border-radius:var(--r-m);overflow:hidden}
.spec-list div{background:var(--forest);padding:14px 16px}
.spec-list dt{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(220,234,227,.55)}
.spec-list dd{font-size:14px;font-weight:500;color:#fff;margin-top:3px}
@media(max-width:900px){.spec-panel{grid-template-columns:1fr;padding:30px 24px}}
@media(max-width:520px){.spec-list{grid-template-columns:1fr}}

/* ---------- Avis ---------- */
.rev-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center}
.big-note{font-family:'Fraunces',serif;font-size:4.4rem;font-weight:600;line-height:1;letter-spacing:-.03em}
.bars{display:flex;flex-direction:column;gap:18px}
.bar-row span{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:7px;color:var(--ink-2)}
.bar{height:7px;border-radius:10px;background:var(--ivory-2);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:10px;background:var(--jade);transition:width 1.1s cubic-bezier(.2,.7,.3,1)}
.note-src{font-size:12px;color:var(--muted);margin-top:22px;line-height:1.5}
@media(max-width:860px){.rev-wrap{grid-template-columns:1fr;gap:26px}}

/* ---------- Précautions ---------- */
.care{background:var(--clay-soft);border:1px solid rgba(196,103,68,.3);border-radius:var(--r-l);
  padding:24px 26px;display:flex;gap:16px;align-items:flex-start}
.care svg{flex:none;color:var(--clay);margin-top:2px}
.care h3{font-size:1.02rem;margin-bottom:7px;color:#7A3A22}
.care p{font-size:13.5px;color:#7A3A22}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:34px auto 0}
.acc{border-bottom:1px solid var(--line-2)}
.acc-h{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 0;
  cursor:pointer;font-weight:500;font-size:15px}
.acc-h i{font-style:normal;font-size:20px;color:var(--muted);transition:transform .25s;flex:none}
.acc.open .acc-h i{transform:rotate(45deg)}
.acc-b{max-height:0;overflow:hidden;transition:max-height .35s ease;color:var(--muted);font-size:14px}
.acc.open .acc-b{max-height:300px}
.acc-b div{padding-bottom:18px}

/* ---------- Commande ---------- */
.order{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-xl);
  box-shadow:var(--shadow-m);overflow:hidden;display:grid;grid-template-columns:.95fr 1.05fr}
.order-side{background:linear-gradient(160deg,#E7F1EB,#DDE9E1 60%,#EFE6DA);padding:30px;display:flex;
  flex-direction:column;justify-content:center;gap:12px}
.order-photo{width:100%;max-width:230px;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:var(--r-m);margin:0 auto 6px;box-shadow:var(--shadow-s)}
.order-side .price-tag b{font-size:2.4rem}
.order-side ul{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.order-side li{display:flex;gap:9px;font-size:13.5px;color:var(--ink-2)}
.order-side svg{flex:none;margin-top:3px;color:var(--forest)}
.order-form{padding:34px}
.fld{display:block;margin-bottom:13px}
.fld span{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.fld input,.fld select{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--ivory);font-size:14px;outline:none;transition:border-color .2s,background .2s}
.fld input:focus,.fld select:focus{border-color:var(--forest);background:#fff}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.opt{padding:9px 16px;border-radius:100px;border:1px solid var(--line);background:var(--paper);
  font-size:13.5px;cursor:pointer;transition:.2s}
.opt:hover{border-color:var(--forest)}
.opt.on{background:var(--forest);color:#fff;border-color:var(--forest)}
.total-row{display:flex;justify-content:space-between;align-items:baseline;
  padding:14px 0;border-top:1px solid var(--line-2);margin-top:6px;font-size:15px}
.total-row b{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:600}
.form-note{font-size:11.5px;color:var(--muted);text-align:center;margin-top:11px}
@media(max-width:860px){.order{grid-template-columns:1fr}.order-form{padding:26px}}

/* ---------- Barre d'achat collante ---------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);border-top:1px solid var(--line-2);
  transform:translateY(110%);transition:transform .35s cubic-bezier(.4,0,.2,1);box-shadow:0 -8px 30px rgba(20,28,24,.08)}
.buybar.on{transform:translateY(0)}
.buybar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.buybar .bb-l{display:flex;align-items:center;gap:14px;min-width:0}
.buybar .bb-t{min-width:0}
.buybar strong{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar span{font-size:12.5px;color:var(--muted)}
.buybar .thumb{width:42px;height:42px;border-radius:11px;background:var(--jade-soft);flex:none;overflow:hidden}
.buybar .thumb img{width:100%;height:100%;object-fit:cover}
@media(max-width:560px){.buybar .bb-t span{display:none}}

/* ---------- Confirmation ---------- */
.done{text-align:center;padding:20px 0}
.done .ref{font-family:'Fraunces',serif;font-size:2rem;font-weight:600;margin:10px 0}

/* ---------- Footer ---------- */
.foot{background:var(--forest);color:#CFE0D7;padding:48px 0 24px;margin-top:70px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:34px}
.foot .logo{color:#fff}
.foot .logo-mark{background:rgba(255,255,255,.1)}
.foot p{font-size:13.5px;color:rgba(207,224,215,.72);margin-top:14px;max-width:38ch}
.foot h4{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;margin-bottom:14px}
.foot a{display:block;font-size:13.5px;color:rgba(207,224,215,.75);padding:5px 0}
.foot a:hover{color:#fff}
.foot-bottom{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:rgba(207,224,215,.6)}
.pay{display:flex;gap:7px}
.pay i{font-style:normal;font-size:10.5px;padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.1);color:#DCEAE3}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:26px}}

/* ---------- Apparition au scroll ---------- */
.reveal{opacity:0;transform:translateY(26px)}
.reveal.in{opacity:1;transform:none;transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.3,1)}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}