/* CB Production · V18.6 · Aventure obligatoire · parchemin authentique + flèches */
:root{
  --story-ink:#2a1b12;
  --story-ink-soft:#60452f;
  --story-navy:#2b1b12;
  --story-navy-2:#1b3853;
  --story-gold:#b78234;
  --story-gold-soft:#dfbd75;
  --story-paper:#dfbf83;
  --story-paper-light:#f3dfb2;
  --story-line:rgba(73,43,22,.24);
}

body.cb-onboarding-open{overflow:hidden!important}
.cb-onboarding[hidden]{display:none!important}
.cb-onboarding{
  position:fixed;
  inset:0;
  z-index:2147483000;
  width:100vw;
  height:100dvh;
  overflow:hidden;
  color:var(--story-ink);
  background:#d4ad6f;
  font-family:Arial,Helvetica,sans-serif;
  isolation:isolate;
}
.cb-onboarding::after{
  content:"";
  position:absolute;
  inset:12px;
  z-index:20;
  pointer-events:none;
  border:1px solid rgba(77,43,18,.38);
  box-shadow:
    inset 0 0 0 3px rgba(255,235,190,.18),
    inset 0 0 75px rgba(67,35,14,.22),
    0 0 0 1px rgba(255,246,218,.25);
}

.cb-story-parchment{
  position:absolute;
  inset:0;
  z-index:-5;
  background:
    linear-gradient(rgba(237,211,160,.16),rgba(156,102,48,.07)),
    url('/cb-parchment.webp') center/cover no-repeat;
  transform:scale(1.015);
}
.cb-story-parchment::before,
.cb-story-parchment::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.cb-story-parchment::before{
  inset:0;
  background:
    radial-gradient(ellipse at 50% 22%,rgba(255,247,213,.55),transparent 46%),
    linear-gradient(90deg,rgba(86,46,17,.12),transparent 7% 93%,rgba(86,46,17,.12));
  mix-blend-mode:soft-light;
}
.cb-story-parchment::after{
  left:50%;top:0;bottom:0;width:2px;
  background:linear-gradient(to bottom,transparent,rgba(85,49,24,.12) 15% 85%,transparent);
  box-shadow:4px 0 8px rgba(255,242,205,.08),-3px 0 8px rgba(75,39,18,.05);
  opacity:.48;
}
.cb-story-vignette{
  position:absolute;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 48% 48%,transparent 45%,rgba(74,38,14,.08) 72%,rgba(55,27,10,.20) 100%),
    linear-gradient(to bottom,rgba(255,244,207,.18),transparent 28% 72%,rgba(80,42,15,.10));
  transition:background .5s ease;
}
.cb-onboarding[data-scene="4"] .cb-story-vignette,
.cb-onboarding[data-scene="5"] .cb-story-vignette{
  background:
    radial-gradient(ellipse at 52% 42%,rgba(255,238,187,.25),transparent 44%),
    radial-gradient(ellipse at 50% 52%,transparent 38%,rgba(16,35,58,.08) 77%,rgba(16,35,58,.20) 100%),
    linear-gradient(to bottom,rgba(255,243,204,.16),transparent 70%,rgba(16,35,58,.11));
}

