:root{
  --bg:#fffdfb;
  --surface:#f7f4f0;
  --surface-2:#efeae4;
  --line:#e3ddd5;
  --ink:#1a1714;
  --sub:#6b645d;
  --accent:#f26b21;
  --accent-ink:#c04c0c;
  --accent-soft:#fdeee4;
  --vital:#0f9b6c;
  --vital-soft:#e6f5ef;
  --shadow:0 1px 2px rgba(26,23,20,.05), 0 18px 40px -18px rgba(26,23,20,.28);
  --shadow-lift:0 2px 6px rgba(26,23,20,.06), 0 30px 60px -24px rgba(26,23,20,.35);
  --r:16px;
  --maxw:1140px;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#111010; --surface:#1a1817; --surface-2:#232120; --line:#2f2c2a;
    --ink:#f4f1ee; --sub:#a49d97; --accent:#ff8341; --accent-ink:#ffa878;
    --accent-soft:#2b1a10; --vital:#35d69a; --vital-soft:#0f2a20;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 40px -18px rgba(0,0,0,.7);
    --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 30px 60px -24px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --bg:#111010; --surface:#1a1817; --surface-2:#232120; --line:#2f2c2a;
  --ink:#f4f1ee; --sub:#a49d97; --accent:#ff8341; --accent-ink:#ffa878;
  --accent-soft:#2b1a10; --vital:#35d69a; --vital-soft:#0f2a20;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 40px -18px rgba(0,0,0,.7);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 30px 60px -24px rgba(0,0,0,.8);
}
:root[data-theme="light"]{
  --bg:#fffdfb; --surface:#f7f4f0; --surface-2:#efeae4; --line:#e3ddd5;
  --ink:#1a1714; --sub:#6b645d; --accent:#f26b21; --accent-ink:#c04c0c;
  --accent-soft:#fdeee4; --vital:#0f9b6c; --vital-soft:#e6f5ef;
  --shadow:0 1px 2px rgba(26,23,20,.05), 0 18px 40px -18px rgba(26,23,20,.28);
  --shadow-lift:0 2px 6px rgba(26,23,20,.06), 0 30px 60px -24px rgba(26,23,20,.35);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1,h2,h3{text-wrap:balance;margin:0;letter-spacing:-.025em;line-height:1.1}
h1{font-size:clamp(2.15rem,5.4vw,3.7rem);font-weight:800}
h2{font-size:clamp(1.65rem,3.5vw,2.4rem);font-weight:760}
h3{font-size:1.06rem;font-weight:700;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.lead{font-size:clamp(1.02rem,1.6vw,1.16rem);color:var(--sub);max-width:60ch}
.sub{color:var(--sub)}
section{padding:clamp(58px,8vw,108px) 0;border-top:1px solid var(--line)}
.stack{display:flex;flex-direction:column}
.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g24{gap:24px}.g32{gap:32px}.g48{gap:48px}

/* ---------- bandeau lancement ---------- */
.launch{background:var(--ink);color:var(--bg);font-size:.86rem}
.launch .wrap{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:center;
  padding-top:11px;padding-bottom:11px;text-align:center}
.pulsedot{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block;
  box-shadow:0 0 0 0 rgba(242,107,33,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(242,107,33,0)}100%{box-shadow:0 0 0 0 rgba(242,107,33,0)}}

nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.03em;font-size:1.22rem}
.brand .mark{width:27px;height:27px;flex:none}
.navlinks{display:flex;gap:26px;font-size:.92rem;color:var(--sub)}
.navlinks a{text-decoration:none}
.navlinks a:hover{color:var(--ink)}
@media(max-width:900px){.navlinks{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:999px;border:1px solid transparent;
  font-weight:650;font-size:.95rem;text-decoration:none;cursor:pointer;
  transition:transform .12s ease, filter .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-sm{padding:10px 17px;font-size:.88rem}

/* ---------- hero ---------- */
.hero{padding:clamp(44px,6vw,80px) 0 clamp(40px,6vw,72px);border-top:none}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,60px);align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr}}
.price-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px}
.price-big{font-size:2.5rem;font-weight:800;letter-spacing:-.035em}
.price-sub{color:var(--sub);font-size:.98rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:.8rem;font-weight:600;padding:6px 12px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);color:var(--sub)}
.chip.on{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink)}

