/* =====================================================================
   NOYAU COMMUN — « Apple design » — identique pour les 6 boutons
   • Réponse : le bouton s'enfonce dès l'appui (pointerdown), pas au relâchement ; annulable en glissant hors du bouton.
   • Ressorts : amortissement critique, tout part de la valeur affichée et garde sa vitesse → interruptible à tout instant.
   • Matières : pastilles en verre (backdrop-filter), liseré fin éclairé par le haut, ombre de profondeur au lieu du néon.
   • Typographie : police système (SF Pro sur Apple), approche légèrement négative, casse de phrase.
   • Retenue : ni scanlines, ni viseur, ni poussière, ni onde « Material ». La caméra suit le curseur ; rien ne se
     balance tout seul. Le clic s'épanouit depuis le point touché.
   • Un seul bouton vivant : au repos, aucune animation ; au survol, les autres boutons s'estompent (.is-dimmed).
   • Clic → la carte devient la page (.sb-page, View Transitions) — voir la fin de ce noyau.
   • Accessibilité : prefers-reduced-motion (fondus), prefers-reduced-transparency, prefers-contrast.
   • Dimensions : largeur du conteneur (max 420 px), ratio 297,5 / 57, tout en unités cqw. Le cadre découpe tout.
   Variables à définir par bouton : --accent --accent-rgb --icon --glow --glow-rgb --deep --ink --fx-x --fx-y
   Variables pilotées par le JS   : --pop --press --px --py --kick --flash --gx --gy --camx --camz --rotx --roty
   ===================================================================== */
