/* Culture & Partage · the open page */
:root{
  --canvas:#F5EFE7;
  --panel:#FBF7F1;
  --paper-2:#EFE6DA;
  --ink:#1B1716;
  --ink-2:#5A514C;
  --ink-3:#7A706A;
  --line:#DDD2C5;
  --line-strong:#B9AB9C;
  --accent:#B8463A;
  --accent-hover:#9E3A2F;
  --accent-muted:#E9B9AF;
  --gold:#C8923F;
  --night:#191514;
  --night-2:#241E1C;
  --on-night:#F3ECE3;
  --on-night-2:#C9BDB2;
  --f-display:'Amiri',Georgia,serif;
  --f-body:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --r:14px;
  --r-lg:22px;
  --shadow-book:0 22px 40px -22px rgba(27,23,22,.55),0 6px 14px -8px rgba(27,23,22,.25);
  --tshadow:0 1px 2px rgba(12,8,6,.9),0 3px 14px rgba(12,8,6,.6),0 10px 44px rgba(12,8,6,.55);
  --wrap:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;animation:pageIn .8s var(--ease) both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{width:min(var(--wrap),100% - 32px);margin-inline:auto}
[lang="fr"]{unicode-bidi:isolate}
.book__title[lang="fr"],#mTitle[lang="fr"],.summary__pack,.pack__name,.pp b{unicode-bidi:plaintext;text-align:right}
.mono{font-family:var(--f-mono);font-feature-settings:"tnum"}
.skip{position:fixed;top:-60px;right:16px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;transition:top .3s var(--ease)}
.skip:focus{top:12px}
main:focus{outline:none}

/* ---------- environment layer: drifting writing grid ---------- */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.env__grid{position:absolute;inset:-10%;opacity:.55;
  background-image:
    linear-gradient(rgba(120,160,190,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(184,70,58,.06) 1px,transparent 1px);
  background-size:100% 28px,112px 100%;
  animation:drift 90s linear infinite;animation-delay:-20s}
.env__glow{position:absolute;inset:0;background:radial-gradient(60% 50% at 85% 10%,rgba(200,146,63,.12),transparent 70%),radial-gradient(50% 40% at 10% 90%,rgba(184,70,58,.06),transparent 70%)}
@keyframes drift{to{transform:translate3d(-112px,56px,0)}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.25;margin:0;letter-spacing:0}
.h2{font-size:clamp(2rem,1.3rem + 2.6vw,3.35rem);max-width:18ch}
.head--center .h2{margin-inline:auto}
.lead{font-size:clamp(1.05rem,1rem + .3vw,1.2rem);color:var(--ink-2);max-width:56ch;margin:18px 0 0}
.head--center{text-align:center}
.head--center .lead{margin-inline:auto}
.head{margin-bottom:clamp(36px,5vw,64px)}
.head--split{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.92rem;font-weight:600;color:var(--accent);margin:0 0 16px;letter-spacing:0}
.eyebrow .rule{display:inline-block;width:34px;height:1.5px;background:currentColor;opacity:.8}
.eyebrow--light{color:var(--accent-muted)}
.eyebrow--hero{color:#F6D9CF}
.section{padding:clamp(80px,10vw,140px) 0;position:relative}

/* ---------- buttons ---------- */
.btn{--bg:transparent;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:999px;border:1.5px solid transparent;background:var(--bg);font-weight:600;font-size:1rem;text-decoration:none;cursor:pointer;transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn .arr{display:inline-block;transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(-4px)}
.btn--accent{--bg:var(--accent);color:#fff;box-shadow:0 12px 26px -14px rgba(184,70,58,.75)}
.btn--accent:hover{--bg:var(--accent-hover)}
.btn--ghost{border-color:var(--line-strong);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:rgba(27,23,22,.04)}
.btn--glass{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(20,14,10,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn--glass:hover{background:rgba(20,14,10,.45);border-color:#fff}
.btn--sm{min-height:42px;padding:8px 18px;font-size:.95rem}
.btn--lg{min-height:56px;padding:14px 30px;font-size:1.06rem}
.btn--block{width:100%}
@media (pointer:coarse){.btn{min-height:48px}}

/* ---------- header ---------- */
.header{position:fixed;top:0;inset-inline:0;z-index:50;transition:background-color .45s var(--ease),box-shadow .45s var(--ease),transform .45s var(--ease)}
.header__in{display:flex;align-items:center;gap:28px;height:84px}
.brand{display:block;flex:none;padding:6px 10px;border-radius:12px;background:rgba(251,247,241,.92);box-shadow:0 6px 18px -10px rgba(0,0,0,.35);transition:box-shadow .45s var(--ease),background-color .45s var(--ease)}
.brand img{height:54px;width:auto;mix-blend-mode:multiply}
.nav{display:flex;gap:4px;margin-inline-start:auto}
.nav a{padding:8px 14px;border-radius:999px;text-decoration:none;font-weight:500;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45);transition:background-color .3s var(--ease),color .3s var(--ease)}
.nav a:hover{background:rgba(255,255,255,.14)}
.nav__cta{display:none}
.header.solid{background:rgba(245,239,231,.9);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--line)}
.header.solid .brand{background:transparent;box-shadow:none}
.header.solid .nav a{color:var(--ink);text-shadow:none}
.header.solid .nav a:hover{background:rgba(27,23,22,.06)}
.burger{display:none;width:46px;height:46px;border:0;border-radius:12px;background:rgba(251,247,241,.92);cursor:pointer;position:relative}
.burger span{position:absolute;inset-inline:13px;height:2px;background:var(--ink);border-radius:2px;transition:transform .35s var(--ease),top .35s var(--ease)}
.burger span:first-child{top:18px}.burger span:last-child{top:26px}
.burger[aria-expanded="true"] span:first-child{top:22px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:22px;transform:rotate(-45deg)}

/* ---------- HERO (scrub) ---------- */
.hero{position:relative;height:420vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#6b4626}
.poster{position:absolute;inset:0;background-size:cover;background-position:center;background-color:#7a5230}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready .hero__video{opacity:1}
.scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(270deg,rgba(18,11,7,.62) 0%,rgba(18,11,7,.34) 30%,rgba(18,11,7,0) 58%),
    linear-gradient(0deg,rgba(18,11,7,.42) 0%,rgba(18,11,7,0) 30%),
    linear-gradient(180deg,rgba(18,11,7,.38) 0%,rgba(18,11,7,0) 18%)}
.band{position:absolute;inset-inline-start:max(16px,(100vw - var(--wrap))/2);top:50%;width:min(620px,52vw);transform:translateY(-46%);opacity:0;color:#fff;text-shadow:var(--tshadow);pointer-events:none;--k:0}
.band.on{pointer-events:auto}
.band::before{content:"";position:absolute;inset:-22% -18% -22% -30%;z-index:-1;pointer-events:none;opacity:calc(.25 + .75*var(--k,1));background:radial-gradient(ellipse 62% 58% at 62% 50%,rgba(14,8,5,.62) 0%,rgba(14,8,5,.4) 46%,rgba(14,8,5,0) 76%)}
.band--1::before{background:radial-gradient(ellipse 62% 58% at 62% 50%,rgba(14,8,5,.7) 0%,rgba(14,8,5,.44) 46%,rgba(14,8,5,0) 76%)}
.band__title{font-size:clamp(2.6rem,1.4rem + 4.4vw,5.4rem);line-height:1.18;max-width:11ch}
.band--2 .band__title,.band--3 .band__title{font-size:clamp(2.2rem,1.2rem + 3.4vw,4.3rem);max-width:13ch}
.band__sub{font-size:clamp(1.08rem,1rem + .45vw,1.3rem);color:#F4EDE5;margin:18px 0 0;max-width:34ch;line-height:1.7}
.band__ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.band .btn{text-shadow:none}
/* split words */
.split .w{display:inline-block;white-space:nowrap;padding:.08em 0;margin:-.08em 0}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* rise (band 1) */
[data-fx="rise"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*28px))}
[data-fx="rise"] .eyebrow{opacity:clamp(0,var(--k)*2,1)}
/* halves parting (band 2): the book opening */
[data-fx="part"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))}
[data-fx="part"] .band__sub{opacity:clamp(0,(var(--k) - .55)*3,1);transform:translateY(calc((1 - clamp(0,(var(--k) - .55)*3,1))*12px))}
/* focus (band 3): blur to sharp, then staged settle */
.band__title--focus{display:grid}
.band__title--focus>span{grid-area:1/1}
.band__title--focus .soft{filter:blur(10px);opacity:calc(1 - var(--k))}
.band__title--focus .sharp{opacity:clamp(0,var(--k)*1.6 - .2,1)}
.band__sub--late{opacity:clamp(0,(var(--k) - .55)*4,1);transform:translateY(calc((1 - clamp(0,(var(--k) - .55)*4,1))*12px))}
.band--3 .band__ctas{opacity:clamp(0,(var(--k) - .72)*5,1);transform:translateY(calc((1 - clamp(0,(var(--k) - .72)*5,1))*14px))}

.static-copy{display:none}
.cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff;font-size:.85rem;text-shadow:0 1px 6px rgba(0,0,0,.6);transition:opacity .5s var(--ease)}
.cue.hide{opacity:0}
.ring{width:40px;height:40px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:2.5}
.ring__bg{stroke:rgba(255,255,255,.25)}
.ring__fg{stroke:#fff;stroke-dashoffset:var(--ld,126);transition:stroke-dashoffset .2s linear}
.cue__chev{display:none;width:12px;height:12px;border-inline-start:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);animation:bob 2.4s var(--ease) infinite;animation-delay:-.6s}
.cue.done .ring{display:none}
.cue.done .cue__chev{display:block}
@keyframes bob{50%{transform:rotate(-45deg) translate(-4px,4px)}}

/* the five static-hero gates (must match main.js exactly) */
@media (max-width: 720px),(orientation: portrait) and (max-width: 1024px),(orientation: portrait) and (pointer: coarse),(orientation: landscape) and (pointer: coarse) and (max-height: 560px),(prefers-reduced-motion: reduce){
  .hero{height:auto}
  .stage{position:relative;height:auto;min-height:100svh;display:flex;align-items:flex-end}
  .poster{background-image:url("assets/hero-ending.jpg");background-position:30% center}
  .hero__video,.band,.cue{display:none}
  .scrim{background:linear-gradient(0deg,rgba(18,11,7,.86) 0%,rgba(18,11,7,.55) 45%,rgba(18,11,7,.08) 75%),linear-gradient(180deg,rgba(18,11,7,.4) 0%,rgba(18,11,7,0) 22%)}
  .static-copy{display:block;position:relative;z-index:2;color:#fff;text-shadow:var(--tshadow);padding:140px 16px 56px;width:min(var(--wrap),100%);margin-inline:auto}
  .static-copy__title{font-size:clamp(2.5rem,1.6rem + 5vw,4.2rem);line-height:1.2;max-width:11ch}
  .static-copy__sub{font-size:1.1rem;color:#F4EDE5;max-width:34ch;margin:16px 0 0}
  .static-copy .btn{text-shadow:none}
}
@media (max-height:560px){.cue{display:none}}

/* ---------- proof strip ---------- */
.proof{background:var(--panel);border-block:1px solid var(--line);position:relative}
.proof__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.proof__item{display:flex;align-items:baseline;gap:14px;padding:30px 22px;border-inline-start:1px solid var(--line)}
.proof__item:first-child{border-inline-start:0}
.proof__item b{font-size:2.3rem;line-height:1;color:var(--accent);font-weight:500}
.proof__item .proof__ar{font-family:var(--f-display);font-size:1.75rem;color:var(--ink)}
.proof__item span{font-size:.95rem;color:var(--ink-2);line-height:1.45}
.marquee{overflow:hidden;border-top:1px solid var(--line);padding:16px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:28px;width:max-content;animation:marq 60s linear infinite;animation-delay:-12s;font-family:var(--f-display);font-size:1.35rem;color:var(--ink-3)}
.marquee__track i{font-style:normal;color:var(--accent-muted)}
.marquee__track [lang="fr"]{font-family:Georgia,serif;font-style:italic;font-size:1.1rem}
@keyframes marq{to{transform:translateX(50%)}}
.marquee:not(.live) .marquee__track{animation-play-state:paused}

/* ---------- reveals ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* ---------- rays (logo motif, self-drawing) ---------- */
.rays path,.how__line path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease-out)}
.rays path{stroke-width:2.2}
.draw.in path{stroke-dashoffset:0}
.rays path:nth-child(2),.rays path:nth-child(5){transition-delay:.12s}
.rays path:nth-child(3),.rays path:nth-child(6){transition-delay:.24s}

/* ---------- worries ---------- */
.worries__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,90px);align-items:start}
.worries__head{position:sticky;top:120px}
.worries__img{margin:30px 0 0;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 60px -36px rgba(27,23,22,.6);aspect-ratio:4/3}
.worries__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease-out)}
.worries__img:hover img{transform:scale(1.04)}
.rays--head{width:150px;margin-top:22px}
.worries__list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.worry{display:grid;grid-template-columns:96px 1fr;gap:22px;align-items:center;padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease),opacity .9s var(--ease-out)}
.worry:hover{transform:translateY(-3px);box-shadow:0 22px 44px -30px rgba(27,23,22,.45);border-color:var(--line-strong)}
.worry img{width:96px;border-radius:4px;box-shadow:var(--shadow-book);transform:rotate(-3deg);transition:transform .45s var(--ease)}
.worry:hover img{transform:rotate(0) scale(1.04)}
.worry h3{font-size:1.4rem;margin-bottom:6px}
.worry p{margin:0;color:var(--ink-2)}
.worries__list .worry.reveal:nth-child(2){transition-delay:.08s}
.worries__list .worry.reveal:nth-child(3){transition-delay:.16s}
.worries__list .worry.reveal:nth-child(4){transition-delay:.24s}
.worries__list .worry.reveal.settled:nth-child(n){transition-delay:0s}