/* photo + carte flottante */
.shot{position:relative;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lift);
  background:var(--surface);aspect-ratio:3/2}
.shot img{width:100%;height:100%;object-fit:cover}
.shot.tall{aspect-ratio:4/5}
.shot.square{aspect-ratio:1/1}
.hero-shot{position:relative}
.hero-shot .shot{aspect-ratio:4/5}
.hero-shot .shot img{object-position:62% 26%}
@media(max-width:940px){.hero-shot .shot{aspect-ratio:3/2}}
.vitals{position:absolute;left:14px;right:14px;bottom:14px;border-radius:15px;padding:11px 14px 12px;
  background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(14px);
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);box-shadow:var(--shadow)}
.vitals .top{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.ecg{flex:1;height:24px;display:block}
.ecg path{fill:none;stroke:var(--vital);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 3.4s linear infinite}
@keyframes draw{to{stroke-dashoffset:-1200}}
.readouts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.ro .k{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sub);font-weight:700}
.ro .v{font-size:1.14rem;font-weight:750;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:1px}
.ro .u{font-size:.7rem;color:var(--sub);font-weight:500}
@media (prefers-reduced-motion: reduce){
  .ecg path{animation:none;stroke-dashoffset:0}
  .pulsedot{animation:none}
  .btn:hover{transform:none}
}

/* compte a rebours */
.cd{display:flex;gap:10px;flex-wrap:wrap}
.cd-cell{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:10px 14px;min-width:74px;text-align:center}
.cd-n{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1}
.cd-l{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);font-weight:700;margin-top:2px}

/* ---------- blocs ---------- */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px);align-items:center}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.cols2,.cols3{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}.split .first{order:-1}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.card .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-ink);margin-bottom:12px}
.card.vital .ic{background:var(--vital-soft);color:var(--vital)}
.card p{font-size:.94rem;color:var(--sub);margin-top:6px}

.pill-h{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px;
  background:var(--vital-soft);color:var(--vital);width:fit-content}
.pill-h.loc{background:var(--accent-soft);color:var(--accent-ink)}

ul.feat{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
ul.feat li{display:flex;gap:11px;align-items:flex-start;font-size:.96rem}
ul.feat svg{flex:none;margin-top:4px}

/* ---------- mockup application ---------- */
.phone{width:min(300px,88vw);margin:0 auto;border-radius:38px;padding:11px;
  background:var(--ink);box-shadow:var(--shadow-lift)}
.screen{border-radius:28px;overflow:hidden;background:var(--bg);position:relative}
.screen .bar{display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px 8px;font-size:.72rem;color:var(--sub);font-weight:700}
.map{position:relative;height:210px;background:var(--surface-2)}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.zone{fill:color-mix(in srgb,var(--accent) 14%,transparent);
  stroke:var(--accent);stroke-width:2;stroke-dasharray:6 5}
.road{stroke:var(--bg);stroke-width:6;fill:none;stroke-linecap:round}
.road.thin{stroke-width:3.5}
.trail{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:2 5;stroke-linecap:round;opacity:.75}
.pinpulse{fill:var(--accent);opacity:.25;animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{r:6;opacity:.45}100%{r:26;opacity:0}}
.alert{margin:12px;padding:12px 14px;border-radius:14px;background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.alert .t{font-size:.84rem;font-weight:750;color:var(--accent-ink)}
.alert .d{font-size:.78rem;color:var(--sub);margin-top:2px}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 12px 16px}
.mini > div{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:9px 8px;text-align:center}
.mini .k{font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);font-weight:700}
.mini .v{font-size:.98rem;font-weight:760;font-variant-numeric:tabular-nums;margin-top:2px}
@media (prefers-reduced-motion: reduce){.pinpulse{animation:none;opacity:.25}}

/* ---------- prix ---------- */
.pricing{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;align-items:start}
@media(max-width:900px){.pricing{grid-template-columns:1fr}}
.pcard{border:1px solid var(--line);border-radius:18px;padding:26px;background:var(--surface)}
.pcard.main{border-color:var(--accent);background:var(--bg);box-shadow:var(--shadow);position:relative}
.tagpop{position:absolute;top:-11px;left:26px;background:var(--accent);color:#fff;
  font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 11px;border-radius:999px}
