:root{--serif:'Bodoni Moda',Didot,Georgia,serif; --sans:'Manrope',system-ui,-apple-system,sans-serif; --mono:'JetBrains Mono',ui-monospace,Menlo,monospace; 
  --void:#14060A; --wine:#2E0F1A; --wine-lift:#4A1626; --wine-deep:#1C0810;
  --gold:#C9A24D; --gold-lt:#E8CF95; --gold-dim:#8A6C34;
  --cream:#F3E9DC; --muted:#B29699; --faint:#7C6265;
  --line:rgba(201,162,77,.16); --line-soft:rgba(243,233,220,.07);
  --card:rgba(255,255,255,.032);
  --glow:0;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; color:var(--cream); background:var(--void);
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(120% 62% at 50% 0%, var(--wine-lift) 0%, var(--wine) 34%, var(--wine-deep) 62%, var(--void) 100%);
}
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{max-width:660px; margin:0 auto; padding:0 22px 90px}

/* barre de lecture */
.read{position:fixed; top:0; left:0; right:0; height:2px; z-index:9; background:transparent}
.read i{display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold),var(--gold-lt));
  box-shadow:0 0 10px rgba(201,162,77,.5)}

/* ══════════ HERO ══════════ */
.hero{position:relative; text-align:center; padding:52px 22px 24px; overflow:hidden}
.halo{
  position:absolute; left:50%; top:22px; width:min(560px,132vw); aspect-ratio:1;
  transform:translateX(-50%); pointer-events:none; z-index:0;
  background:radial-gradient(circle,
    rgba(201,162,77,calc(.10 + var(--glow)*.30)) 0%,
    rgba(201,162,77,calc(.05 + var(--glow)*.15)) 32%, transparent 66%);
  filter:blur(14px); transition:background 1.1s var(--ease);
}
.wolf{
  position:relative; z-index:1; width:clamp(96px,24vw,124px); height:auto;
  filter:drop-shadow(0 10px 34px rgba(0,0,0,.62))
         drop-shadow(0 0 calc(16px + var(--glow)*26px) rgba(201,162,77,calc(.20 + var(--glow)*.42)));
  transition:filter 1.1s var(--ease);
}
.mark{
  position:relative; z-index:1; margin:17px 0 0;
  font-family:'Bodoni Moda',Didot,Georgia,serif; font-size:11.5px;
  letter-spacing:.5em; text-indent:.5em; text-transform:uppercase; color:var(--gold);
}
.hero h1{
  position:relative; z-index:1; margin:12px 0 0; color:var(--cream);
  font-family:'Bodoni Moda',Didot,Georgia,serif; font-weight:400;
  font-size:clamp(33px,8.8vw,50px); line-height:1.07; letter-spacing:-.012em;
}
.hero h1 em{font-style:italic; color:var(--gold-lt)}
.lede{position:relative; z-index:1; margin:17px auto 0; max-width:440px;
  color:var(--muted); font-size:15.5px; line-height:1.66}

/* bande produits */
.shelf{position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center;
  gap:9px; margin:28px auto 0; max-width:560px}
.shelf figure{margin:0; width:72px}
.shelf img{width:72px; height:72px; border-radius:13px; display:block; object-fit:cover;
  border:1px solid var(--line); box-shadow:0 6px 18px rgba(0,0,0,.4)}
.shelf figcaption{margin-top:6px; font-family:'JetBrains Mono',monospace; font-size:8.6px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--faint); line-height:1.3}
.legal{position:relative; z-index:1; margin:16px auto 0; max-width:430px;
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-dim)}

/* Le code est le SEUL mecanisme de commission : il doit etre impossible a rater. */
.codebox{position:relative; z-index:1; margin:30px auto 0; max-width:400px;
  padding:20px 22px 21px; border-radius:16px; cursor:pointer; text-align:center;
  background:linear-gradient(158deg, rgba(201,162,77,.13), rgba(74,22,38,.5));
  border:1px solid rgba(201,162,77,.42);
  box-shadow:0 14px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(232,207,149,.14);
  transition:.26s var(--ease)}
