/* =========================================================
   GLOUP · feuille de style V1
   ========================================================= */
:root{
  --bg:#E4F26E;          /* fond citron de l'affiche */
  --bg-2:#EEF7A8;
  --lime:#8DD13E;        /* vert des motifs de canette */
  --lime-d:#5E9B1F;      /* vert du logo manuscrit */
  --ink:#0F2A3A;         /* bleu nuit des canettes */
  --ink-2:#18394D;
  --cream:#FBFCEB;
  --peach:#FF9466;
  --peri:#A3A9FF;

  --flavor-tint:#E4F26E;
  --fg:var(--ink);

  --f-display:'Bagel Fat One', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --f-body:'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-hand:'Caveat', 'Comic Sans MS', cursive;
  --f-mono:'DM Mono', ui-monospace, Menlo, monospace;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --wrap:1240px;
  --gutter:clamp(16px,4vw,48px);
  --nav-h:76px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:8px}
::selection{background:var(--ink);color:var(--bg)}

.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:99px;text-decoration:none}
.skip:focus{top:12px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.display{font-family:var(--f-display);line-height:.95;letter-spacing:-.01em}
.hand{font-family:var(--f-hand);font-weight:700;line-height:1}
.mono{font-family:var(--f-mono)}
.eyebrow{font-family:var(--f-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.illus{
  display:inline-block;vertical-align:middle;font-family:var(--f-mono);font-style:normal;font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border:1px dashed currentColor;border-radius:99px;opacity:.72;
  line-height:1.4;white-space:nowrap;font-weight:400
}

/* ---------- boutons ---------- */
.btn{
  --b:var(--ink);--t:var(--bg);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:54px;padding:0 26px;border-radius:99px;background:var(--b);color:var(--t);
  font-weight:700;font-size:16px;text-decoration:none;white-space:nowrap;
  transition:transform .35s var(--ease-bounce),box-shadow .35s var(--ease-out),background .3s;
  box-shadow:0 0 0 0 rgba(15,42,58,0);
}
.btn:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 10px 0 -2px rgba(15,42,58,.18)}
.btn:active{transform:translateY(0) scale(.97);transition-duration:.1s}
.btn-ink{--b:var(--ink);--t:var(--bg)}
.btn-fg{--b:var(--fg);--t:var(--flavor-tint)}
.btn-lime{--b:var(--lime);--t:var(--ink)}
.btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn-line:hover{box-shadow:inset 0 0 0 2px var(--ink),0 10px 0 -2px rgba(15,42,58,.18)}
.btn-block{width:100%}
.btn.is-added{--b:var(--lime-d)}

/* ---------- navigation ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav-h);display:flex;align-items:center;transition:transform .5s var(--ease-out)}
.nav-inner{
  width:calc(100% - 2*var(--gutter));max-width:calc(var(--wrap) - 2*var(--gutter) + 40px);margin:0 auto;height:58px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 10px 0 22px;border-radius:99px;
  background:rgba(251,252,235,0);transition:background .4s,box-shadow .4s,backdrop-filter .4s;
}
.nav.scrolled .nav-inner{background:rgba(251,252,235,.78);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 1px 0 rgba(15,42,58,.08),0 12px 30px -18px rgba(15,42,58,.35)}
.logo{position:relative;font-family:var(--f-display);font-size:34px;line-height:1;text-decoration:none;color:var(--lime-d);letter-spacing:-.02em;padding-bottom:4px}
.logo-light{color:var(--lime)}
.logo-drop{position:absolute;right:6px;bottom:-4px;width:8px;height:11px;background:currentColor;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;animation:logoDrip 3.6s var(--ease-out) infinite}
@keyframes logoDrip{0%,55%{transform:translateY(-6px) scale(.2);opacity:0}65%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(16px) scale(.8);opacity:0}}
.menu{display:flex;align-items:center;gap:6px}
.menu a{position:relative;text-decoration:none;font-weight:500;font-size:15px;padding:8px 14px;border-radius:99px;transition:background .25s}
.menu a:hover{background:rgba(15,42,58,.07)}
.menu a.active::after{content:"";position:absolute;left:50%;bottom:1px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--lime-d)}
.menu .menu-cta{background:var(--ink);color:var(--bg);margin-left:6px}
.menu .menu-cta:hover{background:var(--ink-2)}
.nav-actions{display:flex;align-items:center;gap:6px}
.cart-btn{position:relative;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;transition:background .25s,transform .3s var(--ease-bounce)}
.cart-btn:hover{background:rgba(15,42,58,.08)}
.cart-btn svg{width:24px;height:24px}
.cart-count{position:absolute;top:2px;right:0;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--ink);color:var(--bg);font-size:11px;font-weight:700;display:grid;place-items:center;transform:scale(0);transition:transform .35s var(--ease-bounce)}
.cart-count.has{transform:scale(1)}
.cart-btn.bump{animation:bump .5s var(--ease-bounce)}
@keyframes bump{30%{transform:scale(1.25) rotate(-8deg)}60%{transform:scale(.92) rotate(4deg)}}
.burger{display:none;width:46px;height:46px;border-radius:50%;position:relative}
.burger span{position:absolute;left:13px;right:13px;height:2.5px;border-radius:2px;background:var(--ink);transition:transform .35s var(--ease-out)}
.burger span:first-child{top:18px}.burger span:last-child{top:26px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;padding:calc(var(--nav-h) + 24px) 0 70px;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:clamp(20px,3vw,48px)}
.hero-bgword{position:absolute;left:50%;top:52%;width:min(1500px,130vw);transform:translate(-50%,-50%);z-index:-1;fill:#D6E85A;opacity:.85;pointer-events:none}
.hero-bgword svg{width:100%;overflow:visible}
.hero-copy{position:relative;z-index:2;max-width:560px}
.hero-copy .eyebrow{margin-bottom:22px;color:var(--ink)}
.hero-title{font-family:var(--f-display);font-size:clamp(64px,9.6vw,148px);line-height:.86;letter-spacing:-.02em;color:var(--ink);margin-bottom:40px}
.hero-title .line{display:block}
.melt{position:relative;display:inline-block;color:var(--ink)}
.melt .d{position:absolute;top:.58em;width:.075em;height:.3em;background:currentColor;border-radius:0 0 .04em .04em;transform-origin:top;transform:scaleY(0)}
.melt .d::before{content:"";position:absolute;left:50%;bottom:-.05em;width:.13em;height:.15em;margin-left:-.065em;background:currentColor;border-radius:50% 50% 50% 50%/42% 42% 58% 58%}
.melt .d1{left:24%;height:.2em}
.melt .d2{left:61%;height:.28em}
.melt .d3{left:86%;height:.15em}
.melt .d::after{content:"";position:absolute;left:50%;bottom:-.05em;width:.1em;height:.12em;margin-left:-.05em;background:currentColor;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;opacity:0}
.is-ready .melt .d{animation:dripGrow 1.6s var(--ease-out) forwards;animation-delay:calc(1.1s + var(--i,0s))}
.is-ready .melt .d2{--i:.25s}.is-ready .melt .d3{--i:.5s}
.is-ready .melt .d::after{animation:dripFall 3.8s ease-in infinite;animation-delay:calc(2.6s + var(--i,0s))}
@keyframes dripGrow{to{transform:scaleY(1)}}
@keyframes dripFall{0%{opacity:0;transform:translateY(-.1em) scale(.4)}12%{opacity:1;transform:translateY(0) scale(1)}30%{opacity:1;transform:translateY(.16em) scale(.9)}40%,100%{opacity:0;transform:translateY(.28em) scale(.5)}}
.lead{font-size:clamp(17px,1.35vw,19px);max-width:470px;margin-bottom:32px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.cta-row.center{justify-content:center}
.proof{display:flex;align-items:center;gap:14px;margin-top:30px;font-size:14px}
.avatars{display:flex}
.avatars span{width:34px;height:34px;border-radius:50%;background:var(--c);border:2.5px solid var(--bg);display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--ink);margin-left:-9px}
.avatars span:first-child{margin-left:0}

.hero-stage{position:relative;height:min(74vh,660px);min-height:480px;display:flex;align-items:flex-end;justify-content:center}
.cans-pair{position:relative;display:flex;align-items:flex-end;justify-content:center;height:100%;width:100%;transform:rotateX(0) rotateY(0);will-change:transform}
.cans-pair .can-slot{height:92%;flex:0 0 auto;margin:0 -9%}
.cans-pair .can-slot svg{height:100%;width:auto}
.hero-hand{position:absolute;left:4%;bottom:-6px;font-size:clamp(28px,2.6vw,38px);color:var(--lime-d);transform:rotate(-4deg);z-index:3}
.hand-arrow{position:absolute;left:24%;bottom:26px;width:80px;color:var(--lime-d);transform:rotate(-8deg) scaleX(-1);z-index:3}
.hand-arrow path{stroke-dasharray:200;stroke-dashoffset:200}
.is-ready .hand-arrow path{animation:draw 1s var(--ease-out) 1.9s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.badge-ring{position:absolute;left:2%;top:4%;width:clamp(110px,11vw,150px);aspect-ratio:1;z-index:3;display:grid;place-items:center}
.badge-ring svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite;overflow:visible}
.badge-ring text{font-family:var(--f-mono);font-size:15.5px;letter-spacing:.14em;fill:var(--ink);font-weight:500}
.badge-core{width:56%;aspect-ratio:1;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-family:var(--f-display);font-size:clamp(22px,2.2vw,30px);line-height:.9;text-align:center}
.badge-core small{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em}
@keyframes spin{to{transform:rotate(360deg)}}

.new-card{position:absolute;right:0;top:12%;z-index:4;display:flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;border-radius:22px;background:var(--cream);text-decoration:none;box-shadow:0 18px 40px -22px rgba(15,42,58,.55);transition:transform .4s var(--ease-bounce);max-width:250px}
.new-card:hover{transform:translateY(-4px) rotate(1.5deg)}
.new-can{width:44px;height:70px;border-radius:14px;background:#DADCFF;display:grid;place-items:center;overflow:hidden;flex:none}
.new-can svg{height:80%;width:auto}
.new-card small{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#4b46c9}
.new-card strong{display:block;font-family:var(--f-display);font-weight:400;font-size:18px;line-height:1.05}
.new-card em{font-style:normal;font-size:12.5px;opacity:.75}

.scroll-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;opacity:.7}
.hint-drop{width:12px;height:16px;background:var(--ink);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;animation:hint 2.2s var(--ease-out) infinite}
@keyframes hint{0%{transform:translateY(-6px);opacity:0}30%{opacity:1}100%{transform:translateY(10px);opacity:0}}

/* bulles de gazéification */
.bubbles{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bubbles i{position:absolute;bottom:-30px;border-radius:50%;border:1.5px solid rgba(15,42,58,.22);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.7),rgba(255,255,255,0) 45%);animation:rise linear infinite}
@keyframes rise{to{transform:translate(var(--dx,0),calc(-100vh - 80px))}}

/* ---------- entrées ---------- */
.intro-in{opacity:0;transform:translateY(40px);filter:blur(8px)}
.is-ready .intro-in{animation:introIn 1.1s var(--ease-out) forwards;animation-delay:var(--d,0s)}
@keyframes introIn{to{opacity:1;transform:none;filter:blur(0)}}
.hero-title .line.intro-in{transform:translateY(60%) rotate(3deg)}

/* chute des canettes */
.intro-can .can-body,.intro-can .can-shadow,.intro-can .puddle,.intro-can .splash circle{opacity:0}
.is-ready .intro-can .can-body{animation:canDrop 1.25s var(--d,0s) both}
.is-ready .intro-can .can-shadow{animation:fadeIn .6s calc(var(--d,0s) + .55s) both}
.is-ready .intro-can .puddle{animation:puddleIn 1.4s var(--ease-out) calc(var(--d,0s) + .58s) both}
.is-ready .intro-can .splash circle{animation:splash .9s var(--ease-out) calc(var(--d,0s) + .6s) both}
@keyframes canDrop{
  0%{opacity:1;transform:translateY(-900px) scale(.96,1.06);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  45%{opacity:1;transform:translateY(0) scale(1,1);animation-timing-function:ease-out}
  55%{transform:translateY(0) scale(1.07,.9)}
  70%{transform:translateY(-22px) scale(.97,1.04);animation-timing-function:ease-in}
  82%{transform:translateY(0) scale(1.02,.97)}
  100%{opacity:1;transform:none}
}
@keyframes puddleIn{0%{opacity:0;transform:scale(.15,.3)}40%{opacity:1}100%{opacity:1;transform:none}}
@keyframes fadeIn{to{opacity:1}}
@keyframes splash{0%{opacity:1;transform:translate(0,0) scale(1)}60%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.4)}}