.plist{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:9px;font-size:.94rem}
.plist li{display:flex;gap:10px;align-items:flex-start}
.why{background:var(--surface-2);border-radius:var(--r);padding:20px;font-size:.93rem;color:var(--sub)}
.why b{color:var(--ink)}

/* ---------- specs ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:.93rem;min-width:460px}
th,td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--line);vertical-align:top}
th{width:36%;font-weight:650;color:var(--sub);background:var(--surface);white-space:nowrap}
tr:last-child th,tr:last-child td{border-bottom:none}

/* ---------- faq ---------- */
details{border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;background:var(--surface)}
details+details{margin-top:10px}
summary{cursor:pointer;font-weight:650;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.3rem;color:var(--sub);font-weight:400;line-height:1}
details[open] summary::after{content:"\2013"}
details p{margin-top:11px;font-size:.94rem;color:var(--sub)}
summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------- formulaire ---------- */
.cta-band{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:clamp(26px,4vw,44px)}
form{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
input[type=email]{flex:1;min-width:230px;padding:13px 16px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:.96rem;font-family:inherit}
input[type=email]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.formnote{font-size:.8rem;color:var(--sub);margin-top:11px}
.ok{display:none;margin-top:14px;padding:12px 16px;border-radius:12px;
  background:var(--vital-soft);color:var(--vital);font-size:.92rem;font-weight:600}
.ok.show{display:block}

footer{padding:36px 0 46px;border-top:1px solid var(--line);color:var(--sub);font-size:.87rem}
.footrow{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center}

/* ================= ajouts multi-pages (27/07) ================= */

/* les ancres ne doivent plus passer sous la barre collante */
[id]{scroll-margin-top:88px}

/* ---------- en-tete des pages interieures ---------- */
.page-head{padding:clamp(44px,6vw,76px) 0 clamp(28px,4vw,44px);border-top:none}
.page-head .wrap{max-width:820px}
.crumb{font-size:.84rem;color:var(--sub)}
.crumb a{text-decoration:none;border-bottom:1px solid var(--line)}
.crumb a:hover{color:var(--ink)}

/* ---------- prose (pages legales) ---------- */
.prose{max-width:72ch;display:flex;flex-direction:column;gap:26px}
.prose h2{font-size:clamp(1.3rem,2.4vw,1.65rem);margin-top:14px}
.prose h3{font-size:.76rem;color:var(--sub);text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.prose p,.prose li{font-size:.97rem;color:var(--sub)}
.prose b,.prose strong{color:var(--ink)}
.prose ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.prose section{padding:0;border-top:none}
.blk{display:flex;flex-direction:column;gap:10px}
.todo{display:inline-block;background:var(--accent-soft);color:var(--accent-ink);
  border:1px dashed var(--accent);border-radius:7px;padding:1px 8px;font-size:.86rem;
  font-weight:650;white-space:nowrap}
.notice{background:var(--surface-2);border-left:3px solid var(--accent);border-radius:0 12px 12px 0;
  padding:16px 18px;font-size:.92rem;color:var(--sub)}
.maj{font-size:.84rem;color:var(--sub)}

/* ---------- comment ca marche : 3 etapes ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:step}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:24px 22px 22px}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);
  display:block;font-size:.78rem;font-weight:800;letter-spacing:.12em;color:var(--accent-ink);
  margin-bottom:10px}
.step h3{margin-bottom:6px}
.step p{font-size:.94rem;color:var(--sub)}

/* ---------- tableau comparatif ---------- */
.compare{width:100%;border-collapse:collapse;font-size:.94rem;min-width:560px}
.compare th,.compare td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left}
.compare thead th{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);
  background:var(--surface);white-space:nowrap}
.compare thead th.us{color:var(--accent-ink);background:var(--accent-soft)}
.compare tbody th{font-weight:600;color:var(--ink);background:transparent;width:34%}
.compare td.us{background:color-mix(in srgb,var(--accent-soft) 55%,transparent);font-weight:600;color:var(--ink)}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:none}
.yes{color:var(--vital);font-weight:700}
.no{color:var(--sub)}

/* ---------- pied de page en colonnes ---------- */
footer{padding:clamp(40px,5vw,60px) 0 44px}
.footgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
@media(max-width:760px){.footgrid{grid-template-columns:1fr 1fr}.footgrid .fbrand{grid-column:1/-1}}
.footgrid h4{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);
  font-weight:800;margin:0 0 12px}
