@layer components{.shub{flex-direction:column;display:flex;position:relative;overflow-x:clip}.shub__ink{z-index:0;pointer-events:none;opacity:.7;position:absolute;inset:0}[data-theme=light] .shub__ink{opacity:.5}.shub__main{z-index:1;flex-direction:column;flex:1 0 auto;justify-content:safe center;align-items:center;gap:clamp(8px,2vh,24px);width:100%;max-width:640px;margin:0 auto;padding:clamp(4px,1.2vh,20px) 20px clamp(12px,3.4vh,48px);display:flex;position:relative}.shub__mascot{aspect-ratio:1200/970;flex:none;max-width:100%;height:min(34vh,400px)}.shub__head{flex-direction:column;align-items:center;gap:clamp(8px,1.4vh,14px);display:flex}.shub__title{font:400 min(56px, 7.4vh, 12vw) / 1 var(--vr-font-brand);color:var(--vr-acc);text-align:center;margin:0}.shub__lead{text-align:center;max-width:440px;font:400 15px / 1.45 var(--vr-font);color:var(--vr-mute);text-wrap:pretty;margin:0}.shub__actions{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px;width:100%;max-width:540px;display:grid}.shub__btn{border-radius:var(--vr-r-card);cursor:pointer;height:clamp(44px,6.2vh,56px);transition:transform var(--vr-t-lift) var(--vr-ease-spring), opacity var(--vr-t-color) ease, border-color var(--vr-t-color) ease;border:1px solid #0000;justify-content:center;align-items:center;gap:10px;text-decoration:none;display:flex}.shub__btn:active{transform:scale(.97)}.shub__btn--main{background:var(--vr-cta);color:var(--vr-cta-ink);font:400 16px / 1 var(--vr-font-brand)}.shub__btn--ghost{background:var(--vr-card);border-color:var(--vr-line);color:var(--vr-ink);font:500 15px / 1 var(--vr-font)}.shub__at{font:500 14px / 1 var(--vr-font-mono);color:var(--vr-acc)}.shub__btn-icon{transition:transform calc(var(--vr-t-lift) * 2) var(--vr-ease-spring)}.shub__shorts{flex:none;justify-content:center;gap:clamp(32px,8vw,64px);padding-top:clamp(0px,.8vh,10px);display:flex}.shub__short{color:var(--vr-ink);flex-direction:column;align-items:center;gap:10px;text-decoration:none;display:flex}.shub__disc{aspect-ratio:1;background:var(--vr-acc);width:clamp(52px,8.4vh,76px);color:var(--vr-cta-ink);box-shadow:0 16px 30px -12px var(--vr-acc2-a90), inset 0 -8px 14px color-mix(in srgb, var(--vr-acc2) 50%, transparent);transition:transform var(--vr-t-lift) var(--vr-ease-spring);border-radius:50%;place-items:center;display:grid;position:relative}.shub__count{border-radius:var(--vr-r-pill);border:3px solid var(--vr-bg);background:var(--vr-ink);min-width:28px;height:28px;color:var(--vr-bg);font:600 12px / 1 var(--vr-font);place-items:center;padding:0 8px;display:grid;position:absolute;top:-3px;right:-8px}.shub__short[data-key=demandes] .shub__count{background:var(--vr-duo-a);color:var(--vr-on-photo)}[data-theme=light] .shub__short[data-key=demandes] .shub__count{background:var(--vr-ink);color:var(--vr-bg)}.shub__short-text{flex-direction:column;align-items:center;gap:6px;display:flex}.shub__short-title{font:600 14px / 1 var(--vr-font)}.shub__short-sub{font:500 11px / 1 var(--vr-font-mono);color:var(--vr-dim);white-space:nowrap;align-items:center;gap:6px;display:flex}.shub__dot{background:var(--vr-win);border-radius:50%;width:6px;height:6px}@media (hover:hover){.shub__btn:hover{transform:translateY(-2px)}.shub__btn--main:hover{color:var(--vr-cta-ink);opacity:.92}.shub__btn--main:hover .shub__btn-icon{transform:rotate(-12deg)scale(1.2)}.shub__btn--ghost:hover{color:var(--vr-ink);border-color:currentColor}.shub__short:hover{color:var(--vr-ink)}.shub__short:hover .shub__disc{transform:scale(1.08)}}.shub__short:focus-visible .shub__disc{transform:scale(1.08)}@media (prefers-reduced-motion:reduce){.shub__btn,.shub__btn-icon,.shub__disc{transition:none}}}