/* ---------- trace (interactive) ---------- */
.trace{background:var(--night);color:var(--on-night);overflow:hidden;isolation:isolate}
.trace__bg{position:absolute;inset:0;z-index:-1}
.trace__bg img{width:100%;height:100%;object-fit:cover;opacity:.22;filter:saturate(.9)}
.trace__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--night) 0%,rgba(25,21,20,.75) 50%,rgba(25,21,20,.55) 100%)}
.trace .lead{color:var(--on-night-2)}
.trace__grid{display:grid;grid-template-columns:1fr minmax(300px,440px);gap:clamp(32px,6vw,90px);align-items:center}
.pad{position:relative;aspect-ratio:320/300;background:var(--panel);border-radius:var(--r-lg);padding:18px 18px 54px;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;box-shadow:0 40px 80px -40px rgba(0,0,0,.8),inset 0 0 0 1px rgba(0,0,0,.04);transform:rotate(-1.5deg);transition:transform .5s var(--ease)}
.pad:hover{transform:rotate(0)}
.pad.holding{transform:rotate(0) scale(.99)}
.pad__svg{width:100%;height:100%;overflow:visible}
.pad__lines line{stroke:rgba(90,140,180,.35);stroke-width:1}
.pad__guide{fill:none;stroke:#B9AB9C;stroke-width:16;stroke-linecap:round;stroke-dasharray:.1 28;opacity:.9}
.pad__guide--dot{stroke-width:0;fill:none;stroke:#B9AB9C;stroke-dasharray:none;stroke-width:2.5}
.pad__ink{fill:none;stroke:var(--accent);stroke-width:16;stroke-linecap:round;stroke-dasharray:1 1.2;opacity:clamp(0,var(--p,0)*40,1);stroke-dashoffset:calc(1 - var(--p,0))}
.pad__dot{fill:var(--accent);opacity:clamp(0,(var(--p,0) - .9)*10,1);transform-origin:160px 216px;transform:scale(clamp(0,(var(--p,0) - .9)*10,1))}
.pad__pen circle{fill:var(--ink);stroke:#fff;stroke-width:3}
.pad__pen{transition:opacity .4s var(--ease)}
.pad.done .pad__pen{opacity:0}
.pad__meter{position:absolute;inset-inline:22px;bottom:22px;height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.pad__meter span{display:block;height:100%;width:100%;background:var(--accent);transform-origin:right;transform:scaleX(var(--p,0))}
.pad__hint{position:absolute;inset-inline:0;bottom:30px;margin:0;text-align:center;font-size:.85rem;color:var(--ink-3);transform:translateY(-6px)}
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(48px,6vw,80px)}
.area{position:relative;padding:26px 24px;border-radius:var(--r);border:1px solid rgba(243,236,227,.14);background:rgba(243,236,227,.03);opacity:.4;transition:opacity .7s var(--ease),border-color .7s var(--ease),background-color .7s var(--ease),transform .7s var(--ease)}
.area h3{font-size:1.45rem;margin:6px 0}
.area p{margin:0;color:var(--on-night-2);font-size:.98rem}
.area__n{color:var(--accent-muted);font-size:.9rem}
.area.lit{opacity:1;border-color:rgba(233,185,175,.45);background:rgba(243,236,227,.06)}
.area.lit::before{content:"";position:absolute;top:-1px;inset-inline-start:24px;width:46px;height:2px;background:var(--accent)}

/* ---------- collection shelf ---------- */
.shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,32px) clamp(16px,2vw,28px)}
.book{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:14px;cursor:pointer;border-radius:var(--r)}
.book__cover{position:relative;aspect-ratio:900/1274;border-radius:3px 6px 6px 3px;overflow:hidden;box-shadow:var(--shadow-book);transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.book__cover::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0) 88%,rgba(255,255,255,.28) 94%,rgba(0,0,0,.08) 100%)}
.book__cover img{width:100%;height:100%;object-fit:cover}
.book:hover .book__cover,.book:focus-visible .book__cover{transform:translateY(-8px) rotate(-1.2deg);box-shadow:0 34px 50px -26px rgba(27,23,22,.6)}
.book__tag{font-size:.82rem;font-weight:600;color:var(--accent)}
.book__title{font-family:var(--f-display);font-size:1.18rem;line-height:1.35;font-weight:700}
.book__title[lang="fr"]{font-family:Georgia,serif;font-size:1.06rem;font-weight:400}
.shelf .book.reveal:nth-child(4n+2){transition-delay:.08s}
.shelf .book.reveal:nth-child(4n+3){transition-delay:.16s}
.shelf .book.reveal:nth-child(4n+4){transition-delay:.24s}
.shelf .book.reveal.settled:nth-child(n){transition-delay:0s}

