:root{
  /* thème nuit alpine : nuit bleu-violet, rose néon de l'étiquette, lueur des bougies */
  --noir:#090a16; --noir2:#10122a; --noir3:#191b3a;
  --or:#e86fd8; --or2:#f7b8ec; --ambre:#f3b766; --creme:#eef0f8; --gris:#9ca1c0; --ligne:rgba(214,170,240,.16);
  --serif:'Bodoni Moda',Georgia,serif; --sans:'Manrope',system-ui,sans-serif;
  --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--noir);color:var(--creme);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
em{font-style:italic;color:var(--or2)}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.05;letter-spacing:-.01em}
.eyebrow{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--or)}

/* bandeau défilant */
.topbar{background:var(--or);color:var(--noir);font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;overflow:hidden;white-space:nowrap;padding:8px 0}
.marquee span{display:inline-block;padding-left:100%;animation:defile 30s linear infinite}
@keyframes defile{to{transform:translateX(-100%)}}

/* header */
.header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:18px 5vw;transition:.3s}
.header.scrolled{background:rgba(9,10,22,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--ligne);padding:12px 5vw}
.logo{font-family:var(--serif);font-size:1.5rem;letter-spacing:.02em}
.nav{display:flex;gap:34px;font-size:.88rem;color:var(--gris)}
.nav a:hover{color:var(--or2)}
.cart-btn{position:relative;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--ligne);border-radius:50%}
.cart-btn:hover{border-color:var(--or)}
.cart-count{position:absolute;top:-4px;right:-4px;background:var(--or);color:var(--noir);font-size:.7rem;font-weight:700;min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 28px;border-radius:999px;font-weight:600;font-size:.92rem;transition:.25s}
.btn-gold{background:linear-gradient(135deg,var(--or2),var(--or));color:var(--noir)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(232,111,216,.6)}
.btn-ghost{border:1px solid var(--ligne);color:var(--creme)}
.btn-ghost:hover{border-color:var(--or2)}
.btn-full{width:100%}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:4vw;padding:6vh 5vw 10vh;min-height:calc(100vh - 110px)}
.hero h1{font-size:clamp(2.8rem,6.4vw,6rem);margin:18px 0 22px}
.lead{color:var(--gris);font-size:1.08rem;max-width:30em}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin:34px 0 46px}
.hero-proof{list-style:none;display:flex;gap:40px;border-top:1px solid var(--ligne);padding-top:22px;color:var(--gris);font-size:.8rem}
.hero-proof strong{display:block;font-family:var(--serif);font-size:1.6rem;font-weight:500;color:var(--creme)}
.hero-art{position:relative;height:min(78vh,640px);overflow:hidden}
.halo{position:absolute;inset:10% 5%;background:radial-gradient(circle at 50% 55%,rgba(232,111,216,.38),transparent 62%);filter:blur(10px)}
.bubbles{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(214,170,240,.5) 1.5px,transparent 2px),radial-gradient(circle,rgba(214,170,240,.3) 1px,transparent 1.5px);background-size:90px 130px,60px 80px;mask:linear-gradient(transparent,#000 40%,transparent);animation:monte 14s linear infinite;opacity:.6}
@keyframes monte{to{background-position:0 -1300px,0 -800px}}
.hero-bottles{position:absolute;inset:4% 6% 0;display:flex;align-items:flex-end;justify-content:center;gap:0}
.hb{height:68%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6));animation:flotte 6s ease-in-out infinite}
.hb1{height:88%;z-index:2;animation-delay:-2s}
.hb0{transform:rotate(-8deg);animation-delay:-1s}
.hb2{transform:rotate(8deg);animation-delay:-3.5s}
@keyframes flotte{50%{translate:0 -14px}}

