/* UNE CELEBRITE AU STADE (03/10/2026) — voir public/celebrite-stade.js */
.cs-pop{--cs-a:#d65cff;--cs-b:#ff5c9a;--cs-fond1:#2a0f3d;--cs-fond2:#12061c;position:relative;text-align:center;padding:6px 4px 4px;max-width:420px;margin:0 auto;overflow:hidden}
.cs-pop.cs-legende{--cs-a:#ffd76a;--cs-b:#3ddc97;--cs-fond1:#3a2f0b;--cs-fond2:#0f1a10}
.cs-chip{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:linear-gradient(135deg,var(--cs-fond1),var(--cs-fond2));border:1px solid color-mix(in srgb,var(--cs-a) 55%,transparent);border-radius:999px;padding:7px 14px;
  animation:csDescend .5s cubic-bezier(.2,1.4,.4,1) both}
.cs-chip-ic{font-size:16px;display:inline-block;animation:csVibre .6s ease-in-out .3s 3}
.cs-scene{position:relative;height:170px;margin:10px auto 6px;display:flex;align-items:center;justify-content:center}
.cs-rayons{position:absolute;width:260px;height:260px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--cs-a) 30%,transparent) 0 8deg,transparent 8deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 25%,transparent 68%);mask:radial-gradient(circle,#000 25%,transparent 68%);
  animation:csTourne 18s linear infinite,csFondu .6s ease .2s both}
.cs-flash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 22% 28%,#fff 0,transparent 12%),radial-gradient(circle at 80% 62%,#fff 0,transparent 10%);
  opacity:0;animation:csFlash 2.6s ease-out .9s infinite}
.cs-portrait{position:relative;width:132px;height:132px;border-radius:50%;overflow:hidden;border:3px solid var(--cs-a);
  box-shadow:0 0 0 4px #0008,0 0 36px color-mix(in srgb,var(--cs-a) 60%,transparent);background:#0b1024;
  opacity:0;animation:csArrive .7s cubic-bezier(.2,1.3,.4,1) .35s forwards}
.cs-portrait svg,.cs-portrait img{width:100%;height:100%;display:block}
.cs-nom{font-size:clamp(22px,6.5vw,28px);font-weight:900;color:#fff;line-height:1.15;text-shadow:0 2px 14px color-mix(in srgb,var(--cs-a) 55%,transparent);
  opacity:0;animation:csHaut .45s ease .7s forwards}
.cs-metier{font-size:13px;font-weight:700;color:var(--cs-a);letter-spacing:.04em;margin-top:3px;opacity:0;animation:csHaut .45s ease .8s forwards}
.cs-txt{font-size:14.5px;line-height:1.45;color:#dde6f5;font-style:italic;margin:12px 8px 14px;opacity:0;animation:csHaut .45s ease 1s forwards}
.cs-actions{display:flex;flex-direction:column;align-items:center;gap:6px}
.cs-oui{display:flex;justify-content:center;align-items:center;gap:10px;width:100%;max-width:320px;margin:0 auto;padding:14px 20px;border:0;border-radius:14px;cursor:pointer;
  font-size:17px;font-weight:900;color:#1a0826;background:linear-gradient(135deg,var(--cs-a),var(--cs-b));box-shadow:0 8px 24px color-mix(in srgb,var(--cs-a) 35%,transparent);
  opacity:0;animation:csHaut .45s ease 1.25s forwards,csPulse 1.8s ease-in-out 2s 2}
.cs-oui:disabled{opacity:.6;cursor:wait}
.cs-pub{font-size:11px;font-weight:900;letter-spacing:.06em;background:#1a0826;color:#fff;border-radius:7px;padding:3px 7px}
.cs-non{background:none;border:0;color:#8fa1b8;text-decoration:underline;cursor:pointer;font-size:13.5px;padding:8px;opacity:0;animation:csHaut .4s ease 1.4s forwards}
.cs-ok .cs-nom,.cs-ok .cs-txt,.cs-ok .cs-oui,.cs-ok .cs-portrait{animation-delay:.1s}
.cs-ok .cs-oui{animation:csHaut .4s ease .5s forwards}
.cs-refus{padding:14px 6px 6px}
.cs-refus .cs-txt,.cs-refus .cs-non{opacity:1;animation:none}
#cs-tribune{position:fixed;left:0;right:0;margin:0 auto;width:fit-content;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:60;pointer-events:none;
  display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px);padding:7px 14px;border-radius:999px;font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:#0b1024d9;border:1px solid #ffd76a77;box-shadow:0 6px 20px #0008;animation:csHaut .5s ease both}
#cs-tribune b{color:#ffd76a}
.cs-trib-ic{font-size:15px}
.cs-trib-face{flex:none;width:26px;height:26px;border-radius:50%;overflow:hidden;border:1.5px solid #ffd76a;background:#0b1024;margin-left:-6px}
.cs-trib-face img{display:block}
@keyframes csDescend{from{opacity:0;transform:translateY(-20px) scale(.9)}to{opacity:1;transform:none}}
@keyframes csVibre{0%,100%{transform:rotate(0)}25%{transform:rotate(-16deg)}50%{transform:rotate(14deg)}75%{transform:rotate(-8deg)}}
@keyframes csTourne{to{transform:rotate(360deg)}}
@keyframes csFondu{from{opacity:0}to{opacity:1}}
@keyframes csArrive{0%{opacity:0;transform:scale(.4) rotate(-12deg)}70%{opacity:1;transform:scale(1.08) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes csHaut{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes csFlash{0%{opacity:0}4%{opacity:.55}12%{opacity:0}40%{opacity:0}44%{opacity:.4}50%{opacity:0}100%{opacity:0}}
@keyframes csPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.cs-pop *{animation-duration:.01s!important;animation-delay:0s!important;animation-iteration-count:1!important}}
