/* wheel.css : grande roue Esker, noyau, arcs de suite, widget flottant (extrait de base.css, inchangé) */
/* ---- zoom intégré au noyau de la roue ---- */
.hubzoom{cursor:default}
.hubzoom .hz-btn{cursor:pointer}
.hubzoom .hz-bg{transition:fill .25s,stroke .25s}
.hubzoom .hz-btn:hover .hz-bg{fill:#13b4e2;stroke:#13b4e2}
.hubzoom .hz-btn:hover .hz-ico{stroke:#fff}
.hubzoom .hz-btn.off{opacity:.3;pointer-events:none}
.hubzoom .hz-ico{transition:stroke .25s}
.hubzoom .hz-btn:focus{outline:none}
.hubzoom .hz-btn:focus-visible .hz-bg{stroke:#163467;stroke-width:2.4}
/* champ de saisie directe du pourcentage, posé dans le noyau via foreignObject */
.hz-input{width:100%;height:100%;box-sizing:border-box;border:none;outline:none;background:transparent;border-radius:16px;text-align:center;font-family:'Miriam Libre',sans-serif;font-weight:700;font-size:14px;color:#163467;padding:0;cursor:text;transition:background .22s,box-shadow .22s,color .22s}
.hz-input:hover{background:rgba(19,180,226,.09)}
.hz-input:focus{background:#fff;box-shadow:0 0 0 2px rgba(19,180,226,.6);color:#13b4e2}
.hz-cap{pointer-events:none}
/* ============ ANIMATIONS DE LA ROUE ============ */
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes spinrev{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@keyframes breathe{0%,100%{opacity:.22}50%{opacity:.68}}
@keyframes pulseR{0%{r:var(--r0);opacity:.55}100%{r:var(--r1);opacity:0}}
@keyframes dashflow{to{stroke-dashoffset:-1000}}
@keyframes cometS2P{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-620}}
@keyframes popIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
@keyframes segIn{from{opacity:0;transform:translate(var(--ix),var(--iy)) scale(.9)}to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes shimmer{0%{opacity:.25}50%{opacity:.9}100%{opacity:.25}}

.rot-slow{animation:spin 90s linear infinite}
.rot-rev{animation:spinrev 140s linear infinite}
.rot-fast{animation:spin 42s linear infinite}
.rot-med{animation:spinrev 64s linear infinite}
.breathe{animation:breathe 5s ease-in-out infinite}

/* --- segments --- */
.seg{cursor:pointer;transition:transform .42s cubic-bezier(.34,1.46,.64,1),filter .32s,opacity .32s;animation:segIn .7s cubic-bezier(.23,1,.32,1) both;animation-delay:var(--d,0s)}
.seg .sfill{transition:fill .32s ease,stroke .32s,stroke-width .32s}
.seg .srim{transition:opacity .32s,fill .32s}
.seg .slab{pointer-events:none;transition:fill .3s ease}
.seg .scnt{transition:opacity .3s,fill .3s;opacity:.78}
.seg .sglow{opacity:0;transition:opacity .35s}
.seg:hover,.seg.active{transform:translate(var(--tx),var(--ty))}
.seg:hover .sfill,.seg.active .sfill{fill:var(--c);stroke:#fff;stroke-width:2.6}
.seg:hover .slab,.seg.active .slab{fill:#fff}
.seg:hover .scnt,.seg.active .scnt{opacity:1;fill:#fff}
.seg:hover .srim,.seg.active .srim{opacity:1;fill:#fff}
.seg:hover .sglow,.seg.active .sglow{opacity:1}
.seg:focus{outline:none}
.seg:focus-visible .sfill{stroke:var(--dark-blue);stroke-width:4}
.seg.soon .sfill{stroke-dasharray:7 5}
.wheel-svg.dimmed .seg:not(:hover):not(.active){opacity:.42;filter:saturate(.45)}

/* --- arcs de suite dynamiques --- */
.suitearc-base{transition:stroke-width .4s,opacity .4s}
.suitearc-flow{stroke-dasharray:14 22;animation:dashflow 9s linear infinite;transition:opacity .4s,stroke-width .4s}
.suitearc-comet{stroke-dasharray:46 580;animation:cometS2P 5.2s cubic-bezier(.5,0,.5,1) infinite;opacity:.95;transition:animation-duration .4s}
.suitegrp.lit .suitearc-base{stroke-width:5.2;opacity:1}
.suitegrp.lit .suitearc-flow{opacity:.95;stroke-width:3.4;animation-duration:3.4s}
.suitegrp.lit .suitearc-comet{animation-duration:2.1s}
.suitegrp.dim{opacity:.34}
.suitegrp{transition:opacity .4s}
.suitelab{transition:fill .35s,opacity .35s}
.suitegrp.lit .suitelab{fill:var(--blue)}
.suite-node{transition:r .4s cubic-bezier(.34,1.5,.64,1),fill .35s}
.suitegrp.lit .suite-node{r:9.5}

/* --- noyau central --- */
.hub-default,.hub-hover{transition:opacity .34s ease,transform .34s cubic-bezier(.23,1,.32,1);transform-origin:center}
.hub-hover{opacity:0;transform:scale(.94)}
.wheel-svg.hovering .hub-default{opacity:0;transform:scale(1.05)}
.wheel-svg.hovering .hub-hover{opacity:1;transform:scale(1)}
.hub-sweep{animation:spin 11s linear infinite;transform-origin:center;opacity:.5}
.hub-ring-a{animation:spinrev 52s linear infinite;transform-origin:center}
.hub-ring-b{animation:spin 78s linear infinite;transform-origin:center}

/* --- pastille Synergy AI --- */
.aihub{cursor:help}
.aihub .aiorb{animation:floaty 4.5s ease-in-out infinite}
.aihub .airing{animation:spin 26s linear infinite}
.aihub:hover .aicore{fill:var(--sunlight)}
.ainode{animation:shimmer 3s ease-in-out infinite}

/* --- bandeau socle --- */
.bandg{cursor:default}
.bandg .bandsheen{opacity:.0;animation:shimmer 6s ease-in-out infinite}
/* ============ WIDGET ROUE FLOTTANT (dock) ============ */
/* En bas à gauche. Aucune fenêtre, aucun cadre : la bulle Esker se métamorphose
   en roue complète, qui naît exactement du centre de la bulle. */
.dock{position:fixed;z-index:380;left:max(18px,1.6vw);bottom:max(18px,1.6vw);width:74px;height:74px;opacity:0;visibility:hidden;transform:translateY(16px) scale(.9);transition:opacity .45s cubic-bezier(.23,1,.32,1),transform .45s cubic-bezier(.23,1,.32,1),visibility .45s}
.dock.on{opacity:1;visibility:visible;transform:none}

.dock-btn{position:absolute;left:0;bottom:0;width:74px;height:74px;border-radius:50%;border:none;cursor:pointer;background:#fff;box-shadow:0 10px 32px rgba(22,52,103,.22),0 0 0 1px rgba(22,52,103,.07);display:flex;align-items:center;justify-content:center;padding:0;transition:transform .45s cubic-bezier(.34,1.45,.64,1),box-shadow .42s,opacity .3s}
.dock:hover .dock-btn{transform:scale(1.08);box-shadow:0 16px 42px rgba(29,192,213,.4),0 0 0 1px rgba(29,192,213,.3)}
.dock-btn .emark{width:42px;height:42px;margin-bottom:5px}
.dock-btn .emark .espin{animation:spin 16s linear infinite;transform-origin:center}
.dock:hover .dock-btn .emark .espin{animation-duration:4s}
.dock-btn .ewordmark{position:absolute;bottom:11px;left:50%;transform:translateX(-50%);width:32px;height:8px;color:var(--esker-red)}
/* halo : deux anneaux contrarotatifs, parfaitement centrés sur la bulle.
   Sorti du bouton pour pouvoir exploser indépendamment de lui à l'ouverture.
   Dimensions explicites : un SVG en position absolue sans width/height reprendrait
   sa taille intrinsèque (300x150) et se retrouverait décentré. */
.dock-halo{position:absolute;left:37px;bottom:37px;width:94px;height:94px;transform:translate(-50%,50%);pointer-events:none;overflow:visible;z-index:2}
.dock-halo .hring-a{animation:spin 11s linear infinite;transform-origin:center}
.dock-halo .hring-b{animation:spinrev 17s linear infinite;transform-origin:center}
.dock:hover .dock-halo .hring-a{animation-duration:3.4s}
.dock:hover .dock-halo .hring-b{animation-duration:5.2s}
.dock-badge{position:absolute;top:-2px;right:-2px;min-width:22px;height:22px;border-radius:50px;background:var(--blue);color:#fff;font-size:.68rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 6px;border:2px solid #fff;font-family:'Miriam Libre'}

/* ============ LA METAMORPHOSE GALACTIQUE ============ */
/* La bulle ne grossit pas : elle s'effondre et libère une galaxie qui se
   déroule en tournant. Rien n'est un simple zoom. */

/* 1. le vortex : une singularité lumineuse qui s'ouvre et balaie la zone */
.dock-vortex{position:absolute;left:37px;bottom:37px;width:12px;height:12px;border-radius:50%;pointer-events:none;z-index:1;opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,.9) 0%,rgba(29,192,213,.55) 22%,rgba(107,81,237,.3) 48%,rgba(19,180,226,0) 72%)}
.dock.open .dock-vortex{animation:vortex 1s cubic-bezier(.12,.82,.3,1) forwards}
@keyframes vortex{
  0%{opacity:0;transform:translate(-50%,50%) scale(1) rotate(0deg)}
  14%{opacity:.95}
  55%{opacity:.4}
  100%{opacity:0;transform:translate(-50%,50%) scale(74) rotate(250deg)}}

/* 2. la bulle s'effondre dans la singularité, le halo part en onde */
.dock.open .dock-btn{opacity:0;transform:scale(.22) rotate(-140deg);pointer-events:none;transition:opacity .3s ease,transform .52s cubic-bezier(.55,-.3,.85,.4)}
.dock.open .dock-halo{animation:haloBurst .8s cubic-bezier(.1,.78,.28,1) forwards}
@keyframes haloBurst{
  0%{opacity:.95;transform:translate(-50%,50%) scale(1) rotate(0deg)}
  100%{opacity:0;transform:translate(-50%,50%) scale(5.6) rotate(200deg)}}

/* 3. la galaxie se déroule : elle naît du centre de la bulle, en rotation.
   Ouverture ample et élastique, fermeture en aspiration rapide. */
.dock-wheel{--dw:min(80vw,440px);position:absolute;left:0;bottom:0;width:var(--dw);height:var(--dw);z-index:3;
  transform-origin:37px calc(100% - 37px);
  transform:rotate(-232deg) scale(.035);opacity:0;visibility:hidden;will-change:transform;
  filter:drop-shadow(0 22px 50px rgba(22,52,103,.22));
  transition:transform .52s cubic-bezier(.62,-.04,.9,.36),opacity .3s ease .12s,visibility .52s}
.dock.open .dock-wheel{transform:rotate(0deg) scale(1);opacity:1;visibility:visible;
  transition:transform .88s cubic-bezier(.15,1.03,.25,1),opacity .34s ease,visibility .88s}
.dock-wheel .wheel-svg{width:100%;height:100%;display:block}

/* 4. chaque module est éjecté du noyau vers son orbite, en cascade */
.dock.open .mini-seg{animation:galaxyIn .82s cubic-bezier(.17,.96,.27,1) backwards;animation-delay:var(--sd)}
@keyframes galaxyIn{
  0%{opacity:0;transform:translate(calc(var(--tx) * -12),calc(var(--ty) * -12))}
  42%{opacity:1}
  100%{opacity:1;transform:translate(0,0)}}

/* 5. onde de choc au moment de l'effondrement */
.mini-wheel-host .shock>g,.dock-wheel .shock>g{transform-origin:410px 410px;opacity:0}
.dock.open .dock-wheel .shock>g{animation:shockOut 1.15s cubic-bezier(.08,.72,.3,1) backwards;animation-delay:var(--sd)}
@keyframes shockOut{
  0%{transform:scale(.04);opacity:.8}
  62%{opacity:.22}
  100%{transform:scale(1.12);opacity:0}}

/* 6. le champ gravitationnel : nébuleuse, bras spiraux, ceintures d'astéroïdes */
.galaxy .neb{animation:nebPulse 9s ease-in-out infinite;transform-origin:410px 410px}
@keyframes nebPulse{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.045)}}
.galaxy .arm{animation:spin 64s linear infinite;transform-origin:410px 410px;transform-box:view-box}
.dock:hover .galaxy .arm{animation-duration:26s}
.galaxy .orbit{animation:orbitFade 7s ease-in-out infinite alternate}
@keyframes orbitFade{from{opacity:.1}to{opacity:.28}}
.dock.open .galaxy{animation:galaxyFade .9s ease .2s backwards}
@keyframes galaxyFade{from{opacity:0}to{opacity:1}}

/* 7. le reste du dessin rejoint la danse, juste après les modules */
.dock.open .bandg{animation:galaxyFade .55s ease .40s backwards}
.dock.open .aihub{animation:aiPop .7s cubic-bezier(.2,1.5,.4,1) .48s backwards;transform-origin:410px 664px}
@keyframes aiPop{from{opacity:0;transform:scale(.2) rotate(-90deg)}to{opacity:1;transform:scale(1) rotate(0)}}
.dock.open .mini-hub-default{animation:hubRise .6s cubic-bezier(.2,1.1,.3,1) .46s backwards}
@keyframes hubRise{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}
.mini-hub-default{transform-origin:410px 410px}

/* ============ L'EFFONDREMENT : ASPIRATION DANS LE TROU NOIR ============ */
/* La fermeture n'est plus une transition inverse. Un horizon des événements
   s'ouvre au centre, le disque d'accrétion s'emballe, la galaxie est étirée
   puis avalée en spirale, et un dernier éclat de lumière reforme la bulle. */
.hole{opacity:0;transform-origin:410px 410px}
.hole .accretion{transform-origin:410px 410px}
.hole .photon,.hole .photon2{transform-origin:410px 410px}

.dock.closing .dock-wheel{visibility:visible;transition:none;animation:galaxyCollapse .66s cubic-bezier(.5,.02,.78,.24) forwards}
@keyframes galaxyCollapse{
  0%{opacity:1;transform:rotate(0deg) scale(1);filter:drop-shadow(0 22px 50px rgba(22,52,103,.22))}
  22%{transform:rotate(26deg) scale(1.055);filter:drop-shadow(0 0 30px rgba(29,192,213,.55)) brightness(1.12)}
  100%{opacity:0;transform:rotate(-318deg) scale(.02);filter:drop-shadow(0 0 60px rgba(107,81,237,.9)) brightness(2.6) blur(2.5px)}}

.dock.closing .hole{animation:holeOpen .66s cubic-bezier(.42,0,.8,.3) forwards}
@keyframes holeOpen{
  0%{opacity:0;transform:scale(1.3)}
  26%{opacity:.6}
  70%{opacity:1;transform:scale(.52)}
  100%{opacity:1;transform:scale(.05)}}
.dock.closing .hole .accretion{animation:spin .5s linear infinite}
.dock.closing .hole .photon{animation:photonRing .66s cubic-bezier(.4,0,.8,.3) forwards}
.dock.closing .hole .photon2{animation:photonRing .66s cubic-bezier(.4,0,.8,.3) .06s forwards}
@keyframes photonRing{0%{transform:scale(2.2) rotate(0);opacity:0}30%{opacity:1}100%{transform:scale(.3) rotate(240deg);opacity:0}}

/* les modules sont étirés puis happés, les plus éloignés en premier */
.dock.closing .mini-seg{animation:galaxyOut .5s cubic-bezier(.55,0,.82,.22) forwards;animation-delay:var(--sdo)}
@keyframes galaxyOut{
  0%{opacity:1;transform:translate(0,0)}
  18%{transform:translate(calc(var(--tx) * 2.6),calc(var(--ty) * 2.6))}
  100%{opacity:0;transform:translate(calc(var(--tx) * -15),calc(var(--ty) * -15))}}
.dock.closing .bandg,.dock.closing .aihub{animation:suckFade .34s ease-in forwards}
@keyframes suckFade{to{opacity:0;transform:scale(.4)}}
.dock.closing .aihub{transform-origin:410px 664px}
.dock.closing .bandg{transform-origin:410px 410px}
.dock.closing .galaxy{animation:suckSpin .6s cubic-bezier(.5,0,.8,.3) forwards;transform-origin:410px 410px}
@keyframes suckSpin{0%{opacity:1;transform:scale(1) rotate(0)}100%{opacity:0;transform:scale(.18) rotate(190deg)}}

/* le vortex se rétracte vers la singularité */
.dock.closing .dock-vortex{animation:vortexIn .62s cubic-bezier(.42,0,.78,.28) forwards}
@keyframes vortexIn{
  0%{opacity:0;transform:translate(-50%,50%) scale(58) rotate(0deg)}
  22%{opacity:.85}
  100%{opacity:0;transform:translate(-50%,50%) scale(1.5) rotate(-330deg)}}

/* l'éclat final : la matière recomprimée rallume la bulle */
.dock-flash{position:absolute;left:37px;bottom:37px;width:18px;height:18px;border-radius:50%;pointer-events:none;z-index:4;opacity:0;
  transform:translate(-50%,50%) scale(.2);
  background:radial-gradient(circle,#fff 0%,#c9f6ff 24%,rgba(29,192,213,.75) 46%,rgba(107,81,237,.3) 64%,transparent 78%)}
.dock.closing .dock-flash{animation:dockFlash .5s .3s cubic-bezier(.16,.92,.3,1) forwards}
@keyframes dockFlash{
  0%{opacity:0;transform:translate(-50%,50%) scale(.2)}
  26%{opacity:1;transform:translate(-50%,50%) scale(4.4)}
  60%{opacity:.75;transform:translate(-50%,50%) scale(1.5)}
  100%{opacity:0;transform:translate(-50%,50%) scale(.9)}}

/* le halo se reforme en se rétractant, la bulle rebondit à l'arrivée */
.dock.closing .dock-halo{animation:haloReform .5s .26s cubic-bezier(.2,1.3,.35,1) backwards}
@keyframes haloReform{0%{opacity:0;transform:translate(-50%,50%) scale(3.4) rotate(150deg)}100%{opacity:1;transform:translate(-50%,50%) scale(1) rotate(0deg)}}
.dock.closing .dock-btn{animation:btnReform .46s .3s cubic-bezier(.24,1.5,.4,1) backwards}
@keyframes btnReform{0%{opacity:0;transform:scale(.18) rotate(100deg)}60%{opacity:1}100%{opacity:1;transform:scale(1) rotate(0deg)}}

@media(prefers-reduced-motion:reduce){
  .dock-vortex,.dock-flash,.dock.open .dock-halo,.dock.closing *{animation:none!important}
  .dock-wheel,.dock.open .dock-wheel{transition:opacity .25s ease,visibility .25s;transform:none!important}
  .dock.open .mini-seg,.dock.open .shock>g,.dock.open .bandg,.dock.open .aihub,.dock.open .mini-hub-default,.dock.open .galaxy{animation:none!important}
  .galaxy .arm,.galaxy .neb{animation:none!important}
}

/* segments de la mini roue : strictement la même mécanique que la grande */
.mini-seg{cursor:pointer;transition:transform .4s cubic-bezier(.34,1.46,.64,1),opacity .3s,filter .3s}
.mini-seg .msf{transition:fill .3s,stroke .3s,stroke-width .3s}
.mini-seg .mrim{transition:opacity .3s,fill .3s}
.mini-seg .mlab,.mini-seg .mico{pointer-events:none;transition:fill .3s}
.mini-seg:hover,.mini-seg.active{transform:translate(var(--tx),var(--ty))}
.mini-seg:hover .msf,.mini-seg.active .msf{fill:var(--c);stroke:#fff;stroke-width:3.4}
.mini-seg:hover .mlab,.mini-seg.active .mlab{fill:#fff}
.mini-seg:hover .mrim,.mini-seg.active .mrim{opacity:1;fill:#fff}
.mini-seg.soon .msf{stroke-dasharray:6 5}
.mini-seg:focus{outline:none}
.mini-seg:focus-visible .msf{stroke:var(--dark-blue);stroke-width:4}
#miniWheel.dimmed .mini-seg:not(:hover):not(.active){opacity:.4;filter:saturate(.4)}
.mini-hub-label{font-family:'Miriam Libre';font-weight:700;fill:var(--dark-blue)}
.mini-hub-default,.mini-hub-hover{transition:opacity .3s ease}
.mini-hub-hover{opacity:0}
#miniWheel.hovering .mini-hub-default{opacity:0}
#miniWheel.hovering .mini-hub-hover{opacity:1}

@media(max-width:620px){
  .dock{left:14px;bottom:14px;width:60px;height:60px}
  .dock-btn{width:60px;height:60px}
  .dock-btn .emark{width:34px;height:34px}
  .dock-btn .ewordmark{bottom:9px;width:27px}
  .dock-wheel{--dw:min(92vw,372px);transform-origin:30px calc(100% - 30px)}
  .dock-halo{left:30px;bottom:30px;width:78px;height:78px}
  .dock-vortex{left:30px;bottom:30px}
}