.sb-btn-wrap{width:min(100%,420px);container-type:inline-size;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.sb-btn-wrap *{box-sizing:border-box}

.sb-btn{
  --px:0;--py:0;--pop:0;--press:0;--gx:50%;--gy:50%;--kick:0;--flash:0;--camx:0;--camz:0;--rotx:0;--roty:0;
  position:relative;display:block;aspect-ratio:297.5/57;border-radius:5.6cqw;
  color:var(--ink);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transform:scale(calc(1 + var(--pop)*.012 - var(--press)*.03));
  /* profondeur : ombre portée qui s'allonge quand le bouton se soulève + lumière émise discrète */
  box-shadow:0 calc(.6cqw + var(--pop)*1.2cqw) calc(2cqw + var(--pop)*3cqw) -.6cqw rgba(0,0,0,.7),
             0 0 calc(2.2cqw + var(--pop)*2.6cqw) rgba(var(--accent-rgb),calc(.24 + var(--pop)*.22))}
.sb-btn{transition:filter .45s cubic-bezier(.2,.8,.2,1)}
.sb-btn.is-dimmed{filter:brightness(.6) saturate(.75)}
/* au repos tout est immobile : les animations CSS ne tournent que quand le bouton est vivant */
.sb-btn:not(.is-live) *,.sb-btn:not(.is-live) *::before,.sb-btn:not(.is-live) *::after{animation:none!important}
.sb-btn:focus-visible{outline:max(2px,.6cqw) solid color-mix(in srgb,var(--accent) 75%,#fff);outline-offset:max(3px,.9cqw)}
.sb-btn__body{position:absolute;inset:0;overflow:hidden;border-radius:inherit;isolation:isolate;background:var(--deep)}

/* ---------- Scène 3D (plans à des profondeurs différentes ; la caméra ne bouge que si tu bouges) ---------- */
.sb-stage{position:absolute;inset:0;perspective:90cqw;perspective-origin:var(--fx-x) 45%;overflow:hidden;pointer-events:none}
.sb-drift{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:var(--fx-x) 50%}
.sb-scene{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:var(--fx-x) 50%;
  transform:translate3d(calc(var(--camx)*1cqw),0,calc(var(--camz)*1cqw)) rotateX(calc(var(--rotx)*1deg)) rotateY(calc(var(--roty)*1deg))}
.sb-plane{position:absolute;inset:0;pointer-events:none;transform-origin:var(--fx-x) 45%}
.sb-plane img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.sb-plane--far::before{content:"";position:absolute;inset:-10%;background:var(--bgimg) center/cover no-repeat;filter:blur(7px)}
.sb-plane--pad img{inset:auto;left:-12%;top:-12%;width:124%;height:124%}

/* ---------- Couches de lumière et de matière (créées par le JS) ---------- */
.sb-fx{position:absolute;pointer-events:none}
/* voile de lisibilité derrière l'icône et le titre (comme un « scroll edge effect ») */
.sb-fx-scrim{inset:0;z-index:4;background:linear-gradient(90deg,rgba(0,0,0,.72) 0,rgba(0,0,0,.5) 34%,rgba(0,0,0,.18) 50%,transparent 62%)}
/* reflet spéculaire doux qui suit le curseur */
.sb-fx-spot{inset:0;z-index:3;opacity:var(--pop);mix-blend-mode:screen;
  background:radial-gradient(circle 28cqw at var(--gx) var(--gy),rgba(var(--glow-rgb),.16),transparent 70%)}
.sb-fx-flash{inset:0;z-index:4;opacity:calc(var(--flash)*.22);mix-blend-mode:screen;
  background:radial-gradient(circle at var(--fx-x) var(--fx-y),rgba(255,255,255,.9),rgba(var(--glow-rgb),.5) 40%,transparent 78%)}
/* liseré : hairline teinté, plus clair en haut (la lumière accroche le bord), qui s'intensifie au survol */
.sb-fx-rim{inset:0;z-index:6;border-radius:inherit;padding:max(1px,.32cqw);
  background:linear-gradient(180deg,rgba(255,255,255,calc(.32 + var(--pop)*.28)),rgba(var(--accent-rgb),calc(.5 + var(--pop)*.5)) 40%,rgba(var(--accent-rgb),calc(.3 + var(--pop)*.5)));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* clic : la lumière s'épanouit depuis le point touché (pas d'anneaux durs) */
.sb-fx-burst{left:var(--bx,var(--fx-x));top:var(--by,var(--fx-y));width:34cqw;aspect-ratio:1;z-index:3;border-radius:50%;opacity:0;
  transform:translate(-50%,-50%) scale(.3);mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(255,255,255,.5),rgba(var(--glow-rgb),.32) 45%,transparent)}
.sb-fx-burst.is-on{animation:sbBurst .7s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes sbBurst{0%{opacity:.85;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
.sb-fx-pop{z-index:3;width:.6cqw;height:.6cqw;border-radius:50%;background:#fff;box-shadow:0 0 .9cqw .15cqw var(--glow);
  animation:sbPop .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes sbPop{from{transform:translate(0,0) scale(1);opacity:.9}to{transform:translate(var(--dx),var(--dy)) scale(.4);opacity:0}}

/* ---------- Icône, titre, flèche : même gabarit partout, rayons concentriques avec le cadre ---------- */
.sb-btn__icon{position:absolute;z-index:7;left:2.9cqw;top:50%;width:13.4cqw;height:13.4cqw;display:grid;place-items:center;
  border-radius:2.7cqw;color:var(--icon);
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  -webkit-backdrop-filter:blur(1.8cqw) saturate(180%);backdrop-filter:blur(1.8cqw) saturate(180%);
  box-shadow:inset 0 0 0 max(1px,.25cqw) rgba(255,255,255,.14),inset 0 max(1px,.25cqw) 0 rgba(255,255,255,.2),0 .8cqw 2cqw rgba(0,0,0,.35);
  transform:translateY(-50%)}
.sb-btn__icon svg{width:58%;height:58%;overflow:visible;filter:drop-shadow(0 0 .8cqw rgba(var(--glow-rgb),.45))}
.sb-btn__title{position:absolute;z-index:7;left:21.2cqw;top:50%;font-weight:600;font-size:var(--title-size,4cqw);line-height:1;white-space:nowrap;
  letter-spacing:-.012em;text-shadow:0 .15cqw .8cqw rgba(0,0,0,.6);transform:translateY(-50%)}
.sb-btn__sub{position:absolute;z-index:7;left:21.2cqw;top:50%;font-weight:500;font-size:2.55cqw;line-height:1;white-space:nowrap;
  letter-spacing:0;opacity:.72;text-shadow:0 .15cqw .8cqw rgba(0,0,0,.6);transform:translateY(calc(-50% + 3cqw))}
.sb-btn__body:has(.sb-btn__sub) .sb-btn__title{transform:translateY(calc(-50% - 1.7cqw))}
.sb-btn__arrow{position:absolute;z-index:7;right:3.4cqw;top:50%;width:12.4cqw;height:12.4cqw;display:grid;place-items:center;border-radius:50%;
  color:color-mix(in srgb,var(--arrow-ink,#fff) calc(var(--pop)*100%),#fff);
  background:color-mix(in srgb,var(--accent) calc(var(--pop)*100%),rgba(255,255,255,.1));
  -webkit-backdrop-filter:blur(1.8cqw) saturate(180%);backdrop-filter:blur(1.8cqw) saturate(180%);
  box-shadow:inset 0 0 0 max(1px,.25cqw) rgba(255,255,255,.14),inset 0 max(1px,.25cqw) 0 rgba(255,255,255,.22),
             0 .8cqw 2cqw rgba(0,0,0,.35),0 0 calc(var(--pop)*2.4cqw) rgba(var(--accent-rgb),.6);
  transform:translate(calc(var(--pop)*.6cqw),-50%)}
/* la flèche pointe vers la destination : elle avance un peu plus au survol */
.sb-btn__arrow svg{width:46%;height:46%;transform:translateX(calc(var(--pop)*.35cqw))}

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion:reduce){
  .sb-btn{transform:none;transition:transform .1s ease-out,box-shadow .25s ease,filter .25s ease}
  .sb-btn:active{transform:scale(.98)}
  .sb-btn__arrow{transition:background-color .25s ease,color .25s ease}
  .sb-btn:is(:hover,:focus-visible) .sb-btn__arrow{background:var(--accent);color:var(--arrow-ink,#fff)}
  .sb-fx-burst,.sb-fx-pop{display:none}
}
@media (prefers-reduced-transparency:reduce){
  .sb-btn__icon,.sb-btn__arrow{-webkit-backdrop-filter:none;backdrop-filter:none}
  .sb-btn__icon{background:rgb(20,20,24)}
  .sb-btn__arrow{background:color-mix(in srgb,var(--accent) calc(var(--pop)*100%),rgb(20,20,24))}
}
@media (prefers-contrast:more){
  .sb-btn__icon{background:#000;box-shadow:inset 0 0 0 2px #fff}
  .sb-btn__arrow{box-shadow:inset 0 0 0 2px #fff}
  .sb-fx-scrim{background:linear-gradient(90deg,rgba(0,0,0,.8) 0,rgba(0,0,0,.6) 45%,transparent 65%)}
}

/* ---------- Page : la carte devient la page (clic) ---------- */
html.sb-page-open{overflow:hidden}
.sb-page.sb-btn-wrap{position:fixed;inset:0;z-index:1000;width:auto;container-type:normal;color:var(--ink);
  background:radial-gradient(120% 70% at 50% 0%,rgba(var(--accent-rgb),.2),transparent 62%),var(--deep)}
.sb-page__scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sb-page__hero{padding:76px 16px 0}
.sb-page__frame.sb-btn-wrap{width:min(100%,1100px);margin:0 auto}
.sb-page__frame .sb-btn{cursor:default;pointer-events:none;transform:none}
.sb-page__frame .sb-btn__arrow{opacity:0}
.sb-page__content{max-width:720px;margin:0 auto;padding:44px 20px 96px;animation:sbRise .55s .12s cubic-bezier(.2,.8,.2,1) both}
@keyframes sbRise{from{opacity:0;transform:translateY(18px)}}
.sb-page__title{margin:0;font-size:clamp(2rem,6vw,3.25rem);font-weight:700;line-height:1.05;letter-spacing:-.022em}
.sb-page__lead{margin:.7rem 0 0;font-size:1.125rem;line-height:1.5;opacity:.72}
.sb-page__body{display:grid;gap:14px;margin-top:2.2rem}
.sb-page__card{padding:20px 22px;border-radius:18px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.sb-page__card h2{margin:0 0 .35rem;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;color:var(--icon)}
.sb-page__card p{margin:0;font-size:.98rem;line-height:1.6;opacity:.78}
.sb-page__close{position:fixed;top:16px;right:16px;z-index:2;width:44px;height:44px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;
  color:#fff;cursor:pointer;background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 6px 20px rgba(0,0,0,.35);transition:transform .1s ease-out,background-color .2s ease}
.sb-page__close:hover{background:rgba(255,255,255,.2)}
.sb-page__close:active{transform:scale(.94)}
.sb-page__close:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 75%,#fff);outline-offset:3px}
.sb-page__close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.sb-page.is-fading-in{animation:sbFade .25s ease both}
.sb-page.is-fading-out{animation:sbFade .2s ease reverse both}
@keyframes sbFade{from{opacity:0}}
/* la morphose bouton ↔ page : courbe « ressort » sans rebond */
::view-transition-group(sb-hero){animation-duration:.52s;animation-timing-function:cubic-bezier(.2,.85,.25,1)}
::view-transition-old(sb-hero),::view-transition-new(sb-hero){height:100%;animation-duration:.52s}
/* grand écran : l'en-tête porte déjà le titre — le titre texte reste pour les lecteurs d'écran, sans doublon visuel */
@media (min-width:700px){
  .sb-page__title,.sb-page__lead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .sb-page__body{margin-top:0}
}
@media (prefers-reduced-motion:reduce){.sb-page__content{animation:none}}
@media (prefers-reduced-transparency:reduce){.sb-page__close{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(30,30,34)}}
/* ===================== FIN DU NOYAU COMMUN — ci-dessous : ce qui est propre à ce bouton ===================== */

.sb-btn-wrap{--accent:#d12bff;--accent-rgb:209,43,255;--icon:#e45cff;--glow:#ff7bf0;--glow-rgb:255,123,240;--deep:#08000f;--ink:#fff7ff;--fx-x:52%;--fx-y:56%}
.sb-btn{--pulse:.5;--wind:0;--bob:0}
/* le héros peut se rapprocher de la caméra pendant son saut (--jz) */
.sb-scene{transform:translate3d(calc(var(--camx)*1cqw),calc(var(--jcy,0)*1cqw),calc((var(--camz) + var(--jz,0))*1cqw)) rotateX(calc(var(--rotx)*1deg)) rotateY(calc(var(--roty)*1deg))}
/* fond (z = -5cqw, agrandi pour garder la taille d'origine) : ciel, lune, ville, lac */
.sb-plane--far{--bgimg:url(assets/sb-bg-HD.webp);transform:translateZ(-12cqw) scale(1.1333);overflow:hidden;background:#12002a}
.sb-plane--far .sb-bg{filter:brightness(calc(1 + var(--pop)*.07 + var(--pulse)*var(--pop)*.05)) saturate(calc(1 + var(--pop)*.2))}
.sb-moon{position:absolute;inset:0;mix-blend-mode:screen;
  background:radial-gradient(circle 26cqw at 75.5% 29%,rgba(255,170,245,.85) 0,rgba(255,95,225,.4) 40%,transparent 100%);
  opacity:calc(var(--pop)*(.16 + var(--pulse)*.24) + var(--flash)*.35)}
.sb-lake{position:absolute;left:57%;right:0;top:64%;bottom:0;mix-blend-mode:screen;opacity:calc(var(--pop)*.8);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%);mask-image:linear-gradient(180deg,transparent,#000 30%)}
.sb-lake::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0 25%,rgba(255,190,248,.6) 25% 52%,transparent 52% 100%);background-size:13cqw 1.5cqw;
  -webkit-mask-image:repeating-linear-gradient(180deg,#000 0 .32cqw,transparent .32cqw 1.5cqw);mask-image:repeating-linear-gradient(180deg,#000 0 .32cqw,transparent .32cqw 1.5cqw);
  animation:sbLake 2.6s linear infinite}
@keyframes sbLake{to{background-position:13cqw 0}}
.sb-stars{position:absolute;inset:0}
.sb-stars i{position:absolute;width:.55cqw;height:.55cqw;border-radius:50%;background:#fff;box-shadow:0 0 .8cqw .1cqw #ffd0fb;opacity:.2;
  animation:sbTw var(--d) ease-in-out var(--dl) infinite alternate}
@keyframes sbTw{from{opacity:.15;transform:scale(.6)}to{opacity:calc(.35 + var(--pop)*.65);transform:scale(1.25)}}
.sb-mist{position:absolute;left:-50%;width:200%;top:55%;bottom:0;mix-blend-mode:screen;opacity:calc(.15 + var(--pop)*.55);animation:sbMist 11s ease-in-out infinite alternate;
  background:radial-gradient(28% 50% at 18% 70%,rgba(255,125,235,.35),transparent 72%),radial-gradient(24% 45% at 55% 80%,rgba(170,90,255,.4),transparent 72%),radial-gradient(22% 40% at 86% 66%,rgba(255,150,240,.3),transparent 72%)}
.sb-mist--2{top:35%;animation-duration:15s;animation-direction:alternate-reverse;opacity:calc(.05 + var(--pop)*.35)}
@keyframes sbMist{to{transform:translateX(24%)}}
/* roche (z = +7cqw) et personnage (z = +8cqw) : avancent vers toi quand la caméra entre */
.sb-plane--rocks{transform:translateZ(7cqw) scale(.9222)}
.sb-plane--rocks img{inset:auto;left:-12%;top:-12%;width:124%;height:124%}
.sb-plane--char{transform:translateZ(8cqw) scale(.9111)}
.sb-plane--front{transform:translateZ(12cqw) scale(.8824)}
.sb-char,.sb-ghost{--jx:0;--jy:0;--jr:0;--js:1;--jsx:1;--jsy:1;--jo:1;position:absolute;inset:0;transform-origin:52.1% 56.5%;   /* origine = pieds du héros */
  transform:translate(calc(var(--jx)*1cqw),calc(var(--jy)*1cqw + var(--pop)*-.5cqw + var(--bob)*1cqw)) rotate(calc(var(--jr)*1deg + var(--wind)*.8deg)) scale(var(--js)) scale(var(--jsx),var(--jsy)) skewX(calc(var(--wind)*2.2deg))}
.sb-char{opacity:var(--jo);filter:blur(calc(var(--jb,0)*.18cqw))}
.sb-ghost{opacity:calc(var(--go,0)*var(--jo));filter:brightness(1.4) saturate(1.3)}
.sb-ghost img{position:absolute;inset:0;width:100%;height:100%}
.sb-char .sb-glow{opacity:calc(var(--pop)*(.55 + var(--pulse)*.4) + var(--flash)*.4)}

/* nuages qui coulent (ciel de gauche) et reflets qui ondulent (lac) : copies du fond déformées par un filtre SVG animé */
.sb-warp{position:absolute;inset:0;opacity:calc(var(--pop)*1);pointer-events:none}
.sb-warp img{filter:brightness(calc(1 + var(--pop)*.07)) saturate(calc(1 + var(--pop)*.2))}
.sb-warp--sky{filter:url(#sbSky);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 50%,transparent 62%),linear-gradient(180deg,#000 0,#000 38%,transparent 56%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 0,#000 50%,transparent 62%),linear-gradient(180deg,#000 0,#000 38%,transparent 56%);mask-composite:intersect}
.sb-warp--lake{filter:url(#sbLake);
  -webkit-mask-image:linear-gradient(90deg,transparent 56%,#000 62%),linear-gradient(180deg,transparent 66%,#000 72%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 56%,#000 62%),linear-gradient(180deg,transparent 66%,#000 72%);mask-composite:intersect}


/* étoiles filantes (diagonales, courtes) */
.sb-shoot{position:absolute;z-index:1;left:8%;top:6%;width:13cqw;height:max(1px,.28cqw);opacity:0;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,225,252,.95));box-shadow:0 0 1cqw rgba(255,140,240,.9);transform:rotate(17deg) translateX(-8cqw)}
.sb-btn.is-on .sb-shoot{animation:sbShoot 2.4s linear infinite}
.sb-shoot--2{left:30%;top:2%}
.sb-btn.is-on .sb-shoot--2{animation-delay:-1.2s}
@keyframes sbShoot{0%{opacity:0;transform:rotate(17deg) translateX(-8cqw)}6%{opacity:1}34%{opacity:0;transform:rotate(17deg) translateX(34cqw)}100%{opacity:0;transform:rotate(17deg) translateX(34cqw)}}
@media (prefers-reduced-motion:reduce){.sb-lake::before,.sb-stars i,.sb-mist,.sb-shoot{animation:none!important}.sb-shoot{display:none}}

/* ===================== MODE JOUR + LANGUES (commun aux 6 boutons) =====================
   Mode jour (html[data-theme="light"], activé par la lampe du hero) : carte blanche, la scène s'éclaire et se fond
   dans la lumière à gauche, texte foncé, icône et flèche en verre blanc. Les animations ne changent pas.
   ===================================================================================== */
:root[data-theme="light"] .sb-btn-wrap{--ink:#141a2e}
:root[data-theme="light"] .sb-btn{
  box-shadow:0 calc(.6cqw + var(--pop)*1.2cqw) calc(2.4cqw + var(--pop)*3cqw) -.6cqw rgba(13,19,48,.18),
             0 0 calc(1.6cqw + var(--pop)*2.4cqw) rgba(var(--accent-rgb),calc(.14 + var(--pop)*.18))}
:root[data-theme="light"] .sb-btn.is-dimmed{filter:saturate(.75) opacity(.62)}
:root[data-theme="light"] .sb-btn__body{background:linear-gradient(180deg,#fff,#f4f6fb)}
/* la scène : plus lumineuse, et fondue vers le blanc côté texte */
:root[data-theme="light"] .sb-btn__body:not([data-day]) > :not(.sb-btn__icon,.sb-btn__title,.sb-btn__sub,.sb-btn__arrow,.sb-fx){
  filter:brightness(1.18) saturate(1.05);
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,rgba(0,0,0,.5) 50%,#000 68%);mask-image:linear-gradient(90deg,transparent 30%,rgba(0,0,0,.5) 50%,#000 68%)}
:root[data-theme="light"] .sb-fx-scrim{background:linear-gradient(90deg,rgba(255,255,255,.96) 0,rgba(255,255,255,.8) 42%,transparent 66%)}
:root[data-theme="light"] .sb-fx-spot{mix-blend-mode:normal;opacity:calc(var(--pop)*.5)}
:root[data-theme="light"] .sb-fx-rim{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(var(--accent-rgb),calc(.35 + var(--pop)*.45)) 40%,rgba(var(--accent-rgb),calc(.25 + var(--pop)*.45)))}
:root[data-theme="light"] .sb-btn__title{color:var(--ink);text-shadow:none}
:root[data-theme="light"] .sb-btn__sub{color:var(--ink);opacity:.62;text-shadow:none}
:root[data-theme="light"] .sb-btn__icon{color:color-mix(in srgb,var(--accent) 78%,#000);
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.75));
  box-shadow:inset 0 0 0 max(1px,.25cqw) rgba(var(--accent-rgb),.32),0 .6cqw 1.6cqw rgba(13,19,48,.10)}
:root[data-theme="light"] .sb-btn__icon svg{filter:none}
:root[data-theme="light"] .sb-btn__arrow{color:color-mix(in srgb,var(--arrow-ink,#fff) calc(var(--pop)*100%),#141a2e);
  background:color-mix(in srgb,var(--accent) calc(var(--pop)*100%),rgba(255,255,255,.88));
  box-shadow:inset 0 0 0 max(1px,.25cqw) rgba(var(--accent-rgb),.32),0 .6cqw 1.6cqw rgba(13,19,48,.12),0 0 calc(var(--pop)*2.4cqw) rgba(var(--accent-rgb),.45)}
/* la page ouverte au clic, en version jour */
:root[data-theme="light"] .sb-page.sb-btn-wrap{background:radial-gradient(120% 70% at 50% 0%,rgba(var(--accent-rgb),.14),transparent 62%),#f4f6fb}
:root[data-theme="light"] .sb-page__card{background:#fff;box-shadow:inset 0 0 0 1px rgba(13,19,48,.08),0 6px 18px rgba(13,19,48,.06)}
:root[data-theme="light"] .sb-page__card h2{color:color-mix(in srgb,var(--accent) 75%,#000)}
:root[data-theme="light"] .sb-page__close{color:#141a2e;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(13,19,48,.1),0 6px 20px rgba(13,19,48,.12)}
@media (prefers-reduced-transparency:reduce){ :root[data-theme="light"] .sb-btn__icon,:root[data-theme="light"] .sb-btn__arrow{background:#fff} }
@media (prefers-contrast:more){ :root[data-theme="light"] .sb-btn__icon,:root[data-theme="light"] .sb-btn__arrow{box-shadow:inset 0 0 0 2px #141a2e} }
/* boutons qui ont leurs images de jour (data-day) : le fond devient blanc, la scène garde ses couleurs */
:root[data-theme="light"] .sb-btn__body[data-day]{background:#fff}
:root[data-theme="light"] .sb-btn__body[data-day] .sb-fx-scrim{background:linear-gradient(90deg,rgba(255,255,255,.9) 0,rgba(255,255,255,.66) 34%,rgba(255,255,255,.2) 50%,transparent 62%)}
:root[data-theme="light"] .sb-btn__body[data-day] .sb-fx-flash,:root[data-theme="light"] .sb-btn__body[data-day] .sb-fx-burst{mix-blend-mode:multiply;opacity:calc(var(--flash)*.12)}
/* arabe : la flèche pointe dans le sens de lecture */
.sb-btn:dir(rtl) .sb-btn__arrow svg{transform:scaleX(-1) translateX(calc(var(--pop)*.35cqw))}
/* storybook : version aube — lune, étoiles et brume plus discrètes */
:root[data-theme="light"] .sb-plane--far{background:#e9d9ff;--bgimg:url(assets/sb-bg-HD-day.webp)}
:root[data-theme="light"] .sb-stars{opacity:.35}
:root[data-theme="light"] .sb-mist{opacity:calc(.1 + var(--pop)*.3)}