/* =====================================================================
   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 (.cu-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
   ===================================================================== */
.cu-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}
.cu-btn-wrap *{box-sizing:border-box}

.cu-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))}
.cu-btn{transition:filter .45s cubic-bezier(.2,.8,.2,1)}
.cu-btn.is-dimmed{filter:brightness(.6) saturate(.75)}
/* au repos tout est immobile : les animations CSS ne tournent que quand le bouton est vivant */
.cu-btn:not(.is-live) *,.cu-btn:not(.is-live) *::before,.cu-btn:not(.is-live) *::after{animation:none!important}
.cu-btn:focus-visible{outline:max(2px,.6cqw) solid color-mix(in srgb,var(--accent) 75%,#fff);outline-offset:max(3px,.9cqw)}
.cu-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) ---------- */
.cu-stage{position:absolute;inset:0;perspective:90cqw;perspective-origin:var(--fx-x) 45%;overflow:hidden;pointer-events:none}
.cu-drift{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:var(--fx-x) 50%}
.cu-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))}
.cu-plane{position:absolute;inset:0;pointer-events:none;transform-origin:var(--fx-x) 45%}
.cu-plane img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.cu-plane--far::before{content:"";position:absolute;inset:-10%;background:var(--bgimg) center/cover no-repeat;filter:blur(7px)}
.cu-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) ---------- */
.cu-fx{position:absolute;pointer-events:none}
/* voile de lisibilité derrière l'icône et le titre (comme un « scroll edge effect ») */
.cu-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 */
.cu-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%)}
.cu-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 */
.cu-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) */
.cu-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)}
.cu-fx-burst.is-on{animation:cuBurst .7s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes cuBurst{0%{opacity:.85;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
.cu-fx-pop{z-index:3;width:.6cqw;height:.6cqw;border-radius:50%;background:#fff;box-shadow:0 0 .9cqw .15cqw var(--glow);
  animation:cuPop .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes cuPop{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 ---------- */
.cu-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%)}
.cu-btn__icon svg{width:58%;height:58%;overflow:visible;filter:drop-shadow(0 0 .8cqw rgba(var(--glow-rgb),.45))}
.cu-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%)}
.cu-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))}
.cu-btn__body:has(.cu-btn__sub) .cu-btn__title{transform:translateY(calc(-50% - 1.7cqw))}
.cu-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 */
.cu-btn__arrow svg{width:46%;height:46%;transform:translateX(calc(var(--pop)*.35cqw))}

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion:reduce){
  .cu-btn{transform:none;transition:transform .1s ease-out,box-shadow .25s ease,filter .25s ease}
  .cu-btn:active{transform:scale(.98)}
  .cu-btn__arrow{transition:background-color .25s ease,color .25s ease}
  .cu-btn:is(:hover,:focus-visible) .cu-btn__arrow{background:var(--accent);color:var(--arrow-ink,#fff)}
  .cu-fx-burst,.cu-fx-pop{display:none}
}
@media (prefers-reduced-transparency:reduce){
  .cu-btn__icon,.cu-btn__arrow{-webkit-backdrop-filter:none;backdrop-filter:none}
  .cu-btn__icon{background:rgb(20,20,24)}
  .cu-btn__arrow{background:color-mix(in srgb,var(--accent) calc(var(--pop)*100%),rgb(20,20,24))}
}
@media (prefers-contrast:more){
  .cu-btn__icon{background:#000;box-shadow:inset 0 0 0 2px #fff}
  .cu-btn__arrow{box-shadow:inset 0 0 0 2px #fff}
  .cu-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.cu-page-open{overflow:hidden}
.cu-page.cu-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)}
.cu-page__scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.cu-page__hero{padding:76px 16px 0}
.cu-page__frame.cu-btn-wrap{width:min(100%,1100px);margin:0 auto}
.cu-page__frame .cu-btn{cursor:default;pointer-events:none;transform:none}
.cu-page__frame .cu-btn__arrow{opacity:0}
.cu-page__content{max-width:720px;margin:0 auto;padding:44px 20px 96px;animation:cuRise .55s .12s cubic-bezier(.2,.8,.2,1) both}
@keyframes cuRise{from{opacity:0;transform:translateY(18px)}}
.cu-page__title{margin:0;font-size:clamp(2rem,6vw,3.25rem);font-weight:700;line-height:1.05;letter-spacing:-.022em}
.cu-page__lead{margin:.7rem 0 0;font-size:1.125rem;line-height:1.5;opacity:.72}
.cu-page__body{display:grid;gap:14px;margin-top:2.2rem}
.cu-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)}
.cu-page__card h2{margin:0 0 .35rem;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;color:var(--icon)}
.cu-page__card p{margin:0;font-size:.98rem;line-height:1.6;opacity:.78}
.cu-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}
.cu-page__close:hover{background:rgba(255,255,255,.2)}
.cu-page__close:active{transform:scale(.94)}
.cu-page__close:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 75%,#fff);outline-offset:3px}
.cu-page__close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.cu-page.is-fading-in{animation:cuFade .25s ease both}
.cu-page.is-fading-out{animation:cuFade .2s ease reverse both}
@keyframes cuFade{from{opacity:0}}
/* la morphose bouton ↔ page : courbe « ressort » sans rebond */
::view-transition-group(cu-hero){animation-duration:.52s;animation-timing-function:cubic-bezier(.2,.85,.25,1)}
::view-transition-old(cu-hero),::view-transition-new(cu-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){
  .cu-page__title,.cu-page__lead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .cu-page__body{margin-top:0}
}
@media (prefers-reduced-motion:reduce){.cu-page__content{animation:none}}
@media (prefers-reduced-transparency:reduce){.cu-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 ===================== */

.cu-btn-wrap{--accent:#8a3dff;--accent-rgb:138,61,255;--icon:#b98cff;--glow:#c79bff;--glow-rgb:199,155,255;--deep:#05001a;--ink:#f6f0ff;--fx-x:79.4%;--fx-y:54.8%}
.cu-btn{--alert:0;--okm:0;--lens:0;--lensx:66;--lensy:10.5;--lenss:.4;--lscan:0;--beck:0;--say:0;--lx:0;--ly:0;--hp:0;--hop:0;--sq:0;--lock:0;--qrf:0}

/* fond (z = -12cqw, agrandi pour garder la taille d'origine) */
.cu-plane--far{--bgimg:url(assets/cu-bg-HD.webp);transform:translateZ(-12cqw) scale(1.1333);overflow:hidden;background:#0a0030}
.cu-plane--far .cu-bg{filter:brightness(calc(1 + var(--pop)*.08)) saturate(calc(1 + var(--pop)*.2))}
/* sol en grille qui défile vers toi (perspective) */
.cu-floor{position:absolute;left:-10%;right:-10%;top:60%;bottom:0;overflow:hidden;opacity:calc(var(--pop)*.75);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%);mask-image:linear-gradient(180deg,transparent,#000 40%)}
.cu-floor i{position:absolute;left:0;right:0;top:-100%;bottom:0;transform-origin:50% 100%;transform:perspective(30cqw) rotateX(62deg);
  background:repeating-linear-gradient(90deg,rgba(190,140,255,.7) 0 max(1px,.22cqw),transparent max(1px,.22cqw) 7cqw),
             repeating-linear-gradient(180deg,rgba(190,140,255,.7) 0 max(1px,.22cqw),transparent max(1px,.22cqw) 6cqw);
  animation:cuFloor 1.6s linear infinite}
@keyframes cuFloor{to{background-position:0 0,0 6cqw}}
/* halo derrière le robot, qui respire au rythme du « viens » */
.cu-aura{position:absolute;inset:0;mix-blend-mode:screen;
  background:radial-gradient(circle 20cqw at 62% 50%,rgba(190,120,255,.8),rgba(120,60,255,.3) 45%,transparent 75%);
  opacity:calc(var(--pop)*(.1 + var(--beck)*.28) + var(--flash)*.3)}
.cu-stars{position:absolute;inset:0}
.cu-stars i{position:absolute;width:.5cqw;height:.5cqw;border-radius:50%;background:#fff;box-shadow:0 0 .8cqw .1cqw var(--glow);opacity:.2;animation:cuTw var(--d) ease-in-out var(--dl) infinite alternate}
@keyframes cuTw{from{opacity:.1;transform:scale(.6)}to{opacity:calc(.3 + var(--pop)*.7);transform:scale(1.25)}}

/* QR code (z = +6cqw) : tiré vers toi à chaque « viens », cadre de visée qui se verrouille, ondes de scan */
.cu-plane--qr{transform:translateZ(calc(6cqw + var(--beck)*var(--pop)*1.8cqw)) scale(.9333)}
.cu-qr{position:absolute;inset:0;transform-origin:79.4% 54%;transform:scale(calc(1 + var(--beck)*var(--pop)*.02 + var(--qrf)*.04));
  filter:brightness(calc(1 + var(--pop)*.1 + var(--beck)*var(--pop)*.2 + var(--qrf)*.5))}
.cu-lock{position:absolute;left:71.6cqw;top:1.8cqw;width:15.6cqw;height:16.8cqw;opacity:calc(var(--lock)*var(--pop));
  transform:scale(calc(1.28 - var(--lock)*.28 + var(--qrf)*.05))}
.cu-lock i{position:absolute;width:2.6cqw;height:2.6cqw;border:max(1.5px,.35cqw) solid #ead8ff;filter:drop-shadow(0 0 .6cqw var(--glow))}
.cu-lock i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}.cu-lock i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.cu-lock i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}.cu-lock i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.cu-ping{position:absolute;left:79.4cqw;top:10.5cqw;width:14cqw;height:14cqw;margin:-7cqw 0 0 -7cqw;border-radius:50%;opacity:0;pointer-events:none;
  border:max(1px,.3cqw) solid rgba(225,195,255,.9);box-shadow:0 0 1.2cqw var(--glow),inset 0 0 1.2cqw rgba(var(--accent-rgb),.5)}
.cu-btn.is-on .cu-ping{animation:cuPing 2.2s ease-out infinite}
.cu-btn.is-on .cu-ping--2{animation-delay:1.1s}
@keyframes cuPing{0%{opacity:.85;transform:scale(.25)}100%{opacity:0;transform:scale(1.5)}}
/* coche de réussite (clic) */
.cu-check{position:absolute;left:79.4cqw;top:10.5cqw;width:6.4cqw;height:6.4cqw;margin:-3.2cqw 0 0 -3.2cqw;opacity:0;transform:scale(.85)}
.cu-check svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 .7cqw rgba(var(--glow-rgb),.6))}
.cu-check circle{fill:rgba(var(--accent-rgb),.92);stroke:#fff;stroke-width:1.1}
.cu-check path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22}
.cu-check.is-on{animation:cuCheck 1.1s cubic-bezier(.2,.8,.2,1) forwards}
.cu-check.is-on path{animation:cuDraw .35s .12s ease-out forwards}
@keyframes cuCheck{0%{opacity:0;transform:scale(.85)}22%{opacity:1;transform:scale(1)}72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes cuDraw{to{stroke-dashoffset:0}}

/* robot (z = +8cqw) : se penche au rythme du « viens », regarde le curseur, saute de joie au clic */
.cu-plane--bot{transform:translateZ(8cqw) scale(.9111)}
.cu-bot{position:absolute;inset:0;transform-origin:62% 100%;
  transform:translate(calc(var(--lx)*.45cqw),calc(var(--pop)*-.3cqw - var(--hop)*1cqw)) rotate(calc(var(--pop)*(var(--beck)*-1.8deg + .5deg) + var(--lx)*.9deg))
            scale(calc(1 + var(--pop)*.012 + var(--beck)*var(--pop)*.012 - var(--sq)*.04),calc(1 + var(--pop)*.012 + var(--beck)*var(--pop)*.012 + var(--sq)*.07))}
.cu-bot img{filter:brightness(calc(1 + var(--pop)*.05 + var(--beck)*var(--pop)*.12 + var(--qrf)*.25))}
/* yeux : un disque sombre recouvre les yeux de la photo, deux yeux lumineux qui suivent le curseur les remplacent */
.cu-eye{position:absolute;top:10.5cqw;width:0;height:0;opacity:min(1,calc(var(--pop)*10))}
.cu-eye--l{left:60.3cqw}.cu-eye--r{left:64.9cqw;top:10.6cqw}
.cu-eye::before{content:"";position:absolute;left:-1.45cqw;top:-1.45cqw;width:2.9cqw;height:2.9cqw;border-radius:50%;background:radial-gradient(circle,#05001a 0 68%,rgba(5,0,26,0) 100%)}
.cu-pupil{position:absolute;left:-1cqw;top:-1cqw;width:2cqw;height:2cqw;border-radius:50%;
  background:radial-gradient(circle at 40% 38%,#fff 0 30%,#e6d3ff 62%,#b88cff 100%);box-shadow:0 0 1.2cqw .25cqw rgba(214,170,255,.9),0 0 calc(var(--beck)*2cqw) rgba(255,255,255,.6);
  transform:translate(calc(var(--lx)*.5cqw),calc(var(--ly)*.4cqw)) scale(calc(1 + var(--beck)*.08),calc((1 - var(--hp))*(1 - var(--bl,0))))}
.cu-arc{position:absolute;left:-1.05cqw;top:-.7cqw;width:2.1cqw;height:1.2cqw;border:max(1.5px,.4cqw) solid #fff;border-bottom:0;border-radius:2cqw 2cqw 0 0;opacity:var(--hp);
  filter:drop-shadow(0 0 .6cqw rgba(214,170,255,.95))}
.cu-bot.is-blink .cu-pupil{animation:cuBlink .2s ease-in-out}
@keyframes cuBlink{0%,100%{transform:translate(calc(var(--lx)*.5cqw),calc(var(--ly)*.4cqw)) scaleY(1)}50%{transform:translate(calc(var(--lx)*.5cqw),calc(var(--ly)*.4cqw)) scaleY(.08)}}

/* bras articulé + main (SVG) : sort de l'épaule du robot, devant lui, tout près de la caméra */
.cu-arm{position:absolute;left:48cqw;top:4cqw;width:16cqw;height:16cqw;pointer-events:none;
  transform:translateY(calc((1 - var(--pop))*5cqw)) rotate(calc(var(--lx)*-1.5deg));transform-origin:62% 95%;opacity:min(1,calc(var(--pop)*3));
  filter:drop-shadow(0 0 .9cqw rgba(190,130,255,.75))}
.cu-arm svg{width:100%;height:100%;overflow:visible;display:block}
.cu-handg{transform-box:view-box;transform-origin:85px 101px;transform:translateY(calc(var(--beck)*-1px)) rotate(calc(5deg - var(--beck)*20deg))}
.cu-fing{transform-box:fill-box;transform-origin:50% 100%;
  transform:rotate(calc(var(--rot)*1deg*(1 - var(--beck)*.5) - var(--beck)*(5deg*var(--n) - 7deg))) scaleY(calc(1 - var(--beck)*(.2 + .06*var(--n))))}
.cu-thumb{transform-box:fill-box;transform-origin:50% 100%;transform:rotate(calc(24deg - var(--beck)*14deg))}
.cu-palmlight{transform-box:fill-box;transform-origin:50% 50%;opacity:calc(.35 + var(--beck)*.65 + var(--qrf)*.4);transform:scale(calc(.8 + var(--beck)*.5))}
.cu-arm__fore{transform-box:view-box;transform-origin:92px 131px;transform:rotate(calc(var(--beck)*-3deg))}
/* antenne : la bille s'allume quand le robot « remarque » quelqu'un */
.cu-ant{position:absolute;left:62.4cqw;top:3.6cqw;width:5cqw;height:5cqw;margin:-2.5cqw 0 0 -2.5cqw;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0 14%,rgba(220,175,255,.7) 28%,rgba(160,100,255,0) 70%);opacity:calc(var(--pop)*var(--alert)*.95);transform:scale(calc(.5 + var(--alert)*.7))}
/* loupe de scan : sort de l'œil du robot, glisse sur le QR code, le verrouille */
.cu-lens{position:absolute;left:0;top:0;width:0;height:0;opacity:calc(var(--lens)*var(--pop));
  transform:translate(calc(var(--lensx)*1cqw),calc(var(--lensy)*1cqw)) scale(var(--lenss))}
.cu-lens__glass{position:absolute;left:-3.6cqw;top:-3.6cqw;width:7.2cqw;height:7.2cqw;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.5),rgba(200,160,255,.26) 45%,rgba(130,90,255,.14) 100%);backdrop-filter:none}
.cu-lens__scan{position:absolute;left:0;right:0;top:50%;height:max(1px,.3cqw);background:linear-gradient(90deg,transparent,#fff 30%,#fff 70%,transparent);
  box-shadow:0 0 1cqw .2cqw var(--glow);transform:translateY(calc(var(--lscan)*3cqw))}
.cu-lens__ring{position:absolute;left:-3.8cqw;top:-3.8cqw;width:7.6cqw;height:7.6cqw;border-radius:50%;border:max(2px,.55cqw) solid #fff;
  box-shadow:0 0 1.8cqw .3cqw var(--glow),0 0 .6cqw #fff,inset 0 0 1.4cqw rgba(var(--accent-rgb),.8)}
.cu-lens__tick{position:absolute;left:-.12cqw;top:-4.9cqw;width:max(1px,.24cqw);height:9.8cqw;background:#f0e2ff;opacity:.7;
  -webkit-mask-image:linear-gradient(180deg,#000 0 12%,transparent 12% 88%,#000 88%);mask-image:linear-gradient(180deg,#000 0 12%,transparent 12% 88%,#000 88%)}
.cu-lens__tick::after{content:"";position:absolute;left:-4.85cqw;top:4.85cqw;width:9.8cqw;height:max(1px,.24cqw);background:#f0e2ff;
  -webkit-mask-image:linear-gradient(90deg,#000 0 12%,transparent 12% 88%,#000 88%);mask-image:linear-gradient(90deg,#000 0 12%,transparent 12% 88%,#000 88%)}

/* plan avant : particules « de données » qui filent du QR vers le curseur + bulle-icône */
.cu-plane--front{transform:translateZ(12cqw) scale(.8824)}
.cu-bits{position:absolute;inset:0}
.cu-bits i{position:absolute;left:0;top:0;width:.75cqw;height:.75cqw;margin:-.375cqw 0 0 -.375cqw;border-radius:50%;background:#fff;opacity:0;
  box-shadow:0 0 1.1cqw .3cqw var(--glow)}
.cu-say{position:absolute;left:49.6cqw;top:1.1cqw;width:5cqw;height:5cqw;border-radius:50%;opacity:var(--say);transform-origin:100% 120%;
  background:radial-gradient(circle at 35% 28%,#fff,#e6d3ff 70%,#cdb0ff);box-shadow:0 0 1.6cqw rgba(var(--glow-rgb),.9);
  transform:scale(calc(.3 + var(--say)*.7)) rotate(calc(-10deg + var(--say)*8deg))}
.cu-say::after{content:"";position:absolute;right:.5cqw;bottom:-.7cqw;width:1.3cqw;height:1.3cqw;background:#cdb0ff;transform:rotate(45deg);border-radius:0 0 .3cqw 0}
.cu-glyph{position:absolute;inset:.9cqw;width:3.2cqw;height:3.2cqw;fill:none;stroke:#3a14a8;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:none}
.cu-glyph .dot{fill:#3a14a8;stroke:none}
.cu-glyph--q{opacity:calc(1 - var(--okm));transform:scale(calc(1 - var(--okm)*.4))}
.cu-glyph--ok{opacity:var(--okm);transform:scale(calc(.6 + var(--okm)*.4));stroke:#17803a}
@media (prefers-reduced-motion:reduce){.cu-stars i,.cu-floor i,.cu-btn.is-on .cu-ping{animation:none!important}.cu-ping,.cu-bits,.cu-say,.cu-lens{display:none}}

/* signature épurée : on ne garde que le regard (bras, loupe, bulle, cadre de visée, ondes et particules retirés) */
.cu-arm,.cu-lens,.cu-say,.cu-lock,.cu-bits,.cu-ping{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"] .cu-btn-wrap{--ink:#141a2e}
:root[data-theme="light"] .cu-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"] .cu-btn.is-dimmed{filter:saturate(.75) opacity(.62)}
:root[data-theme="light"] .cu-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"] .cu-btn__body:not([data-day]) > :not(.cu-btn__icon,.cu-btn__title,.cu-btn__sub,.cu-btn__arrow,.cu-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"] .cu-fx-scrim{background:linear-gradient(90deg,rgba(255,255,255,.96) 0,rgba(255,255,255,.8) 42%,transparent 66%)}
:root[data-theme="light"] .cu-fx-spot{mix-blend-mode:normal;opacity:calc(var(--pop)*.5)}
:root[data-theme="light"] .cu-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"] .cu-btn__title{color:var(--ink);text-shadow:none}
:root[data-theme="light"] .cu-btn__sub{color:var(--ink);opacity:.62;text-shadow:none}
:root[data-theme="light"] .cu-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"] .cu-btn__icon svg{filter:none}
:root[data-theme="light"] .cu-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"] .cu-page.cu-btn-wrap{background:radial-gradient(120% 70% at 50% 0%,rgba(var(--accent-rgb),.14),transparent 62%),#f4f6fb}
:root[data-theme="light"] .cu-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"] .cu-page__card h2{color:color-mix(in srgb,var(--accent) 75%,#000)}
:root[data-theme="light"] .cu-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"] .cu-btn__icon,:root[data-theme="light"] .cu-btn__arrow{background:#fff} }
@media (prefers-contrast:more){ :root[data-theme="light"] .cu-btn__icon,:root[data-theme="light"] .cu-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"] .cu-btn__body[data-day]{background:#fff}
:root[data-theme="light"] .cu-btn__body[data-day] .cu-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"] .cu-btn__body[data-day] .cu-fx-flash,:root[data-theme="light"] .cu-btn__body[data-day] .cu-fx-burst{mix-blend-mode:multiply;opacity:calc(var(--flash)*.12)}
/* arabe : la flèche pointe dans le sens de lecture */
.cu-btn:dir(rtl) .cu-btn__arrow svg{transform:scaleX(-1) translateX(calc(var(--pop)*.35cqw))}
/* pour les curieux : fond blanc lavande ; sol et étoiles atténués */
:root[data-theme="light"] .cu-plane--far{background:#f1ecff;--bgimg:url(assets/cu-bg-HD-day.webp)}
:root[data-theme="light"] .cu-floor{opacity:calc(var(--pop)*.35)}
:root[data-theme="light"] .cu-stars{opacity:.3}
:root[data-theme="light"] .cu-aura{mix-blend-mode:multiply;opacity:calc(var(--pop)*.25)}