/* ---------- canettes (SVG) ---------- */
.can-slot{position:relative}
.can-slot svg{overflow:visible}
.can-body{transform-box:fill-box;transform-origin:50% 100%}
.puddle,.can-shadow{transform-box:fill-box;transform-origin:50% 50%}
.puddle-wobble,.is-ready .intro-can .puddle.puddle-wobble{animation:wobble 6s ease-in-out infinite;opacity:1}
@keyframes wobble{50%{transform:scale(1.04,1.08)}}
.can-slot.sink .can-body{transition:transform .38s cubic-bezier(.5,0,.9,.4),opacity .38s;transform:translateY(60px) scale(1.15,.55);opacity:0}
.can-slot.sink .puddle{transition:transform .4s var(--ease-out);transform:scale(1.25,1.3)}
.can-slot.pop .can-body{animation:canPop .9s var(--ease-out) both}
.can-slot.pop .puddle{animation:puddleIn 1s var(--ease-out) .2s both}
@keyframes canPop{0%{opacity:0;transform:translateY(-140px) scale(.9,1.1)}50%{opacity:1;transform:translateY(0) scale(1.06,.92)}72%{transform:translateY(-10px) scale(.98,1.03)}100%{opacity:1;transform:none}}

/* ---------- fruits flottants ---------- */
.fruit{position:absolute;z-index:2;pointer-events:none;animation:float 7s ease-in-out infinite}
.fruit svg{width:100%;height:auto;overflow:visible}
@keyframes float{50%{transform:translateY(-14px) rotate(8deg)}}
.fr-a{width:86px;right:10%;top:2%;animation-delay:-2s}
.fr-b{width:56px;left:12%;top:38%;animation-delay:-4s}
.fr-c{width:62px;right:2%;bottom:24%;animation-delay:-1s}

