/* ===== Applications v2 : carte active (clic) ===== */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
.card.app{cursor:pointer;transition:opacity .7s var(--ease),transform .7s var(--ease),translate .45s var(--ease),scale .6s var(--ease),border-color .35s,background .35s;transition-delay:var(--d,0s)}
.app>img,.app>h3,.app>p,.app>.btn,.app>.badge{position:relative;z-index:1}
.fx-toggle{position:absolute;top:18px;right:18px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);z-index:2;pointer-events:none;transition:transform .55s var(--ease),background .3s,border-color .3s}
.fx-toggle::before,.fx-toggle::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;margin:-.8px 0 0 -6px;background:var(--text);border-radius:2px}
.fx-toggle::after{transform:rotate(90deg)}
.app.active .fx-toggle{transform:rotate(135deg);background:var(--blue);border-color:var(--blue)}
.app.active{scale:1.07;z-index:3;align-items:center;text-align:center;border-color:rgba(108,152,255,.7);background:rgba(255,255,255,.07)}
.app.active img,.app.active:hover img{transform:scale(1.4) perspective(500px) rotateY(calc(var(--tx,0)*1deg)) rotateX(calc(var(--ty,0)*-1deg));transition:transform .12s linear}
.app.active>h3,.app.active>.tag,.app.active>p:not(.tag),.app.active>.btn,.app.active>.badge{animation:fx-text .7s var(--ease) both}
.app.active>.tag{animation-delay:.08s}
.app.active>p:not(.tag){animation-delay:.16s}
.app.active>.btn,.app.active>.badge{animation-delay:.3s}
.apps-open .app:not(.active){opacity:.4;scale:.96}
/* bloc d'infos qui se déplie */
.fx-extra{display:grid;grid-template-rows:0fr;width:100%;position:relative;z-index:1;transition:grid-template-rows .7s var(--ease)}
.fx-extra>div{overflow:hidden;min-height:0}
.app.active .fx-extra{grid-template-rows:1fr}
.chips2{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding-bottom:22px}
.chips2 span{padding:6px 14px;border-radius:999px;font-size:.82rem;color:var(--text);border:1px solid color-mix(in srgb,var(--c) 55%,transparent);background:color-mix(in srgb,var(--c) 12%,transparent);opacity:0}
.app.active .chips2 span{animation:fx-chip .55s var(--ease) both;animation-delay:calc(.4s + var(--i)*.1s)}
.meter{padding:0 4px 22px;font-size:.85rem;color:var(--muted)}
.mrow{display:flex;justify-content:space-between;align-items:center}
.mrow b{color:var(--text);font-weight:500}
.mbar{height:8px;border-radius:8px;background:rgba(255,255,255,.08);margin:9px 0;overflow:hidden}
.mbar i{display:block;height:100%;width:100%;border-radius:8px;background:var(--c)}
.mp{color:var(--c);font-weight:600}
/* décor animé */
.fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);z-index:0;border-radius:inherit}
.app.active .fx{opacity:1}
.fx .layer{position:absolute;inset:0;translate:calc(var(--px,0)*var(--z)*1px) calc(var(--py,0)*var(--z)*1px)}
.fx .it{position:absolute;color:var(--c);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;animation-play-state:paused}
.fx .it text{fill:currentColor;stroke:none;font-family:'Space Grotesk',sans-serif}
.app.active .fx *{animation-play-state:running!important}
.fx .rise{animation:fx-rise 7s ease-in-out infinite}
.fx .float{animation:fx-float 6s ease-in-out infinite}
.fx .converge{animation:fx-converge 3.4s cubic-bezier(.5,0,.7,1) infinite}
.fx .ring{position:absolute;left:50%;top:66px;width:12px;height:12px;margin:-6px 0 0 -6px;border:1px solid var(--c);border-radius:50%;opacity:0;animation:fx-ring 2.8s ease-out infinite;animation-play-state:paused}
.fx .ring.r2{animation-delay:1.4s}
.fx.in .ring{animation-name:fx-implode}
.fx .orb{position:absolute;left:50%;top:66px;white-space:nowrap;font:500 12px Inter,sans-serif;color:#fff;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid color-mix(in srgb,var(--c) 60%,transparent);translate:calc(cos(var(--a))*var(--rx) - 50%) calc(sin(var(--a))*var(--ry) - 50%);scale:calc(.78 + .22*(1 + sin(var(--a)))/2);opacity:calc(.35 + .65*(1 + sin(var(--a)))/2);animation:fx-orbit var(--T) linear infinite;animation-delay:var(--w);animation-play-state:paused}
.fx .msg{position:absolute;max-width:116px;padding:7px 12px;border-radius:14px 14px 14px 4px;font:500 12px/1.3 Inter,sans-serif;color:#fff;background:rgba(183,156,255,.2);border:1px solid rgba(183,156,255,.5);opacity:0;animation:fx-pop 5.6s var(--ease) infinite;animation-play-state:paused}
.fx .msg.l{left:10px;top:30px}
.fx .msg.r{right:10px;top:76px;border-radius:14px 14px 4px 14px;animation-delay:2.8s}
@keyframes fx-text{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fx-chip{from{opacity:0;transform:translateY(10px) scale(.85)}to{opacity:1;transform:none}}
@keyframes fx-rise{0%{transform:translateY(46px) scale(.8) rotate(var(--r));opacity:0}20%{opacity:.75}80%{opacity:.6}100%{transform:translateY(-80px) scale(1.05) rotate(var(--r));opacity:0}}
@keyframes fx-float{0%,100%{transform:translateY(0) rotate(var(--r));opacity:.35}50%{transform:translateY(-16px) rotate(calc(var(--r) + 12deg));opacity:.75}}
@keyframes fx-converge{0%{transform:translate(var(--dx),var(--dy)) scale(1.25) rotate(var(--r));opacity:0}25%{opacity:.8}85%{opacity:.55}100%{transform:translate(0,0) scale(.2) rotate(0deg);opacity:0}}
@keyframes fx-ring{0%{width:12px;height:12px;margin:-6px 0 0 -6px;opacity:.5}100%{width:520px;height:520px;margin:-260px 0 0 -260px;opacity:0}}
@keyframes fx-implode{0%{width:520px;height:520px;margin:-260px 0 0 -260px;opacity:0}60%{opacity:.5}100%{width:12px;height:12px;margin:-6px 0 0 -6px;opacity:0}}
@keyframes fx-orbit{from{--a:0deg}to{--a:360deg}}
@keyframes fx-pop{0%{opacity:0;transform:translateY(14px) scale(.7)}10%,68%{opacity:1;transform:none}85%,100%{opacity:0;transform:translateY(-10px) scale(.95)}}
@media(max-width:820px){.app.active{scale:1.03}.fx .orb{--rx:120px!important}}