.cb-story-dusts{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.cb-story-dust{
  position:absolute;
  width:3px;height:3px;border-radius:50%;
  background:#bd8433;
  box-shadow:0 0 11px rgba(189,132,51,.36);
  opacity:.32;
  animation:cbDust var(--speed) ease-in-out var(--delay) infinite alternate;
}
@keyframes cbDust{to{transform:translate3d(8px,-17px,0);opacity:.68}}
.cb-story-ink{position:absolute;inset:0;z-index:1;pointer-events:none;color:rgba(87,54,27,.24);font-family:Georgia,serif}
.cb-story-ink span{position:absolute;font-size:22px;animation:cbInkFloat 8s ease-in-out infinite alternate}
.cb-story-ink span:nth-child(1){left:8%;top:34%;transform:rotate(-12deg)}
.cb-story-ink span:nth-child(2){right:8%;top:58%;font-size:28px;animation-delay:-2s}
.cb-story-ink span:nth-child(3){left:17%;bottom:14%;animation-delay:-4s}
.cb-story-ink span:nth-child(4){right:18%;top:20%;font-size:31px;opacity:.16;animation-delay:-6s}
@keyframes cbInkFloat{to{transform:translateY(-8px) rotate(3deg)}}

.cb-story-topbar{
  position:absolute;
  top:28px;
  left:clamp(28px,4vw,66px);
  right:clamp(28px,4vw,66px);
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.cb-story-brand{display:flex;align-items:center;gap:15px;min-width:0}
.cb-story-brand img{
  width:78px;height:48px;object-fit:contain;display:block;
  filter:brightness(0) saturate(100%) invert(12%) sepia(24%) saturate(1117%) hue-rotate(170deg) brightness(88%);
}
.cb-story-brand span,.cb-story-ritual{
  color:rgba(42,27,18,.62);
  font-size:10px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.cb-story-ritual{white-space:nowrap}

.cb-story-stage{
  position:relative;
  z-index:5;
  width:100%;
  height:100dvh;
  display:grid;
  place-items:center;
  padding:92px 26px 122px;
  overflow:hidden;
  perspective:1100px;
}
.cb-story-sheet{
  position:relative;
  width:min(1040px,calc(100vw - 64px));
  max-height:calc(100dvh - 206px);
  overflow:auto;
  scrollbar-width:none;
  padding:clamp(22px,3.5vw,48px) clamp(22px,5vw,70px);
  background:linear-gradient(135deg,rgba(255,242,207,.58),rgba(239,209,153,.35));
  border:1px solid rgba(85,49,23,.20);
  box-shadow:
    0 30px 90px rgba(72,38,14,.13),
    inset 0 0 52px rgba(98,55,23,.055),
    inset 0 1px rgba(255,250,230,.75);
  clip-path:polygon(.5% 1.2%,8% .4%,17% 1%,28% .3%,39% .9%,50% .2%,62% .8%,74% .3%,87% 1%,99.4% .5%,99.7% 12%,99.2% 25%,99.7% 39%,99.3% 55%,99.8% 70%,99.3% 86%,99.6% 99%,88% 99.5%,74% 99.1%,61% 99.7%,48% 99.1%,34% 99.6%,21% 99%,9% 99.7%,.4% 99.2%,.8% 84%,.3% 68%,.7% 51%,.2% 36%,.7% 20%);
}
.cb-story-sheet::-webkit-scrollbar{display:none}
.cb-story-sheet::before{
  content:"";
  position:absolute;
  inset:12px;
  pointer-events:none;
  border:1px solid rgba(114,70,30,.14);
  box-shadow:inset 0 0 28px rgba(77,41,17,.04);
}
.cb-story-scene{
  position:relative;
  z-index:1;
  width:min(880px,100%);
  margin:auto;
  text-align:center;
  transform-origin:center;
  transition:opacity .23s ease,transform .38s cubic-bezier(.22,.75,.22,1);
}
.cb-story-scene.is-leaving-forward{opacity:0;transform:translateX(-42px) rotateY(4deg)}
.cb-story-scene.is-entering-forward{opacity:0;transform:translateX(42px) rotateY(-4deg)}
.cb-story-scene.is-leaving-backward{opacity:0;transform:translateX(42px) rotateY(-4deg)}
.cb-story-scene.is-entering-backward{opacity:0;transform:translateX(-42px) rotateY(4deg)}

.cb-story-chapter{
  display:inline-flex;
  align-items:center;
  gap:11px;
  margin-bottom:16px;
  color:#77502d;
  font-size:11px;
  line-height:1;
  font-weight:900;
  letter-spacing:.20em;
  text-transform:uppercase;
}
.cb-story-chapter::before,.cb-story-chapter::after{content:"";width:34px;height:1px;background:currentColor;opacity:.38}
.cb-story-title{
  max-width:820px;
  margin:0 auto 18px;
  color:var(--story-ink);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(44px,5.4vw,76px);
  line-height:.98;
  font-weight:500;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.cb-story-title strong{color:#875a28;font-weight:600}
.cb-story-copy{
  max-width:700px;
  margin:0 auto;
  color:rgba(42,27,18,.76);
  font-size:clamp(16px,1.35vw,20px);
  line-height:1.55;
  text-wrap:balance;
}

.cb-story-dialogue{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  max-width:860px;
  margin:28px auto 0;
  text-align:left;
}
.cb-story-bubble{
  position:relative;
  min-height:150px;
  padding:22px 24px;
  background:rgba(255,244,215,.58);
  border:1px solid rgba(93,55,25,.19);
  box-shadow:0 16px 44px rgba(76,39,14,.08),inset 0 0 32px rgba(101,57,22,.035);
}
.cb-story-bubble:nth-child(2){margin-top:28px}
.cb-story-speaker{display:flex;align-items:center;gap:10px;margin-bottom:13px;color:#714921;font-size:10px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.cb-story-speaker i{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:var(--story-navy);color:#f9e9bd;font-style:normal}
.cb-story-bubble:nth-child(2) .cb-story-speaker i{background:var(--story-gold);color:#172337}
.cb-story-bubble p{margin:0;color:#38271b;font-family:Georgia,"Times New Roman",serif;font-size:clamp(17px,1.5vw,22px);line-height:1.42}

.cb-story-manifesto{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  max-width:860px;
  margin:26px auto 0;
  text-align:left;
}
.cb-story-manifesto article{
  position:relative;
  min-height:142px;
  padding:20px 19px 18px;
  background:rgba(255,242,209,.52);
  border:1px solid rgba(94,55,25,.18);
  border-top:2px solid var(--story-gold);
  box-shadow:0 15px 38px rgba(73,39,16,.07);
}
.cb-story-manifesto article::after{content:"✦";position:absolute;right:14px;top:11px;color:rgba(146,94,36,.38)}
.cb-story-manifesto b{display:block;margin-bottom:8px;color:#65411f;font-family:Georgia,"Times New Roman",serif;font-size:20px;line-height:1.04}
.cb-story-manifesto p{margin:0;color:rgba(49,32,21,.72);font-size:13px;line-height:1.48}

.cb-story-seal{
  width:94px;height:94px;
  display:grid;place-items:center;
  margin:0 auto 18px;
  border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#274865,#2b1b12 68%);
  border:7px double rgba(211,166,86,.78);
  box-shadow:0 14px 35px rgba(25,34,49,.20),0 0 0 7px rgba(183,130,52,.10);
  transform:rotate(-3deg);
}
.cb-story-seal img{width:64px;height:41px;object-fit:contain}
.cb-onboarding[data-scene="5"] .cb-story-title strong{color:#9a672b}

.cb-story-controls{
  position:absolute;
  left:50%;
  bottom:24px;
  z-index:12;
  width:min(740px,calc(100vw - 44px));
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:20px;
}
.cb-story-control-center{display:grid;justify-items:center;gap:9px;min-width:0}
.cb-story-progress{display:flex;align-items:center;gap:8px}
.cb-story-progress span{display:block;width:32px;height:3px;border-radius:99px;background:rgba(66,40,22,.17);overflow:hidden}
.cb-story-progress span::after{content:"";display:block;width:0;height:100%;background:linear-gradient(90deg,var(--story-navy-2),var(--story-gold));transition:width .28s ease}
.cb-story-progress span.done::after,.cb-story-progress span.active::after{width:100%}
.cb-story-hint{color:rgba(53,34,22,.53);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-align:center}
.cb-story-arrow{
  appearance:none;
  border:1px solid rgba(34,45,59,.16);
  background:var(--story-navy);
  color:#fff1cb;
  min-height:54px;
  border-radius:999px;
  box-shadow:0 13px 34px rgba(16,35,58,.20),inset 0 1px rgba(255,255,255,.09);
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,opacity .18s ease;
}
.cb-story-arrow:hover{transform:translateY(-2px);background:var(--story-navy-2)}
.cb-story-arrow:disabled{opacity:.28;cursor:default;transform:none}
.cb-story-prev{width:54px;font-size:21px}
.cb-story-next{min-width:164px;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 20px}
.cb-story-next span{order:2;font-size:19px}.cb-story-next b{order:1;font-size:11px;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.cb-story-next.is-final{min-width:232px;background:linear-gradient(110deg,#9f6d2c,#d8ad5e);color:#2b1b12;border-color:transparent}

/* Tutoriel du dashboard */
.cb-tour{position:fixed;inset:0;z-index:2147483001;pointer-events:none}
.cb-tour[hidden]{display:none!important}
.cb-tour-highlight{position:fixed;border:2px solid #d6a252;border-radius:18px;box-shadow:0 0 0 9999px rgba(5,11,26,.72),0 0 0 7px rgba(214,162,82,.14),0 25px 70px rgba(0,0,0,.34);transition:top .35s ease,left .35s ease,width .35s ease,height .35s ease,border-radius .2s ease;pointer-events:none}
.cb-tour-card{position:fixed;width:min(360px,calc(100vw - 32px));padding:24px;border:1px solid rgba(131,82,32,.34);border-radius:10px;background:#f1dfb9;color:#2e2117;box-shadow:0 26px 80px rgba(0,0,0,.30),inset 0 0 45px rgba(106,61,24,.05);pointer-events:auto;transition:top .35s ease,left .35s ease}
.cb-tour-step{color:#8e5d28;font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.cb-tour-card h3{margin:9px 0;font-family:Georgia,"Times New Roman",serif;font-size:27px;line-height:1.05;font-weight:600}
.cb-tour-card p{margin:0;color:#5a493a;font-size:15px;line-height:1.55}
.cb-tour-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:22px}
.cb-tour-next{appearance:none;border:0;border-radius:6px;background:#2b1b12;color:#fff1cb;padding:15px 22px;font:900 12px/1 Arial;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.cb-tour-counter{margin-right:auto;color:#795326;font-size:11px;font-weight:800}
.cb-onboarding-replay{width:100%;min-height:50px;margin-top:10px;border:1px solid rgba(16,35,58,.18);border-radius:10px;background:#f1dfb9;color:#2e2117;padding:15px 17px;font:800 13px/1.2 Arial,Helvetica,sans-serif;cursor:pointer}
.cb-onboarding-replay:hover{border-color:#a9742f;background:#f8e8c6}

@media(max-height:780px) and (min-width:761px){
  .cb-story-stage{padding-top:82px;padding-bottom:108px}
  .cb-story-sheet{max-height:calc(100dvh - 178px);padding-top:23px;padding-bottom:23px}
  .cb-story-title{font-size:clamp(39px,4.7vw,58px);margin-bottom:12px}
  .cb-story-copy{font-size:15px;line-height:1.45}
  .cb-story-dialogue{margin-top:18px}.cb-story-bubble{min-height:120px;padding:17px 19px}.cb-story-bubble:nth-child(2){margin-top:18px}.cb-story-bubble p{font-size:17px}
  .cb-story-manifesto{margin-top:18px}.cb-story-manifesto article{min-height:116px;padding:15px}.cb-story-manifesto b{font-size:17px}.cb-story-manifesto p{font-size:12px}
  .cb-story-seal{width:76px;height:76px;margin-bottom:12px}.cb-story-seal img{width:51px}
  .cb-story-controls{bottom:14px}
}

@media(max-width:760px){
  .cb-onboarding::after{inset:7px}
  .cb-story-topbar{top:16px;left:17px;right:17px}
  .cb-story-brand img{width:58px;height:38px}.cb-story-brand span{display:none}.cb-story-ritual{font-size:8px;letter-spacing:.11em}
  .cb-story-stage{height:100dvh;align-items:start;padding:72px 12px 100px;overflow:auto}
  .cb-story-sheet{width:100%;max-height:none;min-height:calc(100dvh - 180px);padding:28px 17px 30px;clip-path:none;border-radius:2px}
  .cb-story-title{font-size:clamp(36px,11.4vw,52px);line-height:1.01}
  .cb-story-copy{font-size:15px;line-height:1.48}
  .cb-story-dialogue{grid-template-columns:1fr;gap:10px;margin-top:20px}.cb-story-bubble,.cb-story-bubble:nth-child(2){min-height:0;margin-top:0;padding:17px}.cb-story-bubble p{font-size:17px}
  .cb-story-manifesto{grid-template-columns:1fr;gap:8px;margin-top:20px}.cb-story-manifesto article{min-height:0;padding:14px 16px}.cb-story-manifesto b{font-size:17px;margin-bottom:4px}
  .cb-story-controls{bottom:13px;width:calc(100vw - 28px);gap:10px}.cb-story-prev{width:46px;min-height:46px}.cb-story-next{min-height:46px;min-width:112px;padding:0 13px}.cb-story-next b{font-size:9px}.cb-story-next.is-final{min-width:180px}.cb-story-progress span{width:18px}.cb-story-hint{display:none}
  .cb-story-ink span:nth-child(3),.cb-story-ink span:nth-child(4){display:none}
  .cb-tour-card{padding:20px}.cb-tour-card h3{font-size:23px}
}

@media(prefers-reduced-motion:reduce){
  .cb-story-dust,.cb-story-ink span,.cb-story-scene,.cb-tour-highlight,.cb-tour-card{animation:none!important;transition:none!important}
}