/* ---------- bandeau défilant ---------- */
.band{position:relative;background:var(--ink);color:var(--lime);padding:48px 0 30px;overflow:hidden}
.drip{position:absolute;left:0;width:100%;height:64px;pointer-events:none;z-index:2}
.drip-top{top:-1px}
.drip path{transition:fill .7s}
.band .drip path{fill:var(--bg)}
.drip-ink path{fill:var(--ink)}
.drip-flavor path{fill:var(--flavor-tint)}
.footer .drip path{fill:var(--bg)}
.marquee{overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-flex;align-items:center;gap:36px;animation:marquee 32s linear infinite;padding-left:36px}
.marquee span{font-family:var(--f-display);font-size:clamp(34px,5vw,64px);line-height:1.1}
.marquee b{font-size:30px;color:var(--bg);font-weight:400}
.marquee-track span:nth-of-type(2n){color:var(--peach)}
.marquee-track span:nth-of-type(3n){color:var(--peri)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- sections communes ---------- */
section{position:relative}
.sec-head{text-align:center;margin-bottom:40px}
.sec-head .eyebrow{margin-bottom:16px}
.sec-head .display{font-size:clamp(48px,7vw,104px)}
.sec-head .hand{font-size:clamp(26px,2.4vw,34px);margin-top:12px;color:var(--fg);opacity:.75}
.sec-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;text-align:left}
.sec-note{max-width:360px;font-size:15.5px}

.reveal{opacity:0;transform:translateY(46px);filter:blur(6px);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out),filter 1s var(--ease-out);transition-delay:var(--rd,0s)}
.reveal.in{opacity:1;transform:none;filter:none}

/* ---------- SAVEURS ---------- */
.flavors{background:var(--flavor-tint);color:var(--fg);padding:130px 0 120px;overflow:hidden;isolation:isolate;transition:color .6s}
.flavors .eyebrow{color:var(--fg)}
.wipe{position:absolute;inset:0;z-index:-1;background:var(--wipe-c,transparent);clip-path:circle(0 at var(--wx,50%) var(--wy,50%))}
.wipe.go{transition:clip-path .85s cubic-bezier(.7,0,.2,1);clip-path:circle(150% at var(--wx,50%) var(--wy,50%))}
.tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.tabs button{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 22px 0 14px;border-radius:99px;font-weight:700;background:rgba(255,255,255,.35);box-shadow:inset 0 0 0 2px currentColor;transition:background .3s,color .3s,transform .35s var(--ease-bounce)}
.tabs button i{width:24px;height:24px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 2px currentColor}
.tabs button:hover{transform:translateY(-2px)}
.tabs button[aria-selected="true"]{background:var(--fg);color:var(--flavor-tint)}
.tabs button[aria-selected="true"] i{box-shadow:inset 0 0 0 2px var(--flavor-tint)}