.footgrid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:.92rem}
.footgrid a{text-decoration:none;color:var(--sub)}
.footgrid a:hover{color:var(--ink)}
.footbottom{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:.84rem}

/* ---------- menu burger ---------- */
.navright{display:flex;align-items:center;gap:10px}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg);cursor:pointer;padding:0;align-items:center;justify-content:center;
  flex-direction:column;gap:5px}
.burger span{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .18s ease, opacity .18s ease}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.burger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.menumobile{border-top:1px solid var(--line);background:var(--bg)}
.menumobile .wrap{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;padding-top:10px;padding-bottom:18px;text-align:left}
.menumobile a{padding:13px 4px;text-decoration:none;font-weight:600;border-bottom:1px solid var(--line)}
.menumobile a[aria-current="page"]{color:var(--accent-ink)}
.menumobile .btn{margin-top:14px;border-bottom:none}
@media(max-width:900px){
  .burger{display:flex}
  .navright .btn-primary{display:none}
}
@media (prefers-reduced-motion: reduce){.burger span{transition:none}}

/* ---------- bandeau de reassurance sous le hero ---------- */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  padding-top:20px;padding-bottom:20px}
@media(max-width:820px){.trust .wrap{grid-template-columns:1fr 1fr;gap:16px}}
.trust div{display:flex;gap:10px;align-items:flex-start;font-size:.9rem}
.trust svg{flex:none;margin-top:2px;color:var(--accent)}
.trust b{display:block;font-weight:650;color:var(--ink);font-size:.92rem;margin-bottom:1px}
.trust span{color:var(--sub);font-size:.84rem}

/* ---------- double entree chien / chat dans le hero ---------- */
.duo{display:flex;gap:10px;flex-wrap:wrap}
.duo a{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);text-decoration:none;
  font-weight:650;font-size:.92rem;transition:border-color .15s ease}
.duo a:hover{border-color:var(--accent)}

/* =================================================================
   Direction artistique v2 (27/07) : sortir du gabarit generique.
   Reperes pris chez Weenect (hero photo plein cadre, type enorme en
   couleur de marque) et Invoxia (blocs noirs contrastes, vitrine
   produit sur fond sombre). Police d'affichage propre.
   ================================================================= */