.codebox:hover{border-color:var(--gold); transform:translateY(-2px);
  box-shadow:0 18px 48px rgba(0,0,0,.48), 0 0 34px rgba(201,162,77,.16)}
.codebox .t{margin:0; font-family:'JetBrains Mono',monospace; font-size:9.8px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
.codebox .c{margin:9px 0 0; font-family:'Bodoni Moda',Didot,Georgia,serif; font-weight:500;
  font-size:clamp(40px,11vw,54px); line-height:1; letter-spacing:.13em; text-indent:.13em;
  color:var(--gold-lt); text-shadow:0 3px 22px rgba(201,162,77,.36)}
.codebox .d{margin:11px 0 0; font-size:14.4px; color:var(--cream)}
.codebox .hint{margin:9px 0 0; font-family:'JetBrains Mono',monospace; font-size:9.4px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint); transition:color .2s}
.codebox.ok .hint{color:var(--gold-lt)}
.codebox:focus-visible{outline:2px solid var(--gold-lt); outline-offset:4px}

/* Rappel du code sous chaque bouton produit */
.reminder{margin:11px 0 0; font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--gold-dim)}
.reminder b{color:var(--gold-lt); font-weight:500}

/* ══════════ SOMMAIRE ══════════ */
.toc{margin:30px 0 0; padding:22px 20px; border-radius:15px;
  background:linear-gradient(158deg, rgba(74,22,38,.5), rgba(28,8,16,.72));
  border:1px solid var(--line-soft)}
.toc p{margin:0 0 13px; font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
.toc ol{margin:0; padding:0; list-style:none; counter-reset:t}
.toc li{counter-increment:t; margin-bottom:2px}
.toc a{display:flex; gap:11px; align-items:baseline; padding:7px 8px; border-radius:8px;
  text-decoration:none; color:var(--muted); font-size:14.6px; transition:.2s var(--ease)}
.toc a::before{content:counter(t,decimal-leading-zero);
  font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--gold-dim); flex:0 0 auto}
.toc a:hover{background:rgba(201,162,77,.07); color:var(--cream)}

/* ══════════ SECTIONS ══════════ */
section{margin:46px 0 0; scroll-margin-top:20px}
.when{display:flex; align-items:center; gap:13px; margin:0 0 7px}
.when::after{content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent)}
.when b{font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold); white-space:nowrap}
h2{font-family:'Bodoni Moda',serif; font-weight:400; font-size:clamp(25px,6.2vw,31px);
  margin:0 0 12px; color:var(--cream); line-height:1.16; letter-spacing:-.008em}
h2 em{font-style:italic; color:var(--gold-lt)}
.intro{margin:0 0 20px; color:var(--muted); font-size:15.2px}
.intro b{color:var(--cream); font-weight:600}

/* ══════════ CARTE GÉNÉRIQUE ══════════ */
.card{background:var(--card); border:1px solid var(--line-soft); border-radius:14px;
  padding:19px 18px; margin-bottom:11px}
.card h3{margin:0 0 7px; font-size:16.5px; font-weight:600; color:var(--cream); line-height:1.32}
.card p{margin:0; color:var(--muted); font-size:14.6px}
.card p b{color:var(--cream); font-weight:600}

/* ══════════ FICHE PRODUIT ══════════ */
.prod{border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-bottom:14px;
  background:linear-gradient(158deg, rgba(74,22,38,.4), rgba(28,8,16,.66))}
.prod .ph{display:flex; align-items:center; gap:15px; padding:16px 18px;
  border-bottom:1px solid var(--line-soft)}
.prod .ph img{width:76px; height:76px; border-radius:12px; object-fit:cover; flex:0 0 auto;
  border:1px solid var(--line-soft)}
.prod .ph h3{margin:0; font-family:'Bodoni Moda',serif; font-weight:400; font-size:22px;
  color:var(--cream); line-height:1.18}
.prod .ph .sub{margin:5px 0 0; font-size:13.4px; color:var(--muted)}
.prod .pb{padding:17px 18px 19px}
.badge{display:inline-block; margin:0 0 12px; padding:4px 10px; border-radius:99px;
  font-family:'JetBrains Mono',monospace; font-size:9.6px; letter-spacing:.16em;
  text-transform:uppercase}