.stage{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:clamp(24px,5vw,80px)}
.stage-visual{position:relative;height:min(78vh,680px);min-height:520px;display:flex;align-items:flex-end;justify-content:center}
.arch{position:absolute;left:50%;bottom:6%;width:min(78%,380px);height:86%;transform:translateX(-50%);border-radius:999px 999px 44px 44px;background:var(--arch,#F3F9C4);transition:background .7s}
.stage-ring{position:absolute;left:50%;top:0;width:min(100%,520px);aspect-ratio:1;transform:translateX(-50%);pointer-events:none}
.stage-ring svg{width:100%;height:100%;animation:spin 40s linear infinite;overflow:visible}
.stage-ring text{font-family:var(--f-mono);font-size:14px;letter-spacing:.2em;fill:currentColor;font-weight:500}
.stage-can{position:relative;z-index:2;height:88%}
.stage-can svg{height:100%;width:auto}
.sf-a{width:92px;left:4%;top:30%;animation-delay:-1s}
.sf-b{width:70px;right:6%;top:18%;animation-delay:-3s}
.sf-c{width:64px;right:10%;bottom:16%;animation-delay:-5s}
.stage-info{max-width:520px}
.stage-num{font-size:13px;letter-spacing:.14em;margin-bottom:12px;opacity:.7}
.stage-name{font-size:clamp(46px,5.6vw,84px);margin-bottom:12px}
.stage-mood{font-size:clamp(26px,2.3vw,32px);margin-bottom:18px;opacity:.85}
.stage-desc{font-size:17.5px;margin-bottom:26px}
.stage-info.swap > *{animation:swapIn .7s var(--ease-out) both}
.stage-info.swap > *:nth-child(2){animation-delay:.05s}.stage-info.swap > *:nth-child(3){animation-delay:.1s}.stage-info.swap > *:nth-child(4){animation-delay:.15s}.stage-info.swap > *:nth-child(5){animation-delay:.2s}.stage-info.swap > *:nth-child(6){animation-delay:.25s}
@keyframes swapIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.meters{display:grid;gap:10px;margin-bottom:22px}
.meters li{display:grid;grid-template-columns:110px 1fr;align-items:center;font-size:14px;font-weight:500}
.dots{display:flex;gap:6px}
.dots i{width:22px;height:22px;border-radius:50% 50% 50% 50%/55% 55% 45% 45%;box-shadow:inset 0 0 0 2px currentColor;transition:background .4s}
.dots i.on{background:currentColor}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chips li{padding:6px 14px;border-radius:99px;background:rgba(255,255,255,.45);font-size:14px;font-weight:500}
.nutri{font-size:13px;margin-bottom:26px;opacity:.85}
.buy{display:grid;gap:16px;padding-top:22px;border-top:2px dashed currentColor}
.price strong{font-family:var(--f-display);font-weight:400;font-size:40px;line-height:1;margin-right:8px}
.price span{font-size:14px}
.buy-row{display:flex;flex-wrap:wrap;gap:12px}
.stepper{display:flex;align-items:center;height:54px;border-radius:99px;box-shadow:inset 0 0 0 2px currentColor}
.stepper button{width:48px;height:100%;font-size:22px;font-weight:700;border-radius:99px}
.stepper button:hover{background:rgba(0,0,0,.06)}
.stepper output{min-width:22px;text-align:center;font-weight:700}
.add-stage{flex:1;min-width:200px}

/* ---------- HISTOIRE ---------- */
.story{background:var(--ink);color:var(--cream);padding:150px 0 130px;overflow:hidden}
.story .eyebrow{color:var(--lime);margin-bottom:18px}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px)}
.story-left{position:sticky;top:calc(var(--nav-h) + 30px);align-self:start}
.story-left .display{font-size:clamp(38px,min(4.4vw,7vh),68px);color:var(--bg)}
.story-visual{position:relative;height:clamp(260px,min(28vw,42vh),380px);margin-top:26px;display:flex;justify-content:center;align-items:flex-end}
.sun{position:absolute;left:50%;top:0;width:min(46%,210px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:var(--peach);box-shadow:0 0 0 16px rgba(228,242,110,.08),0 0 0 34px rgba(228,242,110,.05),0 0 80px 10px rgba(255,148,102,.35);animation:pulse 5s ease-in-out infinite}
@keyframes pulse{50%{transform:translateX(-50%) scale(1.06)}}
.float-can{height:100%;z-index:1}
.float-can svg{height:100%;width:auto}
.float-can .can-body{animation:levitate 5s ease-in-out infinite}
.float-can .can-shadow{animation:shadowBreath 5s ease-in-out infinite}
@keyframes levitate{50%{transform:translateY(-26px) rotate(-3deg)}}
@keyframes shadowBreath{50%{opacity:.4;transform:scale(.8)}}
.chapters-wrap{position:relative;padding-left:70px}
.story-line{position:absolute;left:0;top:10px;width:60px;height:calc(100% - 20px);overflow:visible}
.story-line path{fill:none;stroke:var(--lime);stroke-width:4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.chapter{position:relative;padding:40px 0 60px}
.chapter + .chapter{border-top:1px dashed rgba(251,252,235,.2)}
.chapter::before{content:"";position:absolute;left:-54px;top:52px;width:18px;height:18px;border-radius:50%;background:var(--ink);box-shadow:inset 0 0 0 3px var(--lime)}
.ch-num{font-family:var(--f-display);font-size:64px;line-height:1;color:var(--lime);display:block;margin-bottom:10px}
.chapter h3{font-family:var(--f-display);font-size:clamp(26px,2.4vw,34px);line-height:1.05;color:var(--bg);margin-bottom:12px}
.chapter p{font-size:18px;max-width:480px;color:rgba(251,252,235,.85)}

/* ---------- BOUTIQUE ---------- */
.shop{background:var(--bg);padding:140px 0 110px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:26px}
.card{position:relative;display:flex;flex-direction:column;border-radius:30px;background:var(--c);color:var(--k);padding:18px 18px 22px;overflow:hidden;transition:transform .5s var(--ease-out)}
.card:hover{transform:translateY(-6px)}
.card-visual{position:relative;height:340px;border-radius:22px;display:flex;justify-content:center;align-items:flex-end;margin-bottom:18px}
.card-visual .can-slot{height:100%}
.card-visual .can-slot svg{height:100%;width:auto}
.card-visual .can-body{transition:transform .6s var(--ease-bounce)}
.card:hover .card-visual .can-body{transform:translateY(-12px) rotate(-4deg)}
.card-visual .fruit{width:62px;right:8%;top:8%}
.card .tag{position:absolute;left:16px;top:16px;z-index:3;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:99px;background:var(--k);color:var(--c)}
.card h3{font-family:var(--f-display);font-size:30px;line-height:1}
.card .notes{font-size:14.5px;margin:6px 0 14px;opacity:.85}
.card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-foot .price strong{font-size:28px}
.card-foot .price small{display:block;font-size:12.5px}
.card-actions{display:flex;gap:8px;align-items:center}
.link-btn{font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px;padding:6px}
.add-round{width:52px;height:52px;border-radius:50%;background:var(--k);color:var(--c);display:grid;place-items:center;font-size:26px;font-weight:700;transition:transform .4s var(--ease-bounce)}
.add-round:hover{transform:rotate(90deg) scale(1.08)}
.stars{color:var(--k,#0F2A3A);letter-spacing:2px;font-size:14px}
.stars span{opacity:.3}

.bundle{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:center;border-radius:36px;background:var(--cream);padding:clamp(22px,4vw,56px);overflow:hidden;margin-bottom:26px}
.bundle-visual{position:relative;height:clamp(340px,36vw,470px);display:flex;justify-content:center;align-items:flex-end}
.bundle-visual .can-slot{position:absolute;bottom:4%;height:88%}
.bundle-visual .can-slot svg{height:100%;width:auto}
.bundle-visual .b1{transform:translateX(-52%) rotate(-7deg);transform-origin:bottom center;height:80%}
.bundle-visual .b2{z-index:2}
.bundle-visual .b3{transform:translateX(52%) rotate(7deg);transform-origin:bottom center;height:80%}
.bundle-puddle{position:absolute;left:8%;right:8%;bottom:1%;height:11%;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,rgba(255,196,150,.9),rgba(200,220,96,.85) 45%,rgba(190,190,255,.8) 80%,rgba(190,190,255,0) 100%);filter:blur(1px)}
.bf-a{width:90px;left:0;top:8%}
.bf-b{width:74px;right:4%;top:2%}
.bf-c{width:70px;right:0;bottom:20%}
.bundle-copy .eyebrow{margin-bottom:14px}
.bundle-copy .display{font-size:clamp(40px,4.4vw,64px);margin-bottom:18px}
.bundle-copy > p{margin-bottom:16px;max-width:460px}
.ticks{display:grid;gap:8px;margin-bottom:24px}
.ticks li{position:relative;padding-left:30px;font-size:15.5px}
.ticks li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:var(--lime);box-shadow:inset 0 0 0 2px var(--ink)}
.bundle-buy{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.bundle-buy s{opacity:.55;font-size:17px}

.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.perks li{display:flex;gap:16px;align-items:flex-start;padding:22px;border-radius:24px;box-shadow:inset 0 0 0 2px rgba(15,42,58,.14)}
.perk-ico{flex:none;width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center}
.perk-ico svg{width:28px;height:28px}
.perks strong{display:block;margin-bottom:2px}
.perks span{font-size:14.5px;opacity:.85}

/* ---------- AVIS ---------- */
.reviews{background:var(--bg-2);padding:120px 0}
.reviews-grid{display:grid;grid-template-columns:340px 1fr;gap:40px;align-items:center}
.reviews-head .eyebrow{margin-bottom:14px}
.reviews-head .display{font-size:clamp(46px,5.6vw,84px);margin-bottom:16px}
.reviews-head > p{margin-bottom:26px;max-width:300px}
.rev-nav{display:flex;gap:10px;margin-bottom:22px}
.round-btn{width:52px;height:52px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--ink);font-size:20px;transition:transform .35s var(--ease-bounce),background .3s}
.round-btn:hover{transform:scale(1.08)}
.round-ink{background:var(--ink);color:var(--bg)}
.illus-note{font-size:13px;display:flex;gap:8px;align-items:center;opacity:.8}
.rev-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 26px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-mask:linear-gradient(90deg,#000 85%,transparent);mask:linear-gradient(90deg,#000 85%,transparent)}
.rev-track::-webkit-scrollbar{display:none}
.rev{flex:0 0 min(340px,82%);scroll-snap-align:start;margin:0;background:var(--c);border-radius:28px 28px 28px 6px;padding:28px;display:flex;flex-direction:column;gap:18px;min-height:280px;transition:transform .4s var(--ease-out)}
.rev:nth-child(2n){border-radius:28px 28px 6px 28px;transform:translateY(16px)}
.rev .stars{--k:var(--ink)}
.rev blockquote{margin:0;font-size:20px;line-height:1.35;font-weight:500;flex:1}
.rev figcaption{display:flex;align-items:center;gap:12px;font-size:14px}
.rev figcaption strong{display:block;font-size:16px}
.av{width:44px;height:44px;border-radius:50% 50% 50% 50%/55% 55% 45% 45%;background:var(--k);display:grid;place-items:center;font-family:var(--f-display);font-size:20px;flex:none}

/* ---------- FINAL ---------- */
.final{background:var(--bg-2);padding:40px 0 150px;text-align:center}
.final-hand{font-size:clamp(30px,3vw,44px);color:var(--lime-d);transform:rotate(-2deg);margin-bottom:10px}
.final .display{font-size:clamp(56px,9vw,140px);margin-bottom:34px}

/* ---------- FOOTER ---------- */
.footer{position:relative;background:var(--ink);color:var(--cream);padding:110px 0 30px;overflow:hidden}
.footer .drip path{fill:var(--bg-2)}
.footer-grid{display:grid;grid-template-columns:1.2fr .7fr .8fr 1.4fr;gap:40px}
.f-brand p{margin-top:16px;max-width:280px;opacity:.8;font-size:15px}
.f-col{display:flex;flex-direction:column;gap:8px}
.footer h4{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:8px}
.f-col a{text-decoration:none;opacity:.85;font-size:15px;width:fit-content}
.f-col a:hover{opacity:1;text-decoration:underline}
.f-news > p{font-size:15px;opacity:.8;margin-bottom:14px}
.news-row{display:flex;gap:8px}
.news-row input{flex:1;min-width:0;height:54px;padding:0 20px;border-radius:99px;border:2px solid rgba(251,252,235,.25);background:rgba(251,252,235,.06);color:var(--cream);font:inherit;font-size:16px}
.news-row input::placeholder{color:rgba(251,252,235,.5)}
.news-row input:focus{outline:none;border-color:var(--lime)}
.news-msg{margin-top:10px;font-size:14px;min-height:20px;color:var(--lime)}
.news-msg.err{color:var(--peach)}
.footer-word{margin:40px auto 36px;width:min(1200px,100%);fill:var(--lime);opacity:.95;padding:0 var(--gutter)}
.footer-word svg{width:100%;overflow:visible}
.legal{display:flex;justify-content:space-between;gap:20px;font-size:12.5px;opacity:.65;padding-top:22px;border-top:1px dashed rgba(251,252,235,.2)}
.legal p:first-child{max-width:720px}

/* ---------- PANIER ---------- */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(15,42,58,.45);backdrop-filter:blur(3px);opacity:0;transition:opacity .4s}
.scrim.show{opacity:1}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(440px,100%);background:var(--cream);display:flex;flex-direction:column;transform:translateX(105%);transition:transform .55s var(--ease-out);box-shadow:-30px 0 60px -30px rgba(15,42,58,.5);border-radius:28px 0 0 28px}
.drawer.open{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:22px 22px 12px 26px}
.drawer-head h2{font-family:var(--f-display);font-size:30px;display:flex;align-items:center;gap:10px}
.icon-btn{width:44px;height:44px;border-radius:50%;font-size:18px;box-shadow:inset 0 0 0 2px var(--ink);transition:transform .3s var(--ease-bounce)}
.icon-btn:hover{transform:rotate(90deg)}
.ship{padding:6px 26px 16px}
.ship-txt{font-size:14px;margin-bottom:8px}
.ship-bar{height:10px;border-radius:99px;background:rgba(15,42,58,.1);overflow:hidden}
.ship-bar i{display:block;height:100%;width:0;background:var(--lime);border-radius:99px;box-shadow:inset 0 0 0 2px var(--ink);transition:width .6s var(--ease-out)}
.lines{flex:1;overflow-y:auto;padding:4px 26px;overscroll-behavior:contain}
.line-item{display:grid;grid-template-columns:70px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px dashed rgba(15,42,58,.2);animation:swapIn .5s var(--ease-out)}
.thumb{width:70px;height:84px;border-radius:16px;background:var(--c);display:flex;justify-content:center;align-items:center;overflow:hidden}
.thumb svg{height:78%;width:auto}
.thumb.multi svg{height:62%;margin:0 -2px}
.thumb.multi svg:nth-child(1){transform:rotate(-8deg)}
.thumb.multi svg:nth-child(3){transform:rotate(8deg)}
.line-item h3{font-family:var(--f-display);font-size:19px;line-height:1.05}
.line-item p{font-size:12.5px;opacity:.75;margin:2px 0 8px}
.mini-step{display:inline-flex;align-items:center;height:34px;border-radius:99px;box-shadow:inset 0 0 0 1.5px var(--ink)}
.mini-step button{width:32px;height:100%;font-weight:700;border-radius:99px}
.mini-step span{min-width:18px;text-align:center;font-weight:700;font-size:14px}
.line-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.line-right strong{font-size:16px}
.remove{font-size:12.5px;text-decoration:underline;opacity:.7}
.empty{flex:1;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;padding:30px}
.empty.show{display:flex}
.empty-puddle{width:140px;height:26px;border-radius:50%;background:rgba(200,220,96,.8);box-shadow:inset 0 3px 0 rgba(255,255,255,.6);animation:wobble 4s ease-in-out infinite}
.drawer-foot{padding:18px 26px 24px;border-top:2px solid rgba(15,42,58,.08)}
.drawer-foot dl{margin:0 0 16px;display:grid;gap:6px}
.drawer-foot dl div{display:flex;justify-content:space-between;font-size:15px}
.drawer-foot dd{margin:0;font-weight:500}
.drawer-foot .total{font-size:18px;font-weight:700;padding-top:8px;border-top:1px dashed rgba(15,42,58,.2)}
.drawer-foot .total dd{font-weight:700}
.drawer-note{font-size:12.5px;text-align:center;margin-top:10px;opacity:.7}
.btn[disabled]{opacity:.4;pointer-events:none}

.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px;background:rgba(15,42,58,.55);backdrop-filter:blur(4px);animation:fadeIn .3s both}
.modal[hidden]{display:none}
.modal-card{position:relative;width:min(480px,100%);max-height:calc(100svh - 32px);overflow:auto;background:var(--cream);border-radius:32px;padding:34px 30px 28px;text-align:center;animation:modalIn .6s var(--ease-bounce) both}
@keyframes modalIn{from{opacity:0;transform:translateY(30px) scale(.94)}to{opacity:1;transform:none}}
.modal-card h2{font-family:var(--f-display);font-size:38px;line-height:1;margin-bottom:12px}
.modal-card > p{margin-bottom:18px}
.co-list{text-align:left;margin:0 0 18px;padding:14px 18px;border-radius:18px;background:rgba(15,42,58,.05);font-size:15px}
.co-list li{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.co-list li.tot{font-weight:700;border-top:1px dashed rgba(15,42,58,.25);margin-top:6px;padding-top:8px}
.co-actions{display:grid;gap:10px}
.co-note{font-size:12.5px;opacity:.7;margin-top:14px}
.co-done-can{width:120px;margin:-10px auto 8px;height:190px}
.co-done-can svg{height:100%;width:auto;margin:0 auto}
.confetti{position:fixed;z-index:130;pointer-events:none;border-radius:50%}

.toast{position:fixed;left:50%;bottom:22px;z-index:140;transform:translate(-50%,calc(100% + 40px));visibility:hidden;transition:transform .5s var(--ease-bounce),visibility 0s .5s;background:var(--ink);color:var(--bg);padding:14px 22px;border-radius:99px;font-weight:500;font-size:15px;box-shadow:0 20px 40px -20px rgba(15,42,58,.6);max-width:calc(100% - 32px);text-align:center}
.toast.show{transform:translate(-50%,0);visibility:visible;transition:transform .5s var(--ease-bounce),visibility 0s}
.fly{position:fixed;z-index:150;width:22px;height:28px;margin:-14px 0 0 -11px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;pointer-events:none;box-shadow:inset 0 0 0 2.5px var(--ink)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px}
  .reviews-grid{grid-template-columns:1fr}
  .reviews-head > p{max-width:none}
  .cards{grid-template-columns:repeat(2,1fr)}
  .cards .card:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:900px){
  :root{--nav-h:68px}
  .burger{display:block}
  .menu{position:fixed;left:12px;right:12px;top:74px;flex-direction:column;align-items:stretch;gap:4px;padding:14px;border-radius:26px;background:var(--cream);box-shadow:0 30px 60px -30px rgba(15,42,58,.6);opacity:0;transform:translateY(-12px) scale(.98);pointer-events:none;transition:opacity .3s,transform .4s var(--ease-out)}
  .menu.open{opacity:1;transform:none;pointer-events:auto}
  .menu a{font-size:20px;padding:12px 16px;font-family:var(--f-display)}
  .menu .menu-cta{margin:6px 0 0;text-align:center}
  .nav-inner{background:rgba(251,252,235,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-left:18px}
  .logo{font-size:30px}

  .hero{padding-top:calc(var(--nav-h) + 20px);min-height:auto}
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-copy{display:contents}
  .hero-copy .eyebrow{order:1;margin-bottom:14px}
  .hero-title{order:2;margin-bottom:8px}
  .hero-stage{order:3;height:min(60vh,500px);min-height:360px;margin:0 0 34px}
  .lead{order:4;max-width:none}
  .hero .cta-row{order:5}
  .proof{order:6}
  .new-card{top:auto;bottom:18%;right:0;max-width:210px}
  .scroll-hint{display:none}

  .stage{grid-template-columns:1fr}
  .stage-visual{height:min(64vh,540px);min-height:420px}
  .stage-info{max-width:none}
  .story-grid{grid-template-columns:1fr}
  .story-left{position:relative;top:0}
  .bundle{grid-template-columns:1fr}
  .perks{grid-template-columns:1fr}
  .sec-head-row{flex-direction:column;align-items:flex-start}
}
@media (max-width:600px){
  body{font-size:16px}
  .flavors,.shop{padding:100px 0 80px}
  .story{padding:110px 0 80px}
  .reviews{padding:80px 0}
  .final{padding:20px 0 110px}
  .cards{grid-template-columns:1fr}
  .card-visual{height:300px}
  .hero-title{font-size:clamp(60px,19vw,96px)}
  .cta-row .btn{flex:1 1 auto}
  .badge-ring{width:96px;top:0}
  .badge-core{font-size:18px}
  .new-card{display:none}
  .fr-b,.fr-c{display:none}
  .fr-a{width:64px;right:4%}
  .hero-title{font-size:clamp(56px,17vw,90px)}
  .hero-hand{left:0}
  .hand-arrow{left:40%;bottom:14px;width:56px}
  .tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:0 calc(-1*var(--gutter)) 24px;padding:4px var(--gutter);scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:none;height:44px;font-size:14.5px;padding:0 16px 0 10px}
  .tabs button i{width:20px;height:20px}
  .buy-row .stepper{flex:none}
  .add-stage{min-width:0}
  .chapters-wrap{padding-left:46px}
  .story-line{width:40px}
  .chapter::before{left:-36px}
  .ch-num{font-size:48px}
  .footer-grid{grid-template-columns:1fr}
  .news-row{flex-direction:column}
  .legal{flex-direction:column}
  .drawer{border-radius:0}
  .bundle-buy .btn{width:100%}
}