/* ---------- how ---------- */
.how{background:var(--paper-2)}
.how__img{margin:0 0 clamp(36px,5vw,56px);border-radius:var(--r-lg);overflow:hidden;aspect-ratio:21/8;box-shadow:0 30px 60px -36px rgba(27,23,22,.5)}
.how__img img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.how__track{position:relative}
.how__line{position:absolute;top:30px;inset-inline:8%;width:84%;height:20px}
.how__line path{stroke-dasharray:1;stroke-width:1.5;stroke:var(--line-strong)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative}
.step{text-align:center;padding:0 10px}
.step__n{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 18px;border-radius:50%;background:var(--panel);border:1.5px solid var(--accent);color:var(--accent);font-family:var(--f-display);font-size:1.7rem;font-weight:700;position:relative}
.step h3{font-size:1.45rem;margin-bottom:6px}
.step p{margin:0 auto;color:var(--ink-2);max-width:28ch}
.steps .step.reveal:nth-child(2){transition-delay:.12s}
.steps .step.reveal:nth-child(3){transition-delay:.24s}

/* ---------- packs ---------- */
.packs__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.pack{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px 26px;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease),opacity .9s var(--ease-out)}
.pack:hover{transform:translateY(-6px);box-shadow:0 34px 60px -38px rgba(27,23,22,.55)}
.pack--best{background:var(--night);color:var(--on-night);border-color:var(--night);box-shadow:0 40px 70px -40px rgba(27,23,22,.75)}
.pack__badge{position:absolute;top:-13px;inset-inline-start:26px;background:var(--accent);color:#fff;font-size:.82rem;font-weight:600;padding:4px 14px;border-radius:999px}
.pack__fan{position:relative;height:150px;margin:6px 0 22px}
.pack__fan img{position:absolute;bottom:0;width:86px;border-radius:2px 4px 4px 2px;box-shadow:var(--shadow-book);transition:transform .55s var(--ease)}
.pack__name{font-family:Georgia,serif;font-size:1.5rem;font-weight:400}
.pack__count{font-size:.95rem;color:var(--ink-2);margin:2px 0 14px}
.pack--best .pack__count{color:var(--on-night-2)}
.pack__price{display:flex;align-items:baseline;gap:8px;margin-bottom:18px}
.pack__price b{font-family:var(--f-mono);font-size:2.8rem;font-weight:500;line-height:1}
.pack__price span{font-weight:600}
.pack__list{list-style:none;margin:0 0 24px;padding:0;display:grid;align-content:start;gap:9px;font-size:.96rem;flex:1}
.pack__list li{display:flex;gap:10px;align-items:baseline}
.pack__list li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);transform:translateY(-2px)}
.pack--best .pack__list li::before{background:var(--accent-muted)}
.pack .btn{width:100%}
.pack--best .btn--ghost{color:var(--on-night);border-color:rgba(243,236,227,.4)}
.packs__note{text-align:center;color:var(--ink-3);font-size:.92rem;margin-top:26px}
.packs__grid .pack.reveal:nth-child(2){transition-delay:.1s}
.packs__grid .pack.reveal:nth-child(3){transition-delay:.2s}
.packs__grid .pack.reveal.settled:nth-child(n){transition-delay:0s}