.badge.prio{background:rgba(201,162,77,.14); color:var(--gold-lt); border:1px solid var(--line)}
.badge.ctx{background:rgba(243,233,220,.05); color:var(--muted); border:1px solid var(--line-soft)}
.badge.no{background:rgba(190,90,90,.11); color:#E4A9A9; border:1px solid rgba(190,90,90,.24)}

/* ══════════ CLÉ / VALEUR ══════════ */
.kv{margin:0; padding:0}
.kv dt{font-family:'JetBrains Mono',monospace; font-size:9.8px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-dim); margin-bottom:4px}
.kv dd{margin:0 0 14px; color:var(--muted); font-size:14.5px; line-height:1.56}
.kv dd:last-child{margin-bottom:0}
.kv dd b{color:var(--cream); font-weight:600}

/* ══════════ CE QU'ON NE TE DIT PAS ══════════ */
.secret{margin:15px 0 0; padding:14px 16px; border-radius:11px;
  background:rgba(201,162,77,.07); border-left:2px solid var(--gold);
  color:var(--muted); font-size:14.2px; line-height:1.56}
.secret b{display:block; font-family:'JetBrains Mono',monospace; font-size:9.8px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; font-weight:500}
.warn{margin:15px 0 0; padding:14px 16px; border-radius:11px;
  background:rgba(190,90,90,.08); border-left:2px solid rgba(190,90,90,.5);
  color:var(--muted); font-size:14.2px; line-height:1.56}
.warn b{display:block; font-family:'JetBrains Mono',monospace; font-size:9.8px;
  letter-spacing:.16em; text-transform:uppercase; color:#E4A9A9; margin-bottom:6px; font-weight:500}

/* ══════════ LISTES ══════════ */
ul.dots{margin:0; padding:0; list-style:none}
ul.dots li{position:relative; padding-left:20px; margin-bottom:11px;
  color:var(--muted); font-size:14.8px; line-height:1.55}
ul.dots li::before{content:''; position:absolute; left:0; top:9px; width:5px; height:5px;
  border-radius:50%; background:var(--gold); opacity:.75}
ul.dots li b{color:var(--cream); font-weight:600}
ul.dots li:last-child{margin-bottom:0}

/* ══════════ ARBRE DE DÉCISION ══════════ */
.tree{counter-reset:q; margin:0; padding:0; list-style:none}
.tree li{counter-increment:q; position:relative; padding:0 0 20px 44px; margin:0}
.tree li::before{content:counter(q); position:absolute; left:0; top:-2px;
  width:29px; height:29px; border-radius:50%; display:grid; place-items:center;
  font-family:'Bodoni Moda',serif; font-size:15px; color:var(--gold-lt);
  border:1px solid var(--line); background:rgba(201,162,77,.07)}
.tree li::after{content:''; position:absolute; left:14px; top:32px; bottom:0; width:1px;
  background:linear-gradient(180deg,var(--line),transparent)}
.tree li:last-child{padding-bottom:0}
.tree li:last-child::after{display:none}
.tree h3{margin:0 0 4px; font-size:16.2px; font-weight:600; color:var(--cream); line-height:1.34}
.tree p{margin:0; color:var(--muted); font-size:14.4px}

/* ══════════ TABLEAU ══════════ */
.tw{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 4px;
  border:1px solid var(--line-soft); border-radius:13px}
table{border-collapse:collapse; width:100%; min-width:512px; font-size:14px}
th,td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line-soft); vertical-align:top}
th{font-family:'JetBrains Mono',monospace; font-size:9.6px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-dim); font-weight:500; white-space:nowrap}
td{color:var(--muted)}
td:first-child{color:var(--cream); font-weight:600; white-space:nowrap}
tr:last-child td{border-bottom:0}
.scroll-hint{margin:6px 0 0; font-family:'JetBrains Mono',monospace; font-size:9.6px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}