/* =========================================================
   MÉDIAS GÉNÉRÉS (V2) : vidéo du hero, photos saveurs,
   coffret, histoire. Les SVG restent en secours.
   ========================================================= */

/* hero : média plein cadre derrière le texte */
/* La vidéo n'est plus étirée plein écran : elle garde sa taille d'origine ou moins
   (pas de pixelisation), ancrée à droite, et ses bords se fondent dans le fond. */
.hero{--hero-bg:#DDDA5C;background:var(--hero-bg)}
.band .drip path{fill:var(--hero-bg,#DDDA5C)}
.hero-stage{position:static}
.hero-media{
  position:absolute;right:0;bottom:8vh;z-index:-2;
  height:min(68vh,72vw*.558,1076px);aspect-ratio:1928/1076;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 97%,transparent 100%),linear-gradient(transparent 0%,#000 12%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 97%,transparent 100%),linear-gradient(transparent 0%,#000 12%,#000 86%,transparent 100%);
  mask-composite:intersect;
  will-change:transform
}
.hero-zoom{position:absolute;inset:0;transform-origin:72% 70%;opacity:0}
.is-ready .hero-zoom{animation:heroIn 1.9s var(--ease-out) both,heroPush 24s ease-in-out 1.9s infinite alternate}
@keyframes heroIn{from{opacity:0;transform:scale(1.06);filter:blur(10px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes heroPush{from{opacity:1;transform:scale(1)}to{opacity:1;transform:scale(1.035)}}
.hero-poster,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:translate3d(var(--px,0px),var(--py,0px),0)}
.hero-video{opacity:0;transition:opacity 1.2s ease}
.hero-video.is-playing{opacity:1}
.cans-pair{display:none}
.media-fail .hero-media{display:none}
.media-fail .cans-pair{display:flex}
.media-fail .hero-stage{position:relative}
.hero .bubbles{z-index:-1}
.hero:not(.media-fail) .badge-ring{left:48%;top:27%}
.hero:not(.media-fail) .hero-hand{left:55%;bottom:3.5%;font-size:clamp(26px,2.4vw,36px)}
.hero:not(.media-fail) .hand-arrow{left:78%;bottom:2.5%;width:62px;transform:rotate(-4deg)}
.hero:not(.media-fail) .scroll-hint{display:none}

/* saveurs : la photo remplit l'arche */
.stage-visual .arch{width:min(84%,430px);height:92%;bottom:3%;z-index:1;overflow:hidden;box-shadow:0 30px 60px -34px rgba(15,42,58,.45)}
.stage-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.stage-photo img.enter{animation:photoIn 1s var(--ease-out) both}
@keyframes photoIn{from{clip-path:circle(0% at 50% 86%);transform:scale(1.14)}to{clip-path:circle(150% at 50% 86%);transform:scale(1)}}
.stage-visual .fruit{z-index:3}
.stage-can{display:none}
.stage-visual.photo-fail .stage-can{display:block}
.stage-visual.photo-fail .stage-photo img{display:none}

/* cartes boutique */
.card-visual{overflow:hidden;height:380px;background:rgba(255,255,255,.3)}
.card-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 64%;transition:transform .9s var(--ease-out)}
.card:hover .card-photo{transform:scale(1.06)}
.card-visual:not(.photo-fail) .can-slot{display:none}
.card-visual.photo-fail .card-photo{display:none}

/* coffret */
.bundle-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:28px;transition:transform 1.2s var(--ease-out)}
.bundle:hover .bundle-photo{transform:scale(1.03)}
.bundle-visual{border-radius:28px;overflow:hidden}
.bundle-visual:not(.photo-fail) > :not(.bundle-photo){display:none}
.bundle-visual.photo-fail{overflow:visible}
.bundle-visual.photo-fail .bundle-photo{display:none}

/* histoire : photo dans un cadre qui ondule comme une flaque */
.story-visual{height:clamp(280px,min(32vw,48vh),440px)}
.story-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:45% 60%;border-radius:42% 58% 46% 54%/40% 44% 56% 60%;animation:blobFrame 14s ease-in-out infinite;box-shadow:0 0 0 10px rgba(228,242,110,.08)}
@keyframes blobFrame{50%{border-radius:56% 44% 58% 42%/52% 38% 62% 48%}}
.story-visual:not(.photo-fail) .sun,.story-visual:not(.photo-fail) .float-can{display:none}
.story-visual.photo-fail .story-photo{display:none}

/* vignettes du panier */
.thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}

@media (max-width:900px){
  .hero-stage{position:relative;height:auto;min-height:0;aspect-ratio:4/3;margin:6px calc(-1*var(--gutter)) 30px}
  .hero-media{z-index:0;inset:0;height:auto;aspect-ratio:auto;
    -webkit-mask-image:linear-gradient(transparent 0%,#000 14%,#000 88%,transparent 100%);
    mask-image:linear-gradient(transparent 0%,#000 14%,#000 88%,transparent 100%)}
  .hero-poster,.hero-video{object-position:85% 55%;transform:none}
  .hero:not(.media-fail) .badge-ring{left:var(--gutter);top:10%;z-index:2}
  .hero:not(.media-fail) .hero-hand{left:var(--gutter);bottom:2%;z-index:2}
  .hero:not(.media-fail) .hand-arrow{display:none}
  .media-fail .hero-stage{aspect-ratio:auto;height:min(60vh,500px);margin:0 0 34px}
  .card-visual{height:360px}
}
@media (max-width:600px){
  .story-visual{height:300px}
}

/* =========================================================
   EXPÉRIENCE 3D (V3) : section épinglée pilotée par le défilement
   ========================================================= */
.exp{position:relative;height:620vh;background:#CDD0FF}
.exp .drip{z-index:5}
.exp-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.exp-bg{position:absolute;inset:0;background:#E4F26E}
.exp-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;opacity:0;transition:opacity .8s ease}
.exp.is-ready .exp-canvas{opacity:1}
.exp-video{position:absolute;top:0;left:50%;height:100%;width:auto;min-width:0;max-width:none;transform:translateX(-50%);z-index:0;opacity:0;pointer-events:none}
.exp-loader{position:absolute;left:50%;top:50%;width:20px;height:28px;margin:-14px 0 0 -10px;z-index:2;transition:opacity .4s}
.exp-loader span{display:block;width:100%;height:100%;background:var(--ink);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;animation:hint 1.4s var(--ease-out) infinite}
.exp.is-ready .exp-loader{opacity:0;pointer-events:none}

.exp-copy{position:absolute;inset:0;z-index:3;pointer-events:none}
.exp-beat{position:absolute;left:max(var(--gutter),calc((100vw - var(--wrap))/2 + var(--gutter)));top:50%;max-width:min(420px,34vw);transform:translateY(-40%);opacity:0;filter:blur(8px);transition:opacity .7s var(--ease-out),transform .9s var(--ease-out),filter .7s}
.exp-beat.on{opacity:1;transform:translateY(-50%);filter:none;pointer-events:auto}
.exp-beat .eyebrow{margin-bottom:14px}
.exp-beat .display{font-size:clamp(52px,6.4vw,104px);margin-bottom:16px}
.exp-beat p:not(.eyebrow):not(.hand){font-size:18px;max-width:340px}
.exp-beat .hand{font-size:clamp(28px,2.6vw,38px);color:var(--lime-d);margin-bottom:10px;transform:rotate(-3deg)}
.exp-beat[data-beat="5"] .hand{color:#4b46c9}

.exp-tags{position:absolute;inset:0;z-index:3;pointer-events:none}
.exp-tag{position:absolute;left:calc(var(--can-right,60%) + 54px);top:var(--y);display:flex;align-items:center;gap:10px;padding:9px 16px 9px 10px;border-radius:99px;background:rgba(251,252,235,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-weight:700;font-size:15px;box-shadow:0 12px 30px -18px rgba(15,42,58,.5);opacity:0;transform:translateX(-18px) scale(.9);transition:opacity .5s var(--ease-out),transform .7s var(--ease-bounce);transition-delay:0s}
.exp-tag::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 2px var(--ink)}
.exp-tag::after{content:"";position:absolute;right:100%;top:50%;width:46px;height:2px;background:linear-gradient(90deg,rgba(15,42,58,0),rgba(15,42,58,.5))}
.exp-tag.on{opacity:1;transform:none;transition-delay:var(--d)}

.exp-dots{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);z-index:3;display:grid;gap:12px}
.exp-dots i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--ink);transition:background .4s,transform .4s var(--ease-bounce)}
.exp-dots i.on{background:var(--c);transform:scale(1.35)}

.exp-static{display:none}
.exp.is-static{height:auto;padding:120px 0 110px;background:var(--bg)}
.exp.is-static .exp-sticky{display:none}
.exp.is-static .exp-static{display:block;text-align:center}
.exp-static .display{font-size:clamp(40px,5vw,72px);margin:14px 0 36px}
.exp-static-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.exp-static-row img{width:100%;height:auto;border-radius:26px}

.drip-exp path{fill:#CDD0FF}

@media (max-width:900px){
  .exp{height:520vh}
  .exp-beat{left:var(--gutter);right:var(--gutter);top:calc(var(--nav-h) + 14px);max-width:none;transform:translateY(12px)}
  .exp-beat.on{transform:none}
  .exp-beat .display{font-size:clamp(40px,11vw,64px);margin-bottom:8px}
  .exp-beat p:not(.eyebrow):not(.hand){font-size:15.5px}
  .exp-beat .btn{margin-top:4px}
  .exp-beat[data-beat="4"],.exp-beat[data-beat="5"]{top:auto;bottom:calc(24px + env(safe-area-inset-bottom))}
  .exp-tags{display:none}
  .exp-dots{top:auto;bottom:24px;right:50%;transform:translateX(50%);grid-auto-flow:column}
  .exp-static-row{grid-template-columns:1fr;max-width:420px;margin:0 auto}
}

/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important}
  .intro-in,.reveal{opacity:1!important;transform:none!important;filter:none!important}
  .intro-can .can-body,.intro-can .can-shadow,.intro-can .puddle{opacity:1!important}
  .intro-can .splash circle{opacity:0!important}
  .hero-zoom{opacity:1!important;transform:none!important;filter:none!important}
  .hero-video{display:none}
  .stage-photo img.enter{clip-path:none!important;transform:none!important}
  .melt .d{transform:none}
  .bubbles{display:none}
  .marquee-track{animation:none}
}