/* sections */
.section{padding:12vh 5vw}
.sec-head{text-align:center;max-width:40em;margin:0 auto 56px}
.sec-head h2{font-size:clamp(2.2rem,4.6vw,3.8rem);margin:12px 0}
.sec-head p:last-child{color:var(--gris)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.grid-pods{grid-template-columns:repeat(3,1fr)}
.card{background:var(--noir2);border:1px solid var(--ligne);border-radius:var(--r);overflow:hidden;transition:.35s}
.card:hover{border-color:rgba(214,170,240,.45);transform:translateY(-4px)}
.card-media{position:relative;width:100%;aspect-ratio:4/5;display:grid;place-items:center;background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--c) 32%,transparent),transparent 65%),var(--noir3)}
.grid-pods .card-media{aspect-ratio:1}
.card-media .bt{height:74%;transition:transform .5s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 20px 24px rgba(0,0,0,.5))}
.card:hover .bt{transform:translateY(-8px) rotate(-3deg)}
.badge{position:absolute;top:14px;left:14px;background:var(--or);color:var(--noir);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.card-body{padding:18px 20px 20px}
.card-gamme{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.card h3{font-size:1.45rem;margin:6px 0 14px}
.card-foot{display:flex;align-items:center;justify-content:space-between}
.prix{font-weight:600;font-size:1.05rem}
.btn-add{border:1px solid var(--ligne);border-radius:999px;padding:9px 18px;font-size:.82rem;font-weight:600;transition:.2s}
.btn-add:hover{background:var(--or);color:var(--noir);border-color:var(--or)}

/* bande étapes */
.band{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--ligne);background:var(--noir2)}
.band-item{padding:56px 5vw 56px 4vw;border-right:1px solid var(--ligne)}
.band-item:last-child{border:0}
.band-item span{font-family:var(--serif);font-size:2.6rem;color:var(--or)}
.band-item h3{font-size:1.5rem;margin:8px 0}
.band-item p{color:var(--gris);font-size:.94rem}

/* maison */
.maison{display:grid;grid-template-columns:1.2fr 1fr;gap:6vw;align-items:center;padding:12vh 5vw;background:linear-gradient(180deg,var(--noir),var(--noir2))}
.maison h2{font-size:clamp(2.1rem,4.2vw,3.5rem);margin:14px 0 22px}
.maison-txt>p{color:var(--gris);max-width:34em}
.checks{list-style:none;margin-top:26px;display:grid;gap:10px}
.checks li::before{content:'✦';color:var(--or);margin-right:12px}
.maison-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ligne);border:1px solid var(--ligne);border-radius:var(--r);overflow:hidden}
.maison-stats div{background:var(--noir2);padding:34px 26px}
.maison-stats strong{display:block;font-family:var(--serif);font-size:2.8rem;font-weight:500;color:var(--or2)}
.maison-stats span{color:var(--gris);font-size:.85rem}

/* faq */
.faq{max-width:860px;margin:0 auto}
.faq details{border-bottom:1px solid var(--ligne);padding:22px 0}
.faq summary{cursor:pointer;list-style:none;font-family:var(--serif);font-size:1.3rem;display:flex;justify-content:space-between;gap:20px}
.faq summary::after{content:'+';color:var(--or);font-family:var(--sans);transition:.2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--gris);margin-top:12px}

/* newsletter */
.news{text-align:center;padding:12vh 5vw;border-top:1px solid var(--ligne);background:radial-gradient(ellipse at 50% 100%,rgba(232,111,216,.18),transparent 60%)}
.news h2{font-size:clamp(2rem,4vw,3.2rem)}
.news>p{color:var(--gris);margin:10px 0 28px}
.news form{display:flex;gap:10px;max-width:460px;margin:0 auto}
.news input{flex:1;min-width:0;background:var(--noir2);border:1px solid var(--ligne);border-radius:999px;padding:14px 22px;color:var(--creme);font:inherit}
.news input:focus{outline:none;border-color:var(--or)}
.ok{color:var(--or2)}