/* ══════════ BOUTONS ══════════ */
.go{display:inline-flex; align-items:center; gap:9px; margin-top:15px;
  padding:11px 19px; border-radius:10px; text-decoration:none;
  font-size:14.5px; font-weight:600;
  background:linear-gradient(135deg,var(--gold-lt),var(--gold));
  color:#1B0A10; border:0; transition:.24s var(--ease);
  box-shadow:0 5px 18px rgba(201,162,77,.18)}
.go:hover{transform:translateY(-1.5px); box-shadow:0 9px 26px rgba(201,162,77,.3)}
.go::after{content:'\2192'; font-size:15px; transition:transform .24s var(--ease)}
.go:hover::after{transform:translateX(3px)}
.go.quiet{background:transparent; color:var(--gold-lt); border:1px solid var(--line); box-shadow:none}
.go.quiet:hover{border-color:var(--gold); background:rgba(201,162,77,.06)}
.go:focus-visible{outline:2px solid var(--gold-lt); outline-offset:3px}
.toc a:focus-visible{outline:2px solid var(--gold-lt); outline-offset:2px}

/* ══════════ ENCADRÉ FORT ══════════ */
.pact{padding:25px 23px; border-radius:16px;
  background:linear-gradient(158deg, rgba(74,22,38,.55), rgba(28,8,16,.75));
  border:1px solid var(--line-soft); border-left:2px solid var(--gold)}
.pact .eyebrow{font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); margin:0 0 9px}
.pact h2{margin:0 0 11px}
.pact p{margin:0 0 14px; color:var(--muted); font-size:15px}
.pact p:last-child{margin-bottom:0}
.pact p b{color:var(--cream); font-weight:600}
.rule{margin-top:17px; padding:15px 17px; border-radius:11px;
  background:rgba(201,162,77,.08); border:1px solid var(--line)}
.rule p{margin:0; color:var(--cream); font-size:14.8px; line-height:1.58}
.rule .t{font-family:'JetBrains Mono',monospace; font-size:9.8px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); margin-bottom:6px}

/* ══════════ PANIERS ══════════ */
.basket{background:var(--card); border:1px solid var(--line-soft); border-radius:14px;
  padding:19px 18px; margin-bottom:11px}
.basket .n{font-family:'JetBrains Mono',monospace; font-size:9.8px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-dim); margin:0 0 7px}
.basket h3{margin:0 0 8px; font-family:'Bodoni Moda',serif; font-weight:400; font-size:20px;
  color:var(--cream); line-height:1.24}
.basket p{margin:0; color:var(--muted); font-size:14.6px}
.basket p b{color:var(--gold-lt); font-weight:600}

footer{margin-top:54px; padding-top:28px; border-top:1px solid var(--line-soft); text-align:center}
footer .m{font-family:'Bodoni Moda',serif; font-size:11px; letter-spacing:.52em;
  text-indent:.52em; color:var(--gold-dim); margin:0 0 8px}
footer p{margin:0 0 7px; color:var(--faint); font-size:12.6px; line-height:1.6}

/* ══════════ MOTION ══════════ */
@keyframes rise{from{opacity:0; transform:translateY(15px)} to{opacity:1; transform:none}}
@keyframes wolfIn{from{opacity:0; transform:translateY(16px) scale(.94)} to{opacity:1; transform:none}}
@keyframes haloIn{from{opacity:0} to{opacity:1}}
.wolf{animation:wolfIn 1.15s var(--ease) both}
.halo{animation:haloIn 1.7s ease-out both}
.mark{animation:rise .8s var(--ease) .34s both}
.hero h1{animation:rise .8s var(--ease) .44s both}
.lede{animation:rise .8s var(--ease) .56s both}
.shelf{animation:rise .8s var(--ease) .66s both}
.legal{animation:rise .8s var(--ease) .76s both}
/* Sans JS, tout reste visible : l'opacite 0 n'est posee que si l'animation est pilotee. */
.js-anim .reveal{opacity:0; transform:translateY(17px)}
.js-anim .reveal.in{animation:rise .72s var(--ease) both}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .js-anim .reveal{opacity:1; transform:none}
  html{scroll-behavior:auto}
}
@media (max-width:420px){
  .prod .ph{flex-direction:column; align-items:flex-start; gap:12px}
  .shelf figure{width:64px}
  .shelf img{width:64px; height:64px}
}