/* ---------- order ---------- */
.order__grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start}
.form,.summary{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg)}
.form{padding:clamp(22px,3vw,36px)}
.form fieldset{border:0;margin:0 0 28px;padding:0;min-width:0}
.legend{display:flex;align-items:center;gap:12px;font-family:var(--f-display);font-weight:700;font-size:1.45rem;margin-bottom:16px;padding:0}
.legend .mono{font-size:.85rem;color:var(--accent);border:1px solid var(--accent-muted);border-radius:999px;padding:2px 10px}
.packpick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pp{position:relative;display:block;padding:16px;border:1.5px solid var(--line);border-radius:var(--r);cursor:pointer;background:#fff;transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.pp:hover{border-color:var(--line-strong)}
.pp input{position:absolute;opacity:0;pointer-events:none}
.pp b{display:block;font-family:Georgia,serif;font-weight:400;font-size:1.1rem}
.pp span{font-size:.9rem;color:var(--ink-2)}
.pp .pp__price{display:block;font-variant-numeric:tabular-nums;font-weight:600;font-size:1.15rem;color:var(--ink);margin-top:6px}
.pp:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 3px rgba(184,70,58,.14)}
.pp:has(input:focus-visible){outline:2.5px solid var(--accent);outline-offset:2px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1/-1}
.field label,.field .label{font-weight:600;font-size:.95rem}
.opt{font-weight:400;color:var(--ink-3)}
.field input,.field textarea{font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1.5px solid var(--line-strong);border-radius:12px;padding:12px 14px;min-height:50px;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.field textarea{resize:vertical;min-height:84px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(184,70,58,.14)}
.field input[dir="ltr"]{text-align:right}
.field.bad input{border-color:#B3261E}
.err{margin:0;min-height:1.2em;font-size:.86rem;color:#B3261E}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line-strong);border-radius:12px;background:#fff;width:max-content;overflow:hidden}
.qty button{width:50px;height:48px;border:0;background:none;font-size:1.3rem;cursor:pointer;transition:background-color .25s var(--ease)}
.qty button:hover{background:var(--paper-2)}
.qty output{min-width:44px;text-align:center;font-family:var(--f-mono);font-size:1.1rem}
.pay{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.pay label{display:flex;align-items:center;gap:10px;padding:12px 16px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;transition:border-color .3s var(--ease)}
.pay label:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 3px rgba(184,70,58,.12)}
.pay input{accent-color:var(--accent);width:18px;height:18px}
.form__trust{text-align:center;color:var(--ink-3);font-size:.9rem;margin:14px 0 0}
.summary{position:sticky;top:110px;padding:26px;overflow:hidden}
.summary__label{color:var(--accent);font-size:.85rem;margin:0 0 12px}
.summary__covers{position:relative;height:120px;margin-bottom:16px}
.summary__covers img{position:absolute;bottom:0;width:70px;border-radius:2px 4px 4px 2px;box-shadow:var(--shadow-book);transition:transform .5s var(--ease),opacity .5s var(--ease)}
.summary__pack{font-family:Georgia,serif;font-weight:400;font-size:1.5rem}
.summary__count{margin:2px 0 14px;color:var(--ink-2)}
.summary__rows{margin:0;border-top:1px dashed var(--line-strong)}
.summary__rows>div{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px dashed var(--line)}
.summary__rows dt{color:var(--ink-2)}
.summary__rows dd{margin:0;font-variant-numeric:tabular-nums;font-weight:500}
.summary__rows .total dt{font-weight:600;color:var(--ink)}
.summary__rows .total dd{font-size:1.45rem;font-weight:700;color:var(--accent)}
.summary__fine{font-size:.85rem;color:var(--ink-3);margin:14px 0 0}

/* ---------- about ---------- */
.about{background:var(--night);color:var(--on-night)}
.about__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:center}
.about__media{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.about__media img{width:100%;height:100%;object-fit:cover;object-position:30% center}
.about__badge{position:absolute;bottom:18px;inset-inline-end:18px;display:flex;align-items:baseline;gap:12px;background:rgba(251,247,241,.94);color:var(--ink);padding:14px 18px;border-radius:var(--r)}
.about__badge b{font-size:2.4rem;font-weight:500;color:var(--accent);line-height:1}
.about__badge span{font-size:.9rem;line-height:1.4}
.about__copy p{color:var(--on-night-2)}
.about__copy .h2{margin-bottom:18px}
.quote{position:relative;margin:30px 0 0;padding:28px 0 0;border-top:1px solid rgba(243,236,227,.16)}
.quote p{font-family:var(--f-display);font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);line-height:1.5;color:var(--on-night);margin:0}
.quote cite{display:block;margin-top:10px;font-style:normal;color:var(--accent-muted);font-size:.95rem}
.rays--quote{width:120px;margin-bottom:12px}
.rays--quote path{stroke:var(--accent-muted)}

/* ---------- faq ---------- */
.faq__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,90px);align-items:start}
.faq__head{position:sticky;top:120px}
.faq__head .btn{margin-top:26px}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 0;cursor:pointer;font-family:var(--f-display);font-weight:700;font-size:1.32rem}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line-strong);background:linear-gradient(var(--ink),var(--ink)) center/12px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 12px no-repeat;transition:transform .4s var(--ease),border-color .4s var(--ease)}
.qa[open] summary::after{transform:rotate(45deg);border-color:var(--accent)}
.qa__a{overflow:hidden}
.qa__a p{margin:0 0 22px;color:var(--ink-2);max-width:62ch}