/* footer */
.footer{padding:70px 5vw 30px;border-top:1px solid var(--ligne);background:var(--noir2)}
.f-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.f-top p{color:var(--gris);font-size:.88rem;margin-top:12px}
.f-top h4{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--or);margin-bottom:14px;font-weight:600}
.f-top a:not(.logo){display:block;color:var(--gris);font-size:.9rem;margin-bottom:8px}
.f-top a:hover{color:var(--creme)}
.f-warn{margin-top:50px;padding:18px 22px;border:1px solid var(--creme);border-radius:10px;font-size:.85rem;font-weight:600;text-align:center}
.f-copy{margin-top:22px;color:var(--gris);font-size:.78rem;text-align:center}

/* overlays */
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.drawer,.modal{position:fixed;inset:0;z-index:50;visibility:hidden;opacity:0;transition:.3s}
.drawer.open,.modal.open{visibility:visible;opacity:1}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--noir2);border-left:1px solid var(--ligne);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.drawer.open .drawer-panel{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--ligne)}
.drawer-head h2{font-size:1.6rem}
.free{padding:16px 24px;font-size:.82rem;color:var(--gris)}
.bar{height:4px;background:var(--noir3);border-radius:2px;margin-top:8px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--or);transition:width .4s}
.lines{list-style:none;flex:1;overflow:auto;padding:0 24px}
.empty{color:var(--gris);padding:40px 0;text-align:center}
.line{display:grid;grid-template-columns:70px 1fr auto;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--ligne)}
.line-img{height:84px;border-radius:12px;display:grid;place-items:center;background:radial-gradient(circle,color-mix(in srgb,var(--c) 35%,transparent),transparent 70%),var(--noir3)}
.line-img .bt{height:80%}
.line-info{display:flex;flex-direction:column;font-size:.9rem}
.line-info span{color:var(--gris);font-size:.8rem}
.qty{display:inline-flex;align-items:center;gap:12px;margin-top:8px;border:1px solid var(--ligne);border-radius:999px;width:max-content;padding:2px 10px}
.qty button{width:22px;font-size:1.1rem}
.line-prix{font-weight:600}
.drawer-foot{padding:20px 24px 26px;border-top:1px solid var(--ligne)}
.total{display:flex;justify-content:space-between;margin-bottom:16px;font-size:1.05rem}
.note{color:var(--or2);font-size:.85rem;margin-top:14px;text-align:center}

.modal{display:grid;place-items:center;padding:20px}
.modal-panel{position:relative;width:min(920px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--noir2);border:1px solid var(--ligne);border-radius:24px;transform:translateY(20px);transition:.35s}
.modal.open .modal-panel{transform:none}
.modal-x{position:absolute;top:16px;right:18px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid var(--ligne)}
.modal-body{display:grid;grid-template-columns:1fr 1.1fr}
.m-media{display:grid;place-items:center;min-height:440px;background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--c) 38%,transparent),transparent 65%),var(--noir3)}
.m-media .bt{height:340px;filter:drop-shadow(0 30px 30px rgba(0,0,0,.55))}
.m-info{padding:44px 40px}
.m-info h2{font-size:2.4rem;margin:8px 0}
.m-prix{font-size:1.3rem;font-weight:600;color:var(--or2)}
.m-desc{color:var(--gris);margin:16px 0 22px}
.nic{border:0;margin-bottom:22px}
.nic legend{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin-bottom:10px}
.nic label{display:inline-block;margin-right:8px}
.nic input{position:absolute;opacity:0}
.nic span{display:inline-block;padding:9px 18px;border:1px solid var(--ligne);border-radius:999px;cursor:pointer;font-size:.88rem}
.nic input:checked+span{background:var(--or);color:var(--noir);border-color:var(--or)}
.nic input:focus-visible+span{outline:2px solid var(--or2);outline-offset:2px}
#m-add{width:100%}
.m-points{list-style:none;margin:22px 0;display:grid;gap:6px;font-size:.88rem;color:var(--gris)}
.m-points li::before{content:'✦ ';color:var(--or)}
.m-warn{font-size:.78rem;border:1px solid var(--gris);border-radius:8px;padding:10px 12px;color:var(--creme)}

