.portfolio-hub{max-width:1250px;margin:auto;padding:55px 5% 60px;--hub-size:230px;--hub-half:115px}.hub-intro .eyebrow{font-size:9px;letter-spacing:2px;color:#62bfb9}.hub-intro h1{font-size:clamp(34px,4vw,55px);line-height:1.13;letter-spacing:-2px;margin:19px 0}.hub-intro h1 em{color:#7ce1d5}.hub-intro>p:last-child{font-size:12px;line-height:1.9;color:#829e9f}.hub-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:65px;align-items:center;margin-top:25px}.hub-stage{position:relative;min-width:0;isolation:isolate}.hub-drag{height:410px;display:flex;align-items:center;justify-content:center;perspective:1000px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}.hub-drag:active{cursor:grabbing}.hub-cube{position:relative;width:var(--hub-size);height:var(--hub-size);transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.75,.25,1)}.hub-cube.dragging{transition:none}.hub-face{position:absolute;inset:0;padding:24px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;background:linear-gradient(140deg,#8bded542,var(--face-fill),#051e25cf);border:1px solid var(--face-edge);border-radius:10px;color:#edffff;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:inset 0 1px 13px #d5fffa2b,inset 0 0 45px #68e5db15,0 0 24px #00ddcc0e;overflow:hidden;cursor:pointer;text-decoration:none!important}.hub-face:before{content:'';position:absolute;inset:9px;border:1px solid #affff01c;border-radius:5px;pointer-events:none}.hub-face:after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#ffffff17,transparent 30%,transparent 70%,#7dfff50b);pointer-events:none}.hub-face>span{font:8px ui-monospace,monospace;letter-spacing:1.2px;color:#a9ded9}.hub-face>i{font:34px Georgia,serif;color:#63e8dc;margin:8px 0 2px;font-style:normal}.hub-face>strong{font-size:23px;line-height:1.1;letter-spacing:-.8px;font-weight:600}.hub-face>small{font-size:9px;color:#b5d6d3;margin-top:15px}.hub-front{--face-fill:#1b75715e;--face-edge:#66e5d9a8;transform:translateZ(var(--hub-half))}.hub-right{--face-fill:#19677970;--face-edge:#64d8e8a8;transform:rotateY(90deg) translateZ(var(--hub-half))}.hub-back{--face-fill:#2a827470;--face-edge:#9aeddba8;transform:rotateY(180deg) translateZ(var(--hub-half))}.hub-left{--face-fill:#1b75715e;--face-edge:#66e5d9a8;transform:rotateY(-90deg) translateZ(var(--hub-half))}.hub-top{--face-fill:#19677970;--face-edge:#64d8e8a8;transform:rotateX(90deg) translateZ(var(--hub-half))}.hub-bottom{--face-fill:#2a827470;--face-edge:#9aeddba8;transform:rotateX(-90deg) translateZ(var(--hub-half))}.hub-face:hover,.hub-face:focus-visible{border-color:#d3fff9;box-shadow:inset 0 0 40px #8affef33,0 0 30px #70ffe52b}.hub-orbit{position:absolute;inset:auto 0 15%;height:130px;border:1px solid #73dcd626;border-radius:50%;transform:rotateX(65deg);z-index:-1}.hub-shadow{position:absolute;bottom:25%;left:25%;width:50%;height:40px;background:#40edd528;filter:blur(24px);border-radius:50%;z-index:-1}.hub-hint{display:flex;justify-content:center;gap:20px;font:9px ui-monospace,monospace;color:#789b9b;line-height:1.8}.hub-reset{display:block;margin:10px auto 0;background:none;border:0;color:#7d9c9e;font-size:9px;min-height:35px;cursor:pointer}.hub-details>.eyebrow{font-size:8px;letter-spacing:1.6px;color:#779895;margin-bottom:20px}.hub-options{display:flex;flex-direction:column;gap:9px}.hub-options button{width:100%;border:1px solid #558e8a50;background:linear-gradient(100deg,#75d9ce09,transparent);color:#a9c5c4;display:flex;align-items:center;gap:17px;padding:17px 19px;text-align:left;cursor:pointer;font:13px Montserrat,Arial,sans-serif;transition:border-color .3s,background .3s,color .3s}.hub-options button>span{font:9px ui-monospace,monospace;color:#609c96}.hub-options button>i{margin-left:auto;font-style:normal;color:#6ccebf}.hub-options button[aria-pressed=true]{background:linear-gradient(100deg,#6ae4d51d,#113c3a1a);border-color:#69e4d5a8;color:#edfffa;box-shadow:inset 3px 0 #79e8d6,0 0 20px #56e9cc09}.hub-project{border-top:1px solid #558e8a40;margin-top:25px;padding-top:23px}.hub-project>p:first-child{font:8px ui-monospace,monospace;letter-spacing:1.3px;color:#72c5ba}.hub-project h2{font-size:26px;line-height:1.2;letter-spacing:-.7px;margin:12px 0}.hub-project>p:nth-of-type(2){font-size:11px;line-height:1.9;color:#829e9f;min-height:65px}.hub-project>.button{font-size:11px;min-height:50px;padding:13px 18px}.hub-summary{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:50px;padding-top:25px;border-top:1px solid #558e8a30;font-size:9px;line-height:1.8;color:#688c8c}.hub-summary>a{color:#9fccc7}.hub-blackout{position:fixed;inset:0;background:#010505;z-index:9998;pointer-events:none;opacity:0}.hub-drag a:focus-visible,.hub-options button:focus-visible,.hub-reset:focus-visible{outline:2px solid #a1fff2;outline-offset:5px}@media(max-width:700px){.portfolio-hub{padding:32px 23px 40px;--hub-size:175px;--hub-half:87.5px}.hub-intro .eyebrow{font-size:7px;letter-spacing:1.4px}.hub-intro h1{font-size:32px;letter-spacing:-1.5px;line-height:1.15;margin:20px 0 18px}.hub-intro>p:last-child{font-size:10px;line-height:1.9}.hub-layout{display:block;margin-top:0}.hub-drag{height:325px;perspective:850px}.hub-face{padding:18px;border-radius:8px}.hub-face>span{font-size:6px;letter-spacing:.7px}.hub-face>i{font-size:26px;margin:3px 0 0}.hub-face>strong{font-size:17px;letter-spacing:-.6px}.hub-face>small{font-size:7px;margin-top:8px}.hub-hint{font-size:7px;gap:16px}.hub-reset{font-size:8px;margin-top:5px;min-height:35px}.hub-orbit{bottom:16%;height:100px}.hub-shadow{bottom:27%}.hub-details{margin-top:27px}.hub-details>.eyebrow{font-size:7px;margin-bottom:15px}.hub-options{gap:8px}.hub-options button{font-size:12px;padding:16px 18px;min-height:50px}.hub-project{margin-top:22px;padding-top:22px}.hub-project h2{font-size:25px}.hub-project>p:nth-of-type(2){font-size:10px;min-height:0;margin-bottom:22px}.hub-summary{margin-top:32px;display:block;font-size:8px}.hub-summary>a{display:block;margin-top:14px}}@media(prefers-reduced-motion:reduce){.hub-cube,.hub-options button{transition:none}.hub-blackout{display:none}}
/* The transmission is temporary; the cube owns the space once it arrives. */
.hub-page-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hub-intro{position:fixed;inset:0;z-index:160;display:grid;place-items:center;text-align:center;pointer-events:none;padding:30px;opacity:0}.hub-intro h1{font-size:clamp(32px,5vw,65px);text-shadow:0 0 30px #63e1d552}.hub-intro[hidden]{display:none!important}.hub-layout{margin-top:0}.portfolio-hub{padding-top:35px;padding-bottom:110px}.hub-face{font-family:Montserrat,Arial,sans-serif;text-align:left;cursor:pointer}.hub-left>strong,.hub-top>strong,.hub-bottom>strong{font-size:65px;font-weight:400}.hub-left>i,.hub-top>i,.hub-bottom>i{font-size:18px}.hub-left,.hub-top,.hub-bottom{--face-fill:#13423f80;--face-edge:#78c9c777}#hub-open{position:fixed;bottom:22px;right:30px;z-index:155;width:310px;min-height:56px;box-shadow:0 0 0 6px #041416b3,0 8px 35px #0008;backdrop-filter:blur(16px);font-size:11px;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;text-decoration:none}#hub-open[aria-disabled=true]{background:#153f3d;color:#94bbb7;border-color:#63948b;cursor:default;box-shadow:0 0 0 6px #041416b3}#hub-open[aria-disabled=true]>span{opacity:.3}@media(max-width:700px){.portfolio-hub{padding-top:15px;padding-bottom:110px}.hub-drag{height:335px}.hub-intro h1{font-size:34px;line-height:1.17}.hub-details{margin-top:22px}.hub-left>strong,.hub-top>strong,.hub-bottom>strong{font-size:48px}.hub-left>i,.hub-top>i,.hub-bottom>i{font-size:14px}#hub-open{bottom:max(16px,env(safe-area-inset-bottom));left:23px;right:23px;width:auto;min-height:54px;font-size:11px}.hub-project>p:nth-of-type(2){margin-bottom:0}.hub-summary{margin-top:25px}}


.hub-face>strong.hub-quote{font-size:19px;line-height:1.3;letter-spacing:-.6px;font-weight:400}.hub-project h2{overflow-wrap:break-word}@media(max-width:700px){.hub-face>strong.hub-quote{font-size:14px;line-height:1.28;letter-spacing:-.3px}}

/* The portfolio scenery stays still. Only the introductory words remain lit. */
.portfolio-page .ambient,.portfolio-page .glass-scene,.portfolio-page .glass-scene .glass-ring,.portfolio-page .glass-scene .glass-sphere,.portfolio-page .glass-scene .glass-grid{animation:none!important;will-change:auto}
.portfolio-page .hub-intro{z-index:220}
.hub-intro-dimmer{position:fixed;inset:0;z-index:210;background:#000807;opacity:.94;pointer-events:none}
@media(prefers-reduced-motion:reduce){.hub-intro-dimmer{display:none}}


/* A vertical neon line splits, revealing the entire page behind two doors. */
.hub-dimension-door{position:fixed;inset:0;z-index:210;pointer-events:none;overflow:hidden}
.hub-dimension-half{position:absolute;top:0;bottom:0;width:50%;background:#000;box-sizing:content-box;will-change:transform}
.hub-dimension-left{left:0;border-right:4px solid transparent;box-shadow:10px 0 35px #6cffe518}
.hub-dimension-right{right:0;border-left:4px solid transparent;box-shadow:-10px 0 35px #6cffe518}
.hub-dimension-neon{position:absolute;top:0;bottom:0;left:50%;width:8px;transform:translateX(-50%);transform-origin:center bottom;background:#e5fff9;box-shadow:0 0 8px #d6fff6,0 0 24px #71ffe5,0 0 55px #1ee5c9,0 0 100px #1ee5c955;opacity:0}
@media(prefers-reduced-motion:reduce){.hub-dimension-door{display:none}}

.portfolio-page:not(.portfolio-intro-ready):before{content:"";position:fixed;inset:0;z-index:209;background:#000;pointer-events:none}.hub-dimension-left,.hub-dimension-right{box-shadow:none}.portfolio-page .hub-intro h1{color:#f1fffd}

/* The selected universe gives the launch lettering a gentle heartbeat. */
#hub-open .hub-open-label{display:inline-block;font:inherit;transform-origin:left center;max-width:calc(100% - 30px)}

#hub-open.hub-glass-out{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-color:#cffff1;box-shadow:0 0 0 1px #cefff02b,inset 0 1px 12px #eafff01f,0 8px 30px #0003;pointer-events:none}
@media(prefers-reduced-motion:reduce){}

.hub-face.hub-roll-face>strong{font-size:36px;line-height:1.05;font-weight:600}.hub-face.hub-roll-face>i{font-size:32px}.hub-options .hub-roll-option{border-style:dashed;color:#b6eee2;background:#69d5bf0a}.hub-roll-option>span{font-size:19px!important;color:#80e5d2!important}.hub-roll-status{font:10px/1.7 ui-monospace,monospace;color:#94d9cd;text-align:center;margin:8px 0 0;min-height:0}.hub-roll-status:empty{display:none}.hub-options button:disabled{opacity:.45;cursor:wait}.hub-drag[aria-busy=true]{cursor:wait;pointer-events:none}@media(max-width:700px){.hub-face.hub-roll-face>strong{font-size:26px}.hub-face.hub-roll-face>i{font-size:25px}.hub-roll-status{font-size:8px}}

.hub-face.hub-applications-face>strong{font-size:23px;font-weight:600;letter-spacing:-.8px}.hub-face.hub-applications-face>i{font-size:30px}@media(max-width:700px){.hub-face.hub-applications-face>strong{font-size:17px}.hub-face.hub-applications-face>i{font-size:24px}}
/* Un univers vivant : mouvement de fond partagé et dérive infime au repos. */
.portfolio-page .glass-scene .glass-ring{animation:background-orbit 19s ease-in-out infinite!important;will-change:transform}
.portfolio-page .glass-scene .glass-sphere{animation:background-float 15s ease-in-out infinite!important;will-change:transform}
.portfolio-page .glass-scene .glass-grid{animation:background-grid-drift 24s ease-in-out infinite!important;will-change:transform}
.hub-drag{animation:hub-idle-drift 13s 4s ease-in-out infinite;will-change:translate}
.hub-stage.hub-interacting .hub-drag{animation-play-state:paused}
@keyframes hub-idle-drift{0%,100%{translate:0 0}25%{translate:3px -2px}50%{translate:1px -5px}75%{translate:-3px -2px}}
@media(prefers-reduced-motion:reduce){.portfolio-page .glass-scene .glass-ring,.portfolio-page .glass-scene .glass-sphere,.portfolio-page .glass-scene .glass-grid,.hub-drag{animation:none!important;will-change:auto;translate:none}}
/* Cube au repos : oscillation de rotation seule, sans dérive latérale. */
.hub-drag{animation:none;translate:none;will-change:auto}
.hub-cube{animation:hub-idle-turn 9s 1s ease-in-out infinite;will-change:rotate}
.hub-stage.hub-interacting .hub-cube{animation-play-state:paused}
@keyframes hub-idle-turn{0%,100%{rotate:y 0deg}25%{rotate:y 10deg}75%{rotate:y -10deg}}
@media(prefers-reduced-motion:reduce){.hub-cube{animation:none!important;rotate:none;will-change:auto}}
/* Les trois démonstrations : icône et intitulé côte à côte. */
.hub-demo-heading{display:flex;align-items:center;gap:13px;width:100%;margin:auto 0}.hub-demo-heading>i{font:31px Georgia,serif;font-style:normal;color:#77e8d9;flex:0 0 30px}.hub-demo-heading>strong{font-size:21px;line-height:1.3;font-weight:600;letter-spacing:-.6px;overflow-wrap:normal}.hub-demo-heading>strong>span{font-size:11px;font-weight:400;letter-spacing:.3px;display:block;color:#a6dcd4;margin-bottom:5px}
@media(max-width:700px){.hub-demo-heading{gap:9px}.hub-demo-heading>i{font-size:26px;flex-basis:25px}.hub-demo-heading>strong{font-size:18px}.hub-demo-heading>strong>span{font-size:10px}}
.hub-experiences-face>strong{font-size:30px;line-height:1.15;letter-spacing:-1px}.hub-roll-face>strong{font-size:38px;line-height:1.05;letter-spacing:-1.5px}.hub-contact{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:15px 19px;margin-top:24px;border:1px solid #81d2c78c;color:#c9f6e9;background:linear-gradient(110deg,#2a7e7030,#122c301a);font-size:13px}.hub-contact:hover{background:#23544860;border-color:#b9fff0}.hub-contact>span{color:#80e4c8}.portfolio-page .contract-footer>div{display:none}.portfolio-page .contract-footer{padding-top:24px!important}
@media(max-width:700px){.hub-experiences-face>strong{font-size:24px}.hub-roll-face>strong{font-size:30px}.hub-contact{margin-top:20px}}
.hub-demo-heading>i>svg{display:block;width:28px;height:28px}
/* Garder le contact séparé de l’action d’ouverture, même avec la barre fixe. */
.hub-contact{margin-bottom:80px}
@media(max-width:700px){.hub-demo-heading>i>svg{width:24px;height:24px}.hub-contact{margin-bottom:80px}}
.hub-contact{min-height:66px;padding:20px 22px;margin-top:30px;background:linear-gradient(115deg,#76f0d6,#45d5c9);border:1px solid #b6fff0;color:#062e2a;font-size:17px;font-weight:600;box-shadow:0 0 0 4px #6ae4d515,0 8px 25px #33d5b325}.hub-contact>span{color:#063e36;font-size:22px}.hub-contact:hover{background:#98ffe7;border-color:#e4fff7;box-shadow:0 0 25px #6df9d645}
.hub-contact{scroll-margin-top:110px;scroll-margin-bottom:130px}html:has(body.portfolio-page){scroll-padding-bottom:115px}
/* Contact : retour au verre transparent, avec une cible et un titre plus grands. */
.hub-contact{min-height:76px;padding:23px 25px;background:linear-gradient(110deg,#2a7e7030,#122c301a);border:1px solid #81d2c78c;color:#c9f6e9;font-size:21px;font-weight:600;box-shadow:inset 0 1px 1px #d6fff21c,0 0 15px #55d4b51a}.hub-contact>span{color:#80e4c8;font-size:25px}.hub-contact:hover{background:#23544860;border-color:#b9fff0;box-shadow:0 0 23px #55d4b529}

/* Raccord du tour d’entrée vers la rotation ambiante sans nouvelle attente. */
.hub-stage.hub-entry-flow .hub-cube{animation-delay:0s}

/* Première visite : le cube et ses choix restent éclairés pendant le parcours 01 → 02 → 03. */
.hub-tour-dimmer{position:fixed;inset:0;background:#000b;z-index:400;pointer-events:none;animation:hub-tour-dim-in .55s ease-out both}
body.hub-onboarding main{isolation:auto}
body.hub-onboarding .hub-stage,body.hub-onboarding .hub-options{position:relative;z-index:401}
body.hub-onboarding .hub-options{background:#071b1de8;border-radius:3px;box-shadow:0 0 35px #071b1d88}
body.hub-onboarding .hub-cube{transition:transform 1.05s cubic-bezier(.22,.65,.25,1)}
.hub-options .hub-tour-selected{border-color:#b6fff0!important;color:#effffb!important;background:linear-gradient(100deg,#6ae4d545,#134c4840)!important;box-shadow:inset 3px 0 #baffee,0 0 22px #56e9cc36!important}
@keyframes hub-tour-dim-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.hub-tour-dimmer{display:none}}

/* Une face bien droite après l’inertie, puis confirmation lumineuse du choix. */
.hub-stage.hub-interacting .hub-cube{animation:none;rotate:none}
.hub-options .hub-face-illuminated{animation:hub-selection-illuminate .95s ease-out both}
@keyframes hub-selection-illuminate{0%{box-shadow:inset 3px 0 #79e8d6,0 0 0 #70f5db00}40%{border-color:#c2fff1;color:#f3fffc;box-shadow:inset 3px 0 #c5fff0,0 0 24px #70f5db55;background-color:#4de3c62c}100%{box-shadow:inset 3px 0 #79e8d6,0 0 12px #70f5db15}}
@media(prefers-reduced-motion:reduce){.hub-options .hub-face-illuminated{animation:none}}

/* La lumière revient progressivement, sans changement brutal de couche. */
body.hub-onboarding .hub-options{transition:background-color 1.4s cubic-bezier(.22,.61,.36,1),box-shadow 1.4s cubic-bezier(.22,.61,.36,1)}
body.hub-onboarding-ending .hub-options{background-color:transparent;box-shadow:0 0 35px #071b1d00}
.hub-cube{animation-duration:10s}
@media(prefers-reduced-motion:reduce){body.hub-onboarding .hub-options{transition:none}}

/* Pertes brèves de signal : les faces restent impeccables entre les salves. */
.hub-drag{position:relative}
.hub-signal-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:inherit;pointer-events:none;user-select:none;z-index:4;overflow:clip;mix-blend-mode:screen}
.hub-signal-volume{animation:none!important;transition:none!important;pointer-events:none;flex:none;translate:var(--signal-x,0px) 0;scale:var(--signal-stretch,1) 1;transform-origin:center}
.hub-signal-volume .hub-face{pointer-events:none;border-color:#91eadb;background:linear-gradient(140deg,#8bded570,#155b5970,#051e25b0);box-shadow:inset 0 0 18px #91eadb30}
.hub-signal-layer-0{animation:hub-signal-tear-a .65s linear both}
.hub-signal-layer-1{animation:hub-signal-tear-b .65s linear both}
.hub-signal-loss>#hub-cube>.hub-face{animation:hub-signal-gaps .65s steps(1,end) both}
@keyframes hub-signal-tear-a{
 0%,100%{opacity:0;clip-path:inset(100% 0 0)}
 8%{animation-timing-function:steps(1,end);opacity:.65;--signal-x:18px;clip-path:inset(26% 0 63%)}
 19%{animation-timing-function:steps(1,end);opacity:.85;--signal-x:-24px;clip-path:inset(44% 0 48%)}
 31%{animation-timing-function:steps(1,end);opacity:.45;--signal-x:13px;clip-path:inset(62% 0 31%)}
 42%{opacity:.75;--signal-x:-18px;--signal-stretch:1.14;clip-path:inset(31% 0 55%)}
 55%{opacity:.55;--signal-x:-12px;--signal-stretch:1.1;clip-path:inset(54% 0 41%)}
 67%{opacity:.5;--signal-x:-6px;--signal-stretch:1.055;clip-path:inset(38% 0 58%)}
 80%{opacity:.3;--signal-x:-2px;--signal-stretch:1.018;clip-path:inset(57% 0 40%)}
 92%{opacity:0;--signal-x:0px;--signal-stretch:1}
}
@keyframes hub-signal-tear-b{
 0%,100%{opacity:0;clip-path:inset(100% 0 0)}
 13%{animation-timing-function:steps(1,end);opacity:.4;--signal-x:-14px;clip-path:inset(64% 0 30%)}
 25%{animation-timing-function:steps(1,end);opacity:.65;--signal-x:28px;clip-path:inset(30% 0 65%)}
 39%{animation-timing-function:steps(1,end);opacity:.55;--signal-x:20px;clip-path:inset(56% 0 32%)}
 51%{opacity:.5;--signal-x:16px;--signal-stretch:1.12;clip-path:inset(23% 0 73%)}
 66%{opacity:.4;--signal-x:8px;--signal-stretch:1.06;clip-path:inset(46% 0 49%)}
 79%{opacity:.25;--signal-x:3px;--signal-stretch:1.02;clip-path:inset(33% 0 64%)}
 90%{opacity:0;--signal-x:0px;--signal-stretch:1}
}
@keyframes hub-signal-gaps{
 0%,100%{opacity:1;mask-image:none}
 8%{animation-timing-function:steps(1,end);opacity:.92;mask-image:linear-gradient(#000 0 24%,transparent 24% 35%,#000 35%)}
 19%{animation-timing-function:steps(1,end);opacity:.8;mask-image:linear-gradient(#000 0 43%,transparent 43% 52%,#000 52%)}
 31%{animation-timing-function:steps(1,end);opacity:.95;mask-image:linear-gradient(#000 0 63%,transparent 63% 70%,#000 70%)}
 42%{opacity:.85;mask-image:linear-gradient(#000 0 29%,transparent 29% 43%,#000 43%)}
 55%{opacity:.96;mask-image:linear-gradient(#000 0 54%,transparent 54% 59%,#000 59%)}
 67%{opacity:.97;mask-image:linear-gradient(#000 0 38%,transparent 38% 42%,#000 42%)}
 80%{opacity:1;mask-image:linear-gradient(#000 0 57%,transparent 57% 59%,#000 59%)}
 92%{opacity:1;mask-image:none}
}
@media(prefers-reduced-motion:reduce){.hub-signal-layer{display:none}.hub-signal-loss>#hub-cube>.hub-face{animation:none}}

/* Trois signatures de signal, dans la même palette, sans mouvement du vrai cube. */
@property --signal-x{syntax:'<length>';inherits:true;initial-value:0px}
@property --signal-stretch{syntax:'<number>';inherits:true;initial-value:1}
.hub-drag[data-signal-variant="1"] .hub-signal-layer-0{animation-name:hub-signal-fragments-a}
.hub-drag[data-signal-variant="1"] .hub-signal-layer-1{animation-name:hub-signal-fragments-b}
.hub-drag[data-signal-variant="2"] .hub-signal-layer-0{animation-name:hub-signal-echo-a}
.hub-drag[data-signal-variant="2"] .hub-signal-layer-1{animation-name:hub-signal-echo-b}
.hub-signal-loss[data-signal-variant="1"]>#hub-cube>.hub-face{animation-name:hub-signal-fragment-gaps}
.hub-signal-loss[data-signal-variant="2"]>#hub-cube>.hub-face{animation-name:hub-signal-echo-gaps}
@keyframes hub-signal-fragments-a{0%,100%{opacity:0;--signal-x:0px;--signal-stretch:1;clip-path:inset(100% 0 0)}9%{animation-timing-function:steps(1,end);opacity:0.55;--signal-x:20px;--signal-stretch:1.100;clip-path:inset(29% 0 68%)}20%{animation-timing-function:steps(1,end);opacity:0.65;--signal-x:-26px;--signal-stretch:1.130;clip-path:inset(59% 0 37%)}33%{animation-timing-function:steps(1,end);opacity:0.5;--signal-x:15px;--signal-stretch:1.075;clip-path:inset(41% 0 56%)}46%{opacity:0.6;--signal-x:-17px;--signal-stretch:1.085;clip-path:inset(67% 0 28%)}60%{opacity:0.4;--signal-x:-10px;--signal-stretch:1.050;clip-path:inset(67% 0 28%)}76%{opacity:0.25;--signal-x:-3px;--signal-stretch:1.015;clip-path:inset(67% 0 28%)}94%{opacity:0;--signal-x:0px;--signal-stretch:1}}
@keyframes hub-signal-fragments-b{0%,100%{opacity:0;--signal-x:0px;--signal-stretch:1;clip-path:inset(100% 0 0)}14%{animation-timing-function:steps(1,end);opacity:0.5;--signal-x:-16px;--signal-stretch:1.080;clip-path:inset(69% 0 27%)}24%{animation-timing-function:steps(1,end);opacity:0.6;--signal-x:23px;--signal-stretch:1.115;clip-path:inset(36% 0 61%)}37%{animation-timing-function:steps(1,end);opacity:0.45;--signal-x:-19px;--signal-stretch:1.095;clip-path:inset(25% 0 70%)}49%{opacity:0.55;--signal-x:14px;--signal-stretch:1.070;clip-path:inset(47% 0 49%)}64%{opacity:0.35;--signal-x:7px;--signal-stretch:1.035;clip-path:inset(47% 0 49%)}80%{opacity:0.2;--signal-x:2px;--signal-stretch:1.010;clip-path:inset(47% 0 49%)}94%{opacity:0;--signal-x:0px;--signal-stretch:1}}
@keyframes hub-signal-echo-a{0%,100%{opacity:0;--signal-x:0px;--signal-stretch:1;clip-path:inset(100% 0 0)}10%{animation-timing-function:steps(1,end);opacity:0.4;--signal-x:-12px;--signal-stretch:1.060;clip-path:inset(35% 0 52%)}25%{animation-timing-function:steps(1,end);opacity:0.65;--signal-x:24px;--signal-stretch:1.120;clip-path:inset(51% 0 37%)}40%{opacity:0.6;--signal-x:20px;--signal-stretch:1.100;clip-path:inset(32% 0 53%)}53%{opacity:0.5;--signal-x:14px;--signal-stretch:1.070;clip-path:inset(32% 0 53%)}68%{opacity:0.35;--signal-x:7px;--signal-stretch:1.035;clip-path:inset(32% 0 53%)}82%{opacity:0.15;--signal-x:2px;--signal-stretch:1.010;clip-path:inset(32% 0 53%)}94%{opacity:0;--signal-x:0px;--signal-stretch:1}}
@keyframes hub-signal-echo-b{0%,100%{opacity:0;--signal-x:0px;--signal-stretch:1;clip-path:inset(100% 0 0)}16%{animation-timing-function:steps(1,end);opacity:0.35;--signal-x:15px;--signal-stretch:1.075;clip-path:inset(58% 0 32%)}29%{animation-timing-function:steps(1,end);opacity:0.6;--signal-x:-22px;--signal-stretch:1.110;clip-path:inset(28% 0 63%)}43%{opacity:0.55;--signal-x:-18px;--signal-stretch:1.090;clip-path:inset(61% 0 28%)}56%{opacity:0.45;--signal-x:-12px;--signal-stretch:1.060;clip-path:inset(61% 0 28%)}70%{opacity:0.3;--signal-x:-6px;--signal-stretch:1.030;clip-path:inset(61% 0 28%)}84%{opacity:0.12;--signal-x:-1px;--signal-stretch:1.005;clip-path:inset(61% 0 28%)}94%{opacity:0;--signal-x:0px;--signal-stretch:1}}
@keyframes hub-signal-fragment-gaps{0%,94%,100%{opacity:1;mask-image:none}10%{opacity:.94;mask-image:linear-gradient(#000 0 29%,transparent 29% 32%,#000 32%)}23%{opacity:.94;mask-image:linear-gradient(#000 0 59%,transparent 59% 63%,#000 63%)}37%{opacity:.94;mask-image:linear-gradient(#000 0 41%,transparent 41% 44%,#000 44%)}49%{opacity:.94;mask-image:linear-gradient(#000 0 67%,transparent 67% 72%,#000 72%)}70%{opacity:.94;mask-image:linear-gradient(#000 0 67%,transparent 67% 69%,#000 69%)}}
@keyframes hub-signal-echo-gaps{0%,94%,100%{opacity:1;mask-image:none}12%{opacity:.94;mask-image:linear-gradient(#000 0 35%,transparent 35% 48%,#000 48%)}28%{opacity:.94;mask-image:linear-gradient(#000 0 51%,transparent 51% 63%,#000 63%)}43%{opacity:.94;mask-image:linear-gradient(#000 0 32%,transparent 32% 47%,#000 47%)}60%{opacity:.94;mask-image:linear-gradient(#000 0 32%,transparent 32% 40%,#000 40%)}78%{opacity:.94;mask-image:linear-gradient(#000 0 32%,transparent 32% 34%,#000 34%)}}

/* Action au sein de la face : la barre fixe laisse la place au contenu. */
#hub-open[hidden]{display:none!important}
.hub-face-explore{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;padding:10px 9px;margin-top:10px;border:1px solid #a5f4e0a0;border-radius:4px;background:#92edda20;color:#d9fff5;font:600 10px/1.3 Montserrat,Arial,sans-serif;text-decoration:none;visibility:hidden;pointer-events:none}
.hub-face[data-selected="true"] .hub-face-explore{visibility:visible;pointer-events:auto}
.hub-face-explore:hover,.hub-face-explore:focus-visible{background:#9eeedb;color:#062b29;outline:2px solid #bffff0;outline-offset:3px}
.hub-contact{width:fit-content;max-width:100%;margin:32px auto 12px;padding:16px 20px 16px 26px;border-radius:999px;gap:28px;min-height:80px;background:#d5f6ec;border:1px solid #edfff9;color:#0a302f;box-shadow:0 8px 30px #0003,inset 0 1px #fff9;text-decoration:none}
.hub-contact .hub-contact-copy{display:flex;flex-direction:column;gap:5px;color:inherit;text-align:left}
.hub-contact-copy small{font:9px/1.2 ui-monospace,monospace;letter-spacing:1.2px;color:#34655e}
.hub-contact-copy strong{font-size:20px;font-weight:600}
.hub-contact .hub-contact-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#0a302f;color:#cffff0;font-size:22px}
.hub-contact:hover{background:#edfff8;color:#082d2a;box-shadow:0 8px 35px #8ff0d522}
.portfolio-hub{padding-bottom:35px}html:has(body.portfolio-page){scroll-padding-bottom:20px}
@media(max-width:700px){.hub-face-explore{font-size:8px;padding:8px 6px;margin-top:8px}.hub-contact{gap:20px;padding:15px 18px 15px 23px;margin-bottom:10px}.hub-contact-copy strong{font-size:18px}}

/* Le signal décoratif ne prend jamais la main sur les gestes. */
.hub-signal-layer,.hub-signal-layer *{pointer-events:none!important}
.hub-face-explore{opacity:0;translate:0 5px;transition:opacity .55s ease,translate .65s cubic-bezier(.22,.61,.36,1),visibility 0s .55s,background-color .2s,color .2s}
.hub-face[data-selected="true"] .hub-face-explore{opacity:1;translate:0 0;transition-delay:.12s,.12s,0s,0s,0s}
.hub-contact{animation:hub-contact-soft-in .85s .25s cubic-bezier(.22,.61,.36,1) both}
@keyframes hub-contact-soft-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.hub-face-explore{transition:none;translate:none}.hub-contact{animation:none}}

/* Contact du portfolio : silhouette distincte, matière et couleurs Weberio. */
.hub-contact{background:linear-gradient(120deg,#15504de0,#081e29ed);border-color:#72decea8;color:#d3fff1;box-shadow:inset 0 1px #b9fff02b,0 10px 30px #0004,0 0 20px #46dbc316;backdrop-filter:blur(14px)}
.hub-contact-copy small{color:#7cbfb5}
.hub-contact .hub-contact-icon{background:#79e5d0;color:#062b2b;box-shadow:0 0 13px #69efd62b}
.hub-contact:hover{background:linear-gradient(120deg,#1d6660e8,#0a3039f0);border-color:#b5ffeb;color:#edfff9;box-shadow:inset 0 1px #cefff02b,0 8px 28px #66ebcf20}

/* Contact : un accent turquoise plus affirmé, distinct des choix de démonstrations. */
.hub-contact{padding:18px 22px 18px 29px;min-height:86px;background:linear-gradient(115deg,#216b65f5,#103a43f5);border:1px solid #8ff5dd;color:#effff9;box-shadow:inset 0 1px #d6fff04d,0 0 0 4px #73ead612,0 0 30px #53e3c82b,0 12px 32px #0005}
.hub-contact-copy small{color:#a5e7d8}
.hub-contact-copy strong{font-size:22px;letter-spacing:-.4px}
.hub-contact .hub-contact-icon{width:46px;height:46px;background:#91f4dc;color:#062c2a;box-shadow:0 0 18px #75f4d94d}
.hub-contact:hover{background:linear-gradient(115deg,#2c8b7ef5,#18505af5);border-color:#d2fff1;box-shadow:inset 0 1px #d6fff04d,0 0 0 4px #73ead61c,0 0 38px #53e3c845,0 12px 32px #0005}
.hub-contact:focus-visible{outline:2px solid #d8fff3;outline-offset:6px}
@media(max-width:700px){.hub-contact{padding:17px 18px 17px 25px;min-height:82px}.hub-contact-copy strong{font-size:20px}.hub-contact .hub-contact-icon{width:43px;height:43px}}

html:has(body.hub-onboarding),body.hub-onboarding{touch-action:none;overscroll-behavior:none}

/* Contact intégré au Portfolio : conserver le cube et le formulaire dans le même document. */
.portfolio-contact[hidden]{display:none!important}.portfolio-contact{position:relative;z-index:2;max-width:1100px;margin:70px auto 0;padding:65px 30px 55px;scroll-margin-top:110px;border-top:1px solid #7de5d42e;min-height:0}
.portfolio-contact .page-heading h2{font-size:clamp(32px,4.5vw,54px);line-height:1.1;letter-spacing:-1.5px;margin:0 0 24px}.portfolio-contact .page-heading>p:not(.eyebrow){color:#acc5c3;line-height:1.8}.portfolio-contact:not(.contact-is-ready) form{opacity:0}.portfolio-back-cube{grid-column:1/-1;justify-self:start;color:#98e4d5;font-size:12px;text-decoration:none;border-bottom:1px solid #73cfbd66;padding:8px 0;margin-top:20px}
@media(max-width:700px){.portfolio-contact{margin-top:40px;padding:40px 20px;scroll-margin-top:95px}.portfolio-contact .page-heading h2{font-size:36px}.portfolio-contact .contact-channels{flex-wrap:wrap;gap:14px}.portfolio-contact .page-heading{margin-bottom:30px}}