/* ---------- final ---------- */
.final{padding:clamp(90px,11vw,150px) 0;text-align:center;background:radial-gradient(70% 60% at 50% 100%,rgba(200,146,63,.16),transparent 70%),var(--paper-2);overflow:hidden}
.final__in{display:flex;flex-direction:column;align-items:center}
.final__fan{position:relative;width:min(520px,100%);height:210px;margin-bottom:34px}
.final__fan img{position:absolute;bottom:0;left:50%;width:120px;border-radius:2px 5px 5px 2px;box-shadow:var(--shadow-book);transform-origin:50% 140%;transition:transform 1.1s var(--ease-out)}
.final__fan img:nth-child(1){transform:translateX(-50%) rotate(0)}
.final__fan img:nth-child(2){transform:translateX(-50%) rotate(0)}
.final__fan img:nth-child(3){transform:translateX(-50%) rotate(0)}
.final__fan img:nth-child(4){transform:translateX(-50%) rotate(0)}
.final__fan img:nth-child(5){transform:translateX(-50%) rotate(0)}
.final__fan.in img:nth-child(1){transform:translateX(-50%) rotate(-26deg)}
.final__fan.in img:nth-child(2){transform:translateX(-50%) rotate(-13deg)}
.final__fan.in img:nth-child(3){transform:translateX(-50%) rotate(0)}
.final__fan.in img:nth-child(4){transform:translateX(-50%) rotate(13deg)}
.final__fan.in img:nth-child(5){transform:translateX(-50%) rotate(26deg)}
.final .h2{max-width:20ch}
.final__ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:30px}