.age{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at 50% 40%,#2b1d45,var(--noir) 70%);display:none;place-items:center;padding:20px}
.age.open{display:grid}
.age-box{max-width:460px;text-align:center}
.age-box .logo{font-size:2rem;margin-bottom:30px}
.age-box h2{font-size:2.2rem;margin-bottom:14px}
.age-box>p{color:var(--gris)}
.age-btns{display:flex;flex-direction:column;gap:12px;margin-top:30px}

/* légal */
.legal{max-width:820px;margin:0 auto;padding:8vh 5vw}
.legal h1{font-size:3rem;margin-bottom:30px}
.legal h2{font-size:1.8rem;margin:50px 0 14px;color:var(--or2)}
.legal p,.legal li{color:var(--gris);margin-bottom:10px}
.legal ul{padding-left:20px}
.todo{background:rgba(232,111,216,.15);color:var(--or2);padding:0 4px;border-radius:3px}

@media (max-width:980px){
  .nav{display:none}
  .hero,.maison{grid-template-columns:1fr}
  .hero{min-height:auto;padding-top:4vh}
  .hero-art{height:420px;order:-1}
  .grid{grid-template-columns:repeat(2,1fr)}
  .band{grid-template-columns:1fr}
  .band-item{border-right:0;border-bottom:1px solid var(--ligne)}
  .f-top{grid-template-columns:1fr 1fr}
  .modal-body{grid-template-columns:1fr}
  .m-media{min-height:280px}.m-media .bt{height:230px}
  .m-info{padding:28px 22px}
}
@media (max-width:560px){
  .header,.header.scrolled{padding-inline:16px}
  .hero,.section,.maison,.news,.footer{padding-inline:16px}
  .grid,.grid-pods{grid-template-columns:1fr 1fr;gap:12px}
  .card-body{padding:12px}
  .card h3{font-size:1.1rem}
  .card-foot{flex-direction:column;align-items:flex-start;gap:8px}
  .btn-add{width:100%}
  .hero-proof{gap:22px}
  .news form{flex-direction:column}
  .f-top{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* DomPuff : photos */
.logo-img{height:62px;width:auto;display:block;filter:brightness(1.35) drop-shadow(0 0 10px rgba(255,255,255,.18))}
.logo-img.big{height:90px;margin:0 auto}
.hero{position:relative;grid-template-columns:1fr;min-height:calc(100vh - 110px);align-content:end;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;z-index:-1}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(9,10,22,.9) 0%,rgba(9,10,22,.55) 45%,rgba(9,10,22,.05) 75%),linear-gradient(0deg,var(--noir) 0%,transparent 35%)}
.hero-txt{max-width:640px;position:relative}
.card-media{background:var(--noir3);overflow:hidden}
.card-media,.grid-pods .card-media{aspect-ratio:4/5}
.pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s,transform .8s cubic-bezier(.2,.8,.2,1)}
.pimg.alt{opacity:0}
.card:hover .pimg{transform:scale(1.05)}
.card:hover .pimg.alt{opacity:1}
.badge{z-index:2}
.badge.out{background:var(--creme);color:var(--noir)}
.line-img{position:relative;overflow:hidden;background:var(--noir3)}
.band4{grid-template-columns:repeat(4,1fr)}
.band4 .band-item span{font-size:1.4rem}
.gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;filter:saturate(.9);transition:filter .3s}
.gallery img:hover{filter:none}
.pays{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px 18px;margin-top:26px;color:var(--gris);font-size:.9rem}
.m-media{position:relative;display:block;min-height:0;background:var(--noir3);padding:0}
.m-media>img{width:100%;height:100%;max-height:640px;object-fit:cover;display:block}
.m-thumbs{position:absolute;left:14px;bottom:14px;display:flex;gap:8px}
.m-thumbs button{width:58px;height:72px;border-radius:8px;overflow:hidden;border:2px solid transparent;opacity:.7}
.m-thumbs button.on{border-color:var(--or);opacity:1}
.m-thumbs img{width:100%;height:100%;object-fit:cover}
.m-accroche{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--creme);margin-top:14px}
.m-desc{margin-top:8px}
#m-add:disabled{background:var(--noir3);color:var(--gris);cursor:not-allowed;transform:none;box-shadow:none}
@media (max-width:980px){
  .hero{min-height:78vh}
  .hero::before{background:linear-gradient(0deg,var(--noir) 10%,rgba(9,10,22,.55) 60%,rgba(9,10,22,.2))}
  .band4{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .gallery img:nth-child(n+4){display:none}
  .m-media>img{max-height:420px}
}
@media (max-width:560px){
  .logo-img{height:34px}
  .pays{grid-template-columns:1fr 1fr}
  .band4{grid-template-columns:1fr}
}
.cart-count[hidden]{display:none}
.logo-img{height:46px}
@media (max-width:560px){
  .logo-img{height:36px}
  .hero{display:block;min-height:0;padding:0 16px 40px}
  .hero-bg{position:relative;inset:auto;width:calc(100% + 32px);height:58vh;margin:0 -16px;z-index:0;object-position:center}
  .hero::before{display:none}
  .hero-txt{margin-top:-90px;z-index:1}
  .hero-txt::before{content:'';position:absolute;inset:-60px -16px -40px;z-index:-1;background:linear-gradient(transparent,var(--noir) 90px)}
  .hero h1{font-size:2.9rem}
}
@media (min-width:561px){
  .hero{grid-template-columns:1.1fr .9fr;align-items:center;align-content:center;gap:5vw;min-height:calc(100vh - 110px)}
  .hero::before{display:none}
  .hero-bg{position:relative;inset:auto;z-index:0;order:2;width:100%;height:min(76vh,700px);border-radius:24px;object-position:center 55%;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px var(--ligne)}
}
@media (min-width:561px) and (max-width:980px){
  .hero{grid-template-columns:1fr}
  .hero-bg{order:-1;height:56vh}
}
.hero .lead{font-family:'Syne',var(--sans);font-weight:600;font-size:clamp(1.25rem,1.9vw,1.75rem);line-height:1.3;color:var(--creme);max-width:24em;letter-spacing:-.01em}
/* 4 saveurs : 4 colonnes sur ordi, 2×2 sur mobile/tablette */
.grid.grid-pods{grid-template-columns:repeat(4,1fr);max-width:1280px;margin-inline:auto}
@media (max-width:980px){
  .grid.grid-pods{grid-template-columns:repeat(2,1fr)}
  .grid.grid-pods .card:last-child:nth-child(odd){grid-column:1/-1}
  .grid.grid-pods .card:last-child:nth-child(odd) .card-media{aspect-ratio:16/10}
}

/* Intro animée */
.intro{position:fixed;inset:0;z-index:300;background:#07070c;overflow:hidden;transition:background .6s}
.intro.cache{background:transparent}
.intro canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.intro-stage{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(1.04);transition:opacity .7s,transform 1.4s cubic-bezier(.2,.8,.2,1)}
.intro.on .intro-stage{opacity:1;transform:none}
.intro.cache .intro-stage{opacity:0;transition:opacity .3s}
.intro-col{position:relative;height:100vh;height:100dvh;aspect-ratio:900/1342;max-width:none}
.intro-col>img:first-child{width:100%;height:100%;display:block;-webkit-mask:radial-gradient(ellipse 70% 60% at 50% 55%,#000 55%,transparent 100%);mask:radial-gradient(ellipse 70% 60% at 50% 55%,#000 55%,transparent 100%)}
.intro-bouchon{position:absolute;left:45.9%;top:30.2%;width:9.33%;height:5.89%}
.intro-stage.shake .intro-col{animation:secoue .1s linear infinite,monte-shake 1.4s ease-in forwards}
@keyframes secoue{0%{translate:-3px 1px;rotate:-1.2deg}25%{translate:3px -1px;rotate:1deg}50%{translate:-2px -2px;rotate:-.6deg}75%{translate:2px 2px;rotate:1.3deg}100%{translate:-3px 1px;rotate:-1.2deg}}
@keyframes monte-shake{from{scale:1}to{scale:1.06}}
.intro-bouchon.saute{animation:bouchon 1.1s cubic-bezier(.15,.75,.3,1) forwards}
@keyframes bouchon{0%{transform:none}100%{transform:translate(40vh,-80vh) rotate(560deg) scale(.7);opacity:0}}
.intro.pop::after{content:'';position:absolute;left:50%;top:30%;width:60vh;height:60vh;translate:-50% -50%;background:radial-gradient(circle,rgba(255,220,240,.85),transparent 60%);animation:flash .5s ease-out forwards;pointer-events:none}
@keyframes flash{from{opacity:1;scale:.2}to{opacity:0;scale:1.6}}
.intro-skip{position:absolute;right:20px;bottom:20px;z-index:2;color:rgba(255,255,255,.6);font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:8px 16px}
.intro.cache .intro-skip{opacity:0}
.intro.cache{pointer-events:none}

/* Thème nuit alpine */
body{background:radial-gradient(ellipse 120% 60% at 50% 0%,#151838,transparent 70%) fixed,var(--noir)}
.topbar{background:linear-gradient(90deg,#b34fd0,var(--or),#b34fd0);color:#fff;text-shadow:0 0 8px rgba(255,255,255,.35)}
.btn-gold{background:linear-gradient(135deg,#f59be6,var(--or) 55%,#b34fd0);color:#fff;box-shadow:0 0 24px -6px rgba(232,111,216,.7)}
.btn-gold:hover{box-shadow:0 0 36px -4px rgba(232,111,216,.85)}
.btn-add:hover,.nic input:checked+span{color:#fff}
.badge,.cart-count{color:#fff}
.hero-proof strong,.maison-stats strong{color:var(--ambre);text-shadow:0 0 18px rgba(243,183,102,.35)}
.card{background:linear-gradient(180deg,var(--noir2),#0d0f22)}
.card:hover{box-shadow:0 20px 50px -20px rgba(232,111,216,.45)}
.band-item span,.checks li::before,.m-points li::before{color:var(--ambre)}
.news{background:radial-gradient(ellipse at 50% 100%,rgba(232,111,216,.2),transparent 60%),radial-gradient(ellipse at 20% 0%,rgba(243,183,102,.08),transparent 50%)}

/* Accueil plein écran : vidéo (ou image en attendant) + neige */
.hero,.hero{display:grid;grid-template-columns:1fr;align-content:end;min-height:calc(100vh - 34px);margin-top:-80px;padding:0 5vw 12vh;position:relative;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;border-radius:0!important;box-shadow:none!important;object-fit:cover;object-position:center 60%;z-index:-2!important;order:0}
.hero::before{display:block!important;content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(9,10,22,.85) 0%,rgba(9,10,22,.45) 38%,transparent 62%),linear-gradient(0deg,var(--noir) 0%,transparent 32%),linear-gradient(180deg,rgba(9,10,22,.55) 0%,transparent 22%)}
.hero-txt{max-width:600px;margin:0;z-index:1}
.hero-txt::before{display:none}
.hero h1{text-shadow:0 4px 40px rgba(0,0,0,.5)}
.hero h1 em{color:var(--or2);text-shadow:0 0 30px rgba(232,111,216,.55)}
.neige{position:absolute;inset:0;z-index:0;pointer-events:none;width:100%;height:100%}
.header:not(.scrolled){background:linear-gradient(rgba(9,10,22,.6),transparent)}
@media (max-width:980px){
  .hero{min-height:88vh;padding-bottom:8vh}
  .hero::before{background:linear-gradient(0deg,var(--noir) 8%,rgba(9,10,22,.6) 45%,rgba(9,10,22,.1) 75%,rgba(9,10,22,.5))!important}
}
@media (max-width:560px){
  .hero{display:grid;min-height:92vh;padding:0 16px 40px;margin-top:-62px}
  .hero-bg{object-position:50% 60%}
  .hero-txt{margin-top:0}
}

/* Vidéo 4 bouteilles : texte en haut, centré, les bouteilles restent dégagées en bas */
.hero{align-content:start;justify-items:center;text-align:center;padding-top:13vh}
.hero::before{background:linear-gradient(180deg,rgba(9,10,22,.8) 0%,rgba(9,10,22,.45) 30%,transparent 50%),linear-gradient(0deg,var(--noir) 0%,transparent 14%)!important}
.hero-txt{max-width:780px}
.hero h1{font-size:clamp(2.6rem,5.2vw,4.8rem);margin:12px 0 14px}
.hero .lead{margin-inline:auto;font-size:clamp(1.05rem,1.5vw,1.35rem);max-width:30em}
.hero-cta{justify-content:center;margin:24px 0 0}
.hero-proof{display:none}
@media (max-width:560px){
  .hero{min-height:88vh;padding-top:10vh}
  .hero-bg{object-position:50% 50%}
  .hero .lead{font-size:1rem}
  .hero-cta .btn{padding:12px 20px}
}

/* Vidéo 1 bouteille au centre : texte à gauche sur ordi, en bas sur mobile */
.hero{align-content:center;justify-items:start;text-align:left;padding-top:0}
.hero::before{background:linear-gradient(90deg,rgba(9,10,22,.88) 0%,rgba(9,10,22,.55) 30%,transparent 46%),linear-gradient(0deg,var(--noir) 0%,transparent 16%)!important}
.hero-txt{max-width:min(500px,36vw)}
.hero h1{font-size:clamp(2.6rem,4.6vw,4.4rem)}
.hero .lead{margin-inline:0}
.hero-cta{justify-content:flex-start}
@media (max-width:980px){
  .hero{align-content:end;justify-items:center;text-align:center;padding-bottom:6vh}
  .hero::before{background:linear-gradient(0deg,var(--noir) 6%,rgba(9,10,22,.75) 38%,transparent 62%)!important}
  .hero-txt{max-width:560px}
  .hero .lead{margin-inline:auto}
  .hero-cta{justify-content:center}
}
/* vidéo multi-scènes : texte compact en bas à gauche (visage + bouteille dégagés) */
@media (min-width:981px){
  .hero{align-content:end;padding-bottom:9vh}
  .hero::before{background:linear-gradient(0deg,rgba(9,10,22,.92) 0%,rgba(9,10,22,.55) 26%,transparent 48%),linear-gradient(90deg,rgba(9,10,22,.5) 0%,transparent 40%)!important}
  .hero-txt{max-width:min(540px,40vw)}
  .hero h1{font-size:clamp(2.4rem,4vw,3.8rem);margin:10px 0 10px}
  .hero .lead{font-size:clamp(1rem,1.3vw,1.2rem)}
  .hero-cta{margin-top:20px}
}

/* texte « Survolez » sur ordi, « Touchez » sur écran tactile */
.si-tactile{display:none}
@media (hover:none){.si-souris{display:none}.si-tactile{display:inline}}

/* Logo ÜberPuff (néon, fond transparent) */
.logo-img{filter:none;height:44px}
.logo-img.logo-complet{height:min(300px,38vh);margin:0 auto}
.footer .logo-img{height:56px}
@media (max-width:560px){.logo-img{height:34px}.logo-img.logo-complet{height:min(240px,34vh)}}

/* Section livraison : visuel coffret + parcours en 3 étapes */
.livraison{position:relative;overflow:hidden;isolation:isolate;padding:14vh 5vw;border-block:1px solid var(--ligne)}
.livraison-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;z-index:-2}
.livraison::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--noir) 0%,rgba(9,10,22,.88) 35%,rgba(9,10,22,.35) 70%,rgba(9,10,22,.15)),linear-gradient(0deg,var(--noir),transparent 25%),linear-gradient(180deg,var(--noir),transparent 25%)}
.livraison-in{display:grid;grid-template-columns:1fr minmax(320px,440px);gap:6vw;align-items:center;max-width:1280px;margin:0 auto}
.livraison h2{font-size:clamp(2.2rem,4.4vw,3.8rem);margin:14px 0 18px}
.livraison-txt>p{color:var(--creme);opacity:.85;max-width:30em;font-size:1.05rem}
.badges-liv{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.badges-liv li{border:1px solid rgba(232,111,216,.45);background:rgba(232,111,216,.08);color:var(--or2);border-radius:999px;padding:8px 16px;font-size:.82rem;font-weight:600;backdrop-filter:blur(6px)}
.etapes{list-style:none;position:relative;display:grid;gap:14px}
.etapes::before{content:'';position:absolute;left:31px;top:30px;bottom:30px;width:2px;background:linear-gradient(var(--or),rgba(232,111,216,.15));box-shadow:0 0 12px rgba(232,111,216,.6)}
.etapes li{position:relative;display:flex;gap:18px;align-items:center;padding:16px 20px 16px 0;border-radius:18px}
.etapes li>div{background:rgba(16,18,42,.72);backdrop-filter:blur(12px);border:1px solid var(--ligne);border-radius:16px;padding:16px 20px;flex:1}
.etapes strong{display:block;font-family:var(--serif);font-weight:500;font-size:1.3rem}
.etapes p{color:var(--gris);font-size:.88rem;margin-top:2px}
.et-ico{flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--noir);border:1.5px solid var(--or);box-shadow:0 0 18px rgba(232,111,216,.55),inset 0 0 12px rgba(232,111,216,.25);z-index:1}
.et-ico svg{width:26px;height:26px;fill:none;stroke:var(--or2);stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(232,111,216,.9))}
@media (max-width:980px){
  .livraison{padding:10vh 16px}
  .livraison-in{grid-template-columns:1fr;gap:36px}
  .livraison::before{background:linear-gradient(0deg,var(--noir) 10%,rgba(9,10,22,.82) 55%,rgba(9,10,22,.55)),linear-gradient(180deg,var(--noir),transparent 20%)}
  .livraison-bg{object-position:72% 50%}
  .et-ico{width:54px;height:54px}.etapes::before{left:26px}
}
@media (min-width:981px){
  .livraison-in{grid-template-columns:minmax(0,560px);gap:34px;margin:0}
  .livraison{padding:12vh 5vw}
  .livraison-bg{object-position:60% 50%}
  .livraison::before{background:linear-gradient(90deg,var(--noir) 0%,rgba(9,10,22,.9) 32%,rgba(9,10,22,.4) 52%,transparent 70%),linear-gradient(0deg,var(--noir),transparent 22%),linear-gradient(180deg,var(--noir),transparent 22%)}
  .etapes{grid-template-columns:repeat(3,1fr);gap:12px}
  .etapes::before{left:32px;right:32px;top:31px;bottom:auto;width:auto;height:2px;background:linear-gradient(90deg,var(--or),rgba(232,111,216,.2))}
  .etapes li{flex-direction:column;align-items:flex-start;padding:0;gap:12px}
  .etapes li>div{padding:14px 16px;width:100%}
  .etapes strong{font-size:1.1rem}
}