/* Biscuiterie Pedro's — scène sombre, sachet épinglé.
   Sans la classe .motion (pas de JS, ou mouvement réduit), la page est un document empilé lisible. */
:root{
  --stage:#140904; --stage-2:#24120a; --line:#4a2c1c;
  --ink:#fbf1e3; --ink-soft:#d0b9a2;
  --red:#e3262f; --honey:#f6a821; --green:#22a05a; --cocoa:#8a4a2a; --patate:#e9772c;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --text:"Hanken Grotesk","Segoe UI",system-ui,sans-serif;
  --pad:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scrollbar-color:#6b4a36 var(--stage);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--stage);color:var(--ink);font-family:var(--text);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--honey);color:var(--stage)}
img{max-width:100%;height:auto;display:block}
h1,h2{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:.98;margin:0;text-wrap:balance}
h1{font-size:clamp(3.1rem,12.5vw,6.5rem)}
h2{font-size:clamp(2.3rem,8.5vw,4.75rem)}
p{margin:0;color:var(--ink-soft);max-width:34em}
a{color:inherit}
:focus-visible{outline:3px solid var(--honey);outline-offset:3px;border-radius:6px}
.defs{position:absolute}
.skip{position:fixed;left:12px;top:-80px;z-index:50;background:var(--ink);color:var(--stage);padding:12px 16px;border-radius:10px;font-weight:700}
.skip:focus{top:12px}

/* ---------- barre haute ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:12px var(--pad);pointer-events:none}
.top>*{pointer-events:auto;position:relative}
.top::before{content:"";position:absolute;inset:0 0 -28px 0;background:linear-gradient(to bottom,rgba(20,9,4,.92) 35%,rgba(20,9,4,0));pointer-events:none}
.top__logo img{height:46px;width:auto}
.pill,.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;font-weight:700;text-decoration:none;cursor:pointer;border:0;font-family:inherit;line-height:1.3;transition:transform .25s var(--ease),background-color .2s}
.pill svg,.btn svg{width:20px;height:20px;flex:none}
.pill{min-height:46px;padding:0 18px;background:var(--honey);color:#1b0d05;font-size:.95rem;box-shadow:0 10px 24px -10px rgba(0,0,0,.7)}
.pill:hover,.btn:hover{transform:translateY(-2px)}
.pill:active,.btn:active{transform:translateY(0)}
.btn{min-height:54px;padding:0 24px;font-size:1rem;margin-top:22px}
.btn--wa{background:var(--green);color:#04170b}
.btn--wa:hover{background:#2bb568}
.btn--ghost{border:1.5px solid var(--ink-soft);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--full{width:100%}

/* ---------- rail de chapitres ---------- */
.rail{position:fixed;z-index:29;left:var(--pad);right:var(--pad);top:72px;display:flex;gap:5px;pointer-events:none}
.rail a{flex:1;height:3px;border-radius:2px;background:#4a2c1c;transition:background-color .3s}
.rail a.is-past,.rail a[aria-current]{background:var(--ink)}
.rail span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.rail a:focus-visible{pointer-events:auto;height:8px}

/* ---------- scène : version empilée (défaut) ---------- */
.stage{padding:110px var(--pad) 40px;display:flex;flex-direction:column;gap:28px}
.glow,.ghost{display:none}
.props{display:contents}
.card{display:contents}
.face{width:min(78vw,340px);aspect-ratio:1;object-fit:cover;border-radius:26px;box-shadow:0 40px 50px -24px rgba(0,0,0,.85)}
.panel[data-panel="0"]{order:-3}
.face--a{order:-2}.panel[data-panel="1"]{order:-1}
.panel p{margin-top:14px}
.meta{font-weight:600;color:var(--ink)!important;font-size:.95rem}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;padding:0;margin:20px 0 0;font-size:.92rem;font-weight:600}
.chips li{display:inline-flex;align-items:center;gap:8px}
.chips li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c)}
.layers{list-style:none;padding:0;margin:0;display:grid;gap:14px;order:5}
.layers li{display:flex;align-items:center;gap:16px}
.plate{flex:none;width:72px;height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.25)}
.plate--manioc{background:radial-gradient(circle at 30% 30%,#fffaf0,#e8dcc4)}
.plate--sesame{background:#d9a441 radial-gradient(circle,#fbe6a8 1.6px,transparent 2.2px) 0 0/11px 9px}
.plate--niebe{background:#e9dcc3 radial-gradient(ellipse,#2a1810 2px,transparent 3px) 0 0/22px 18px}
.plate--patate{background:radial-gradient(circle at 60% 40%,#f79a3f,#c8551a)}
.lab{font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-.02em;color:var(--ink);line-height:1.3}
.lab small{display:block;font-family:var(--text);font-weight:500;font-size:.85rem;color:var(--ink-soft);letter-spacing:0;line-height:1.4}

/* ---------- scène : version animée ---------- */
.motion .scene{height:560vh;height:560svh}
.motion .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;padding:0;display:block;--a:0;--b:0;--c:0;--mx:0;--my:0}
.motion .stage::after{content:"";position:absolute;inset:auto 0 0 0;height:58%;background:linear-gradient(to top,var(--stage) 48%,transparent);pointer-events:none;z-index:2;opacity:calc(1 - var(--c))}
.motion .glow{display:block;position:absolute;left:50%;top:34%;width:min(120vw,70vh);aspect-ratio:1;translate:-50% -50%;border-radius:50%;filter:blur(70px);opacity:0;transition:opacity .9s ease}
.glow--0{background:var(--red)}.glow--1{background:var(--honey)}.glow--2{background:var(--patate)}.glow--3{background:var(--cocoa)}
.motion .stage[data-ch="0"] .glow--0,.motion .stage[data-ch="1"] .glow--1,.motion .stage[data-ch="2"] .glow--2{opacity:.5}
.motion .stage[data-ch="3"] .glow--3{opacity:.7}

.motion .props{display:block;position:absolute;left:50%;top:13svh;width:var(--pw);aspect-ratio:1;--pw:min(72vw,36svh);
  translate:calc(-50% + var(--c)*16vw) calc(var(--c)*22svh);--spread:125%;perspective:1100px;z-index:1}
.motion .card{display:block;position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;
  transform:translate(calc((1 - var(--a))*-7%),calc((1 - var(--a))*10% - var(--c)*18%))
    rotate(calc((1 - var(--a))*-7deg + var(--a)*-2deg + var(--b)*5deg))
    scale(calc(.9 + var(--a)*.14 - var(--c)*.5))
    rotateX(calc(var(--my)*-5deg)) rotateY(calc(var(--b)*180deg + var(--mx)*6deg));
  opacity:calc(1 - var(--c)*1.6)}
.motion .face{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.motion .face--b{transform:rotateY(180deg)}
.motion .ghost{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:26px;
  transform:translate(34%,-6%) rotate(11deg) scale(.8);filter:brightness(.55);opacity:calc(1 - var(--a)*1.6)}

.motion .layers{display:block;position:absolute;inset:0;opacity:calc(var(--c)*2 - .25);pointer-events:none}
.motion .layers li{display:block;position:absolute;left:0;top:33%;width:100%;height:34%;transform:translateY(calc(var(--i)*var(--c)*var(--spread)))}
.motion .plate{position:absolute;right:0;top:0;width:76%;height:100%;border-radius:22%/34%;transform:rotateX(54deg) rotateZ(-32deg);box-shadow:0 50px 34px -26px rgba(0,0,0,.8)}
.motion .lab{position:absolute;left:calc(var(--pad) - 66vw + var(--pw)/2);top:50%;translate:0 -50%;width:max-content;max-width:38vw;font-size:1.15rem;
  opacity:calc(var(--c)*5 - 1.4 - var(--n)*.75)}

.motion .panel{position:absolute;left:var(--pad);right:var(--pad);bottom:max(28px,5svh);z-index:3;
  opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .45s ease,transform .6s var(--ease),visibility 0s .45s}
.motion .panel.is-on{opacity:1;visibility:visible;transform:none;transition-delay:.12s,.12s,0s}
.motion .panel--top{bottom:auto;top:92px}
.motion .panel--top p{display:none}
.motion .panel h2{font-size:clamp(2.1rem,8.5vw,4.75rem)}
.motion .panel--top h2{font-size:clamp(1.9rem,7.6vw,4.75rem)}

/* ---------- histoire ---------- */
.story{position:relative;display:grid}
.story__photo{position:relative;height:min(64svh,560px);overflow:hidden;background:#5c5c5e}
.story__photo img{width:100%;height:108%;object-fit:cover;object-position:50% 0;transform:translateY(calc(var(--sp,.5)*-6%))}
.story__photo::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(to top,var(--stage),transparent)}
.story__text{padding:8px var(--pad) 96px;margin-top:-56px;position:relative}
.story__text p{margin-top:18px}
.dates{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.dates li{position:relative;padding:14px 12px 0 0;font-size:.85rem;color:var(--ink-soft);line-height:1.4}
.dates li::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--honey)}
.dates b{display:block;font-family:var(--display);font-size:1.15rem;color:var(--ink)}

/* ---------- promote ---------- */
.promote{padding:40px 0 96px;overflow:hidden}
.promote__track{display:flex;gap:12px;padding:0 var(--pad);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.promote__track::-webkit-scrollbar{display:none}
.promote__track img{flex:none;height:min(46svh,380px);width:auto;border-radius:20px;scroll-snap-align:center;object-fit:cover}
.motion .promote__track{overflow:visible;scroll-snap-type:none;will-change:transform;transform:translateX(calc(var(--sp,0)*var(--travel,0px)*-1))}
.promote__text{padding:44px var(--pad) 0}
.promote__lead{margin-top:16px;font-size:1.1rem}
.stats{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:36px 0;max-width:1100px}
.stats li{position:relative;padding:0 8px 0 38px}
.stats li::before{content:"";position:absolute;left:10px;top:4%;height:92%;width:2px;border-radius:2px;background:var(--honey);transform:skewX(-18deg)}
.stats li:nth-child(odd){padding-left:0}
.stats li:nth-child(odd)::before{display:none}
.num{display:block;font-family:var(--display);font-weight:800;font-size:clamp(3.4rem,17vw,6rem);line-height:1;letter-spacing:-.04em;color:var(--honey);font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:10px;font-weight:600;font-size:.98rem;line-height:1.35;color:var(--ink);max-width:11em}
.motion .stats li{opacity:0;transform:translateY(28px);transition:opacity .6s ease calc(var(--n)*.13s),transform .9s var(--ease) calc(var(--n)*.13s)}
.motion .stats li::before{transform:skewX(-18deg) scaleY(0);transition:transform .8s var(--ease) calc(var(--n)*.13s + .15s)}
.motion .stats.in li{opacity:1;transform:none}
.motion .stats.in li::before{transform:skewX(-18deg) scaleY(1)}

/* ---------- commander ---------- */
.order{padding:72px var(--pad) 88px;display:grid;gap:28px;background:var(--stage-2);border-top:1px solid var(--line)}
.order__intro p{margin-top:16px}
.order__form{max-width:520px;width:100%}
.line{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.line img{width:64px;height:64px;border-radius:14px;object-fit:cover;flex:none}
.line p{flex:1;font-weight:700;color:var(--ink);line-height:1.4}
.line small{display:block;font-weight:500;color:var(--ink-soft);font-size:.85rem}
.step{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;flex:none}
.step button{width:46px;height:46px;border:0;background:none;color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer;border-radius:50%;font-family:inherit}
.step button:hover{background:rgba(255,255,255,.08)}
.step button:disabled{opacity:.35;cursor:default}
.step output{min-width:24px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.field{display:block;margin-top:20px;font-size:.9rem;font-weight:600}
.field input{display:block;width:100%;height:54px;margin-top:6px;padding:0 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--stage);color:var(--ink);font:500 1rem/1.5 var(--text);caret-color:var(--honey)}
.field input::placeholder{color:#a48d78}
.field input:focus{outline:none;border-color:var(--honey)}
.field input[aria-invalid="true"]{border-color:#ff8a7a}
.bubble{margin-top:18px;padding:14px 16px;border-radius:18px 18px 4px 18px;background:#0f3d24;color:#dff5e6;font-size:.95rem;line-height:1.45;max-width:none;white-space:pre-line}
.bubble:empty{display:none}
.bubble strong{color:#fff;font-weight:700}
.error{margin-top:12px;color:#ffb3a7;font-weight:600;font-size:.92rem}
.order__partner{margin-top:18px;font-size:.92rem;text-align:center;max-width:none}
.order__partner a{color:var(--ink);text-underline-offset:3px;display:inline-block;padding:10px 4px}

/* ---------- pied ---------- */
.foot{padding:48px var(--pad) 0;text-align:left}
.foot img{height:64px;width:auto}
.foot p{margin-top:14px}
.foot__small{font-size:.85rem}
.flag{display:grid;grid-template-columns:repeat(3,1fr);height:6px;margin:36px calc(var(--pad)*-1) 0}
.flag i:nth-child(1){background:var(--green)}.flag i:nth-child(2){background:var(--red)}.flag i:nth-child(3){background:var(--honey)}

/* entrées, seulement quand le mouvement est permis */
.motion [data-in]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .9s var(--ease)}
.motion [data-in].in{opacity:1;transform:none}

/* ---------- ordinateur ---------- */
@media (min-width:900px){
  .top{padding:22px var(--pad)}
  .top__logo img{height:60px}
  .pill{min-height:50px;padding:0 22px;font-size:1rem}
  .rail{left:auto;right:var(--pad);top:50%;translate:0 -50%;flex-direction:column;gap:6px;pointer-events:auto;align-items:flex-end}
  .rail a{flex:none;height:auto;background:none!important;display:flex;align-items:center;gap:12px;padding:6px 0;font-size:.88rem;font-weight:600;color:#a48d78;text-decoration:none;transition:color .3s}
  .rail a::after{content:"";width:22px;height:1.5px;background:currentColor;transition:width .4s var(--ease)}
  .rail a:hover{color:var(--ink)}
  .rail a[aria-current]{color:var(--ink)}
  .rail a[aria-current]::after{width:46px}
  .rail span{position:static;width:auto;height:auto;clip-path:none;padding:2px 8px;border-radius:999px;background:rgba(20,9,4,.6)}

  .stage{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px;padding-top:140px}
  .motion .props{left:66%;top:48%;--pw:min(30vw,56svh);--spread:100%;translate:calc(-50% - var(--c)*10vw) -50%}
  .motion .glow{left:66%;top:48%;width:min(60vw,90vh)}
  .motion .stage::after{height:40%;background:linear-gradient(to top,var(--stage) 10%,transparent)}
  .motion .panel{right:auto;width:min(38vw,600px);bottom:9svh}
  h1{font-size:clamp(3.5rem,6.6vw,6.5rem)}
  .motion .panel--top{top:auto;bottom:9svh}
  .motion .panel--top p{display:block}
  .motion .panel p{font-size:1.2rem}
  .motion .lab{left:104%;max-width:none;font-size:1.6rem}
  .motion .lab small{font-size:1rem}
  .motion .plate{width:82%}

  .story{grid-template-columns:1fr 1fr;align-items:center;min-height:100svh}
  .story__photo{height:100svh;max-height:none}
  .story__photo::after{inset:0 0 0 auto;width:40%;height:auto;background:linear-gradient(to left,var(--stage),transparent)}
  .story__text{margin:0;padding:96px calc(var(--pad) + 140px) 96px 24px}
  .story__text p{font-size:1.15rem}
  .promote{padding:96px 0 128px}
  .promote__track img{height:min(56svh,520px)}
  .promote__text{padding-top:64px;padding-right:calc(var(--pad) + 160px)}
  .stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
  .stats li,.stats li:nth-child(odd){padding:0 12px 0 56px}
  .stats li:nth-child(odd)::before{display:block}
  .stats li:first-child{padding-left:0}
  .stats li:first-child::before{display:none}
  .stats li::before{left:16px}
  .num{font-size:clamp(3rem,5.4vw,6.5rem)}
  .stats span{font-size:1.05rem}
  .order{grid-template-columns:1fr 1fr;gap:64px;padding:128px calc(var(--pad) + 160px) 128px var(--pad);align-items:start}
  .order__intro p{font-size:1.2rem}
  .line p{font-size:1.15rem}
}