@font-face{font-family:"Bricolage";font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/fonts/bricolage-700.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage";font-style:normal;font-weight:800;font-display:swap;
  src:url("/assets/fonts/bricolage-800.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --display:"Bricolage",ui-sans-serif,system-ui,sans-serif;
  --night:#16110d;
  --night-2:#201913;
  --paper:#fbf7f2;
  --bg:var(--paper);
  --surface:#f4ede4;
  --surface-2:#ebe1d5;
  --line:#e2d6c7;
  --ink:#1b1512;
  --sub:#6e6259;
}
@media (prefers-color-scheme: dark){
  :root{--bg:#16110d;--surface:#201913;--surface-2:#2a2119;--line:#362b22;
        --ink:#f6f0e9;--sub:#a89c91;--paper:#16110d}
}
:root[data-theme="dark"]{--bg:#16110d;--surface:#201913;--surface-2:#2a2119;--line:#362b22;
        --ink:#f6f0e9;--sub:#a89c91;--paper:#16110d}
:root[data-theme="light"]{--bg:#fbf7f2;--surface:#f4ede4;--surface-2:#ebe1d5;--line:#e2d6c7;
        --ink:#1b1512;--sub:#6e6259;--paper:#fbf7f2}

h1,h2,.price-big,.cd-n,.brand{font-family:var(--display)}
h1{font-weight:800;letter-spacing:-.035em;line-height:.98}
h2{font-weight:800;letter-spacing:-.03em;line-height:1.02}
h3{font-family:var(--display);font-weight:700;letter-spacing:-.015em}
.brand{font-weight:800;letter-spacing:-.045em}
.eyebrow{letter-spacing:.2em}

/* geometrie plus ferme : moins de pilules, des angles assumes */
:root{--r:10px}
.card,.pcard,details,.cta-band,.tablewrap,.why,.step,.notice{border-radius:12px}
.btn{border-radius:8px;font-weight:700;padding:15px 26px}
.btn-sm{padding:11px 18px}
.chip,.duo a,.pill-h{border-radius:6px}

/* ---------- hero sombre, photo plein cadre ---------- */
.hero-dark{background:var(--night);color:#f8f3ed;border-top:none;padding:0;overflow:hidden}
.hero-dark .hero-inner{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  align-items:stretch}
.hero-copy{display:flex;flex-direction:column;gap:22px;justify-content:center;
  padding:clamp(48px,6vw,86px) clamp(28px,4vw,56px) clamp(48px,6vw,86px)
          max(24px,calc((100vw - 1140px)/2))}
.hero-dark h1{color:#fff;font-size:clamp(2.6rem,6vw,4.6rem)}
.hero-dark .eyebrow{color:var(--accent)}
.hero-dark .lead{color:#cdc2b7;max-width:46ch}
.hero-dark .price-big{color:#fff}
.hero-dark .price-sub{color:#cdc2b7}
.hero-media{position:relative;min-height:clamp(380px,62vh,700px)}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:62% 26%}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--night) 0%,rgba(22,17,13,.35) 22%,transparent 55%)}
@media(max-width:940px){
  .hero-dark .hero-inner{grid-template-columns:1fr}
  .hero-media{min-height:340px;order:-1}
  .hero-media::after{background:linear-gradient(0deg,var(--night) 0%,transparent 45%)}
  .hero-copy{padding:34px 24px 46px}
}
.hero-dark .cd-cell{background:var(--night-2);border-color:#392d23}
.hero-dark .cd-n{color:#fff}
.hero-dark .cd-l{color:#a89c91}
.hero-dark .duo a{background:transparent;border-color:#3c2f24;color:#f0e8e0}
.hero-dark .duo a:hover{border-color:var(--accent)}
.hero-dark .btn-ghost{color:#fff;border-color:#4a3a2d}
.hero-dark .vitals{background:rgba(16,12,9,.72);border-color:rgba(255,255,255,.14);
  backdrop-filter:blur(16px);color:#f6f0e9;left:auto;right:22px;bottom:22px;
  width:min(340px,calc(100% - 44px))}
.hero-dark .vitals .ro .k{color:#a89c91}
.hero-dark .vitals .ro .v{color:#fff}
.hero-dark .vitals .ro .u{color:#a89c91}
@media(max-width:940px){.hero-dark .vitals{left:16px;right:16px;width:auto}}

/* bandeau de reassurance : sur le sombre, en bas du hero */
.hero-dark .trust{background:var(--night-2);border-top:1px solid #2e241c;border-bottom:none}
.hero-dark .trust b{color:#fff}
.hero-dark .trust span{color:#a89c91}
.hero-dark .trust .wrap{max-width:1140px}

/* nav : plus dense, moins flottante */
nav{background:var(--bg);backdrop-filter:none;border-bottom:1px solid var(--line)}
.navlinks a{font-weight:600}

/* ---------- vitrine produit sur fond noir (repere Invoxia) ---------- */
.showcase{background:var(--night);color:#f8f3ed;border-radius:16px;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;align-items:center}
@media(max-width:820px){.showcase{grid-template-columns:1fr}}
.showcase .txt{padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;gap:16px}
.showcase h2{color:#fff}
.showcase .lead{color:#cdc2b7}
.showcase .price-big{color:#fff}
.showcase .price-sub{color:#cdc2b7}
.showcase .media{position:relative;min-height:320px;height:100%}
.showcase .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.showcase .tag{align-self:flex-start;background:var(--accent);color:#fff;font-size:.7rem;
  font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:5px}

/* barre de navigation sombre : elle prolonge le hero au lieu de le couper */
nav{background:var(--night);border-bottom:1px solid #2e241c}
nav .brand{color:#fff}
.navlinks a{color:#c3b8ad}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:#fff}
.burger{background:transparent;border-color:#3c2f24}
.burger span{background:#f6f0e9}
.menumobile{background:var(--night);border-top-color:#2e241c}
.menumobile a{color:#f0e8e0;border-bottom-color:#2e241c}
.menumobile a[aria-current="page"]{color:var(--accent)}
.launch{background:var(--night-2);color:#e8ded3;border-bottom:1px solid #2e241c}
.launch b{color:#fff}