/* ---------- footer ---------- */
.footer{background:var(--night);color:var(--on-night-2);padding:70px 0 0;font-size:.96rem}
.footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:36px}
.footer__brand img{width:150px;height:auto;background:var(--panel);border-radius:12px;padding:10px 14px;mix-blend-mode:normal}
.footer h4{font-family:var(--f-display);font-size:1.2rem;color:var(--on-night);margin:0 0 14px}
.footer a{display:block;text-decoration:none;padding:4px 0;transition:color .3s var(--ease)}
.footer a:hover{color:#fff}
.footer p{margin:0 0 8px}
.footer .btn{display:inline-flex;margin-top:8px;color:#fff}
.footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(243,236,227,.12);margin-top:50px;padding:22px 0 30px;font-size:.88rem}

/* ---------- sticky mobile CTA ---------- */
.sticky{position:fixed;inset-inline:12px;bottom:12px;z-index:40;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 10px;padding-inline-start:18px;background:rgba(27,23,22,.94);color:#fff;border-radius:999px;box-shadow:0 18px 40px -16px rgba(0,0,0,.6);transform:translateY(140%);transition:transform .5s var(--ease)}
.sticky.show{transform:none}
.sticky small{display:block;font-size:.78rem;color:var(--on-night-2);line-height:1.2}
.sticky b{font-weight:600}

/* ---------- modals ---------- */
.modal{border:0;padding:0;border-radius:var(--r-lg);background:var(--panel);color:var(--ink);width:min(820px,calc(100% - 32px));max-height:calc(100svh - 32px);box-shadow:0 50px 100px -40px rgba(0,0,0,.6)}
.modal::backdrop{background:rgba(25,21,20,.6);backdrop-filter:blur(4px)}
.modal[open]{animation:modalIn .45s var(--ease-out)}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.98)}}
.modal__x{position:absolute;top:12px;inset-inline-end:12px;width:44px;height:44px;border-radius:50%;border:0;background:var(--paper-2);font-size:1.5rem;cursor:pointer;z-index:2}
.modal__grid{display:grid;grid-template-columns:260px 1fr;gap:32px;padding:34px;align-items:center}
.modal__grid img{border-radius:3px 6px 6px 3px;box-shadow:var(--shadow-book)}
.tag{display:inline-block;font-size:.85rem;font-weight:600;color:var(--accent);margin-bottom:8px}
#mTitle{font-size:1.7rem;margin-bottom:10px}
#mTitle[lang="fr"]{font-family:Georgia,serif;font-weight:400}
#mDesc{color:var(--ink-2);margin:0 0 12px}
.modal__in{font-size:.92rem;color:var(--ink-3);margin:0 0 20px}
.modal--review{width:min(560px,calc(100% - 32px))}
#reviewBody{padding:34px}
#reviewBody h3{font-size:1.7rem;margin-bottom:6px}
.rv{margin:18px 0;border-top:1px dashed var(--line-strong)}
.rv>div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px dashed var(--line)}
.rv dt{color:var(--ink-2)}
.rv dd{margin:0;text-align:left;font-weight:500}
.rv .total dd{font-weight:700;font-size:1.3rem;color:var(--accent)}
.rv__actions{display:grid;gap:10px}
.rv__note{font-size:.88rem;color:var(--ink-3);margin:10px 0 0;text-align:center}
.wa-ic{width:20px;height:20px;fill:currentColor}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .shelf{grid-template-columns:repeat(4,1fr)}
  .order__grid{grid-template-columns:1fr}
  .summary{position:relative;top:0;order:-1}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav{position:fixed;inset:84px 12px auto 12px;flex-direction:column;gap:2px;padding:12px;background:var(--panel);border-radius:var(--r-lg);box-shadow:0 30px 60px -30px rgba(0,0,0,.45);opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
  .nav.open{opacity:1;transform:none;pointer-events:auto}
  .nav a,.header.solid .nav a{color:var(--ink);text-shadow:none;padding:12px 16px}
  .nav__cta{display:block;background:var(--accent);color:#fff!important;text-align:center;margin-top:6px}
  .header__cta{display:none}
  .burger{display:block;margin-inline-start:auto}
  .header.solid .burger{background:transparent}
  .worries__grid,.trace__grid,.about__grid,.faq__grid{grid-template-columns:1fr}
  .worries__head,.faq__head{position:static}
  .areas{grid-template-columns:1fr 1fr}
  .shelf{grid-template-columns:repeat(3,1fr)}
  .packs__grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .pack--best{order:-1}
  .proof__grid{grid-template-columns:1fr 1fr}
  .proof__item:nth-child(3){border-inline-start:0}
  .proof__item:nth-child(n+3){border-top:1px solid var(--line)}
  .sticky{display:flex}
  .trace__grid .pad{max-width:440px;width:100%;margin-inline:auto}
}
@media (max-width:640px){
  body{font-size:16px}
  .header__in{height:72px}
  .brand img{height:44px}
  .nav{inset:72px 12px auto 12px}
  .worry{grid-template-columns:72px 1fr;gap:16px;padding:18px}
  .worry img{width:72px}
  .worry h3{font-size:1.22rem}
  .areas{grid-template-columns:1fr}
  .shelf{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr;gap:34px}
  .how__line{display:none}
  .how__img{aspect-ratio:16/10}
  .packpick{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .modal__grid{grid-template-columns:1fr;padding:26px 22px;gap:18px}
  .modal__grid img{width:150px;margin-inline:auto}
  .footer__grid{grid-template-columns:1fr}
  .proof__item{padding:22px 14px;gap:10px}
  .proof__item b{font-size:1.8rem}
  .proof__item .proof__ar{font-size:1.35rem}
  .final__fan{height:160px}
  .final__fan img{width:90px}
  .footer{padding-bottom:80px}
}

/* ---------- reduced motion: final states, everything still ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .rays path,.how__line path{stroke-dashoffset:0}
  .area{opacity:1}
  .final__fan img:nth-child(1){transform:translateX(-50%) rotate(-26deg)}
  .final__fan img:nth-child(2){transform:translateX(-50%) rotate(-13deg)}
  .final__fan img:nth-child(4){transform:translateX(-50%) rotate(13deg)}
  .final__fan img:nth-child(5){transform:translateX(-50%) rotate(26deg)}
}

/* ---------- Order system additions ---------- */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;line-height:1.6;margin:.4rem 0 .2rem;cursor:pointer}
.check input{width:20px;height:20px;margin-top:.25rem;accent-color:var(--accent,#B8463A);flex:none}
.check a{color:var(--accent,#B8463A);text-decoration:underline}
.check.bad span{color:var(--accent-hover,#9E3A2F)}
.rv__note--err{color:var(--accent-hover,#9E3A2F)!important;font-weight:600}
.consent{position:fixed;inset:auto 12px 12px 12px;z-index:90;max-width:640px;margin-inline:auto;background:var(--night,#191514);color:#fff;border-radius:16px;padding:14px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:.9rem;line-height:1.6}
.consent p{margin:0;flex:1 1 280px}
.consent a{color:#E9B9AF;text-decoration:underline}
.consent__btns{display:flex;gap:8px}
.consent .btn--ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.footer__bottom a{color:inherit;text-decoration:underline}