/* Rendu des cosmetiques (03/10/2026) — voir public/cosmetiques-rendu.js.
   Rien ici ne s'applique a un element qui ne porte pas une classe cosm-* : sans cosmetique
   equipe, la page est identique. Animations en transform/opacity seulement. */

/* ---- pseudo : couleur ou degrade ---- */
.cosm-pseudo.cosm-degrade{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.cosm-pseudo.cosm-degrade.cosm-anime{background-size:300% 100%;animation:cosmGlisse 5s linear infinite}
.cosm-pseudo.cosm-lueur{filter:drop-shadow(0 0 3px var(--cosm-lueur))}
@keyframes cosmGlisse{from{background-position:0 0}to{background-position:300% 0}}

/* ---- cadre autour d'un avatar : l'anneau est un ::before (il peut tourner sans faire tourner l'avatar) ---- */
.cosm-cadre{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:var(--cosm-ep,3px);
  isolation:isolate;flex:none;vertical-align:middle;line-height:0}
.cosm-cadre::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--cosm-fond,#ffd76a);z-index:-1}
.cosm-cadre>.avatar,.cosm-cadre>svg,.cosm-cadre>img{border:0!important;box-shadow:0 0 0 1.5px #0b1024!important;margin:0}
.cosm-cadre.cosm-r-epique,.cosm-cadre.cosm-r-legendaire{filter:drop-shadow(0 0 5px var(--cosm-lueur,#ffd76a))}
.cosm-cadre.cosm-tourne::before{animation:cosmTourne 6s linear infinite}
.cosm-cadre.cosm-pulse::before{animation:cosmPulse 2.4s ease-in-out infinite}
@keyframes cosmTourne{to{transform:rotate(360deg)}}
@keyframes cosmPulse{50%{opacity:.55;transform:scale(1.04)}}

/* le telephone (telephone-apps.css etire le SVG a 100 % de la pastille) : le cadre prend la pastille entiere */
.ta-av .cosm-cadre{width:100%;height:100%;box-sizing:border-box}
.ta-av .cosm-cadre>svg{width:100%;height:100%}

/* ---- badge ---- */
.cosm-badge{display:inline-block;vertical-align:-3px;margin-left:5px;width:17px;height:17px;line-height:0;flex:none}
.cosm-badge svg{width:100%;height:100%;filter:drop-shadow(0 1px 1px #0008)}
.cosm-badge.cosm-r-legendaire svg{filter:drop-shadow(0 0 3px #ffd76aaa)}

/* ---- classement mondial : l'avatar de la ligne ---- */
.cm-av{display:inline-flex;vertical-align:middle;margin-right:6px}
.cm-av .avatar{width:26px;height:26px}

/* ---- celebration de but (match) : par-dessus le terrain, sous le score, <= 2,4 s ---- */
.cosm-celeb{position:absolute;left:0;right:0;top:15%;bottom:0;pointer-events:none;overflow:hidden;z-index:4}
.cosm-celeb i{position:absolute;display:block;opacity:0;will-change:transform,opacity;animation-fill-mode:both;animation-delay:var(--del,0s)}
.cosm-celeb .cosm-flash{position:absolute;inset:0;background:#e9fbff;opacity:0;animation:cosmFlash var(--duree,2.4s) linear both}
/* confettis : des papiers qui tombent en tournant */
.cosm-e-confettis i{left:var(--x);top:var(--t);width:8px;height:12px;background:var(--c);border-radius:1px;animation:cosmChute calc(var(--duree,2.4s) - var(--del,0s)) cubic-bezier(.3,.1,.6,1)}
@keyframes cosmChute{0%{opacity:0;transform:translateY(0) rotate(var(--r))}10%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(150cqh) rotate(calc(var(--r) + 540deg))}}
.cosm-e-confettis,.cosm-e-pluie-or{container-type:size}
/* pluie d'or : des pieces qui tombent, et des paillettes */
.cosm-e-pluie-or i{left:var(--x);top:var(--t);width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff8d0,var(--c) 55%,#8a5a00);box-shadow:0 0 6px #f4c04a;
  animation:cosmChute calc(var(--duree,2.4s) - var(--del,0s)) cubic-bezier(.45,0,.8,1)}
.cosm-e-pluie-or i:nth-child(3n){width:4px;height:4px;box-shadow:0 0 6px #fff}
/* serpentins : des rubans qui jaillissent des deux coins du bas */
.cosm-e-serpentins i{bottom:-6px;left:calc(50% + var(--cote) * 46%);width:5px;height:90px;border-radius:3px;background:linear-gradient(var(--c),transparent);transform-origin:50% 100%;
  animation:cosmSerpentin calc(var(--duree,2.4s) - var(--del,0s)) cubic-bezier(.2,.8,.3,1)}
@keyframes cosmSerpentin{0%{opacity:0;transform:rotate(calc(var(--cote) * -25deg)) translateY(0) scaleY(.2)}15%{opacity:1}
  100%{opacity:0;transform:rotate(calc(var(--cote) * (-25deg - var(--r) / 12))) translateY(-260px) scaleY(1)}}
/* etincelles : une gerbe qui monte du bas */
.cosm-e-etincelles i{bottom:4%;left:50%;width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c),0 0 2px #fff;
  animation:cosmGerbe calc(var(--duree,2.4s) - var(--del,0s)) cubic-bezier(.15,.75,.35,1)}
@keyframes cosmGerbe{0%{opacity:0;transform:translate(0,0)}8%{opacity:1}100%{opacity:0;transform:translate(var(--dx),calc(var(--h) * -1.6)) scale(.4)}}
/* fumigenes : des nuages qui gonflent depuis le bas (degrade radial : pas de flou a calculer) */
.cosm-e-fumigenes i{bottom:-60px;left:calc(var(--x) - 80px);width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,var(--c) 0,transparent 68%);
  animation:cosmFumee var(--duree,2.4s) ease-out}
@keyframes cosmFumee{0%{opacity:0;transform:scale(.3)}25%{opacity:.75}100%{opacity:0;transform:translateY(-140px) scale(2.3)}}
/* feux d'artifice : trois bouquets */
.cosm-e-feux i{left:var(--bx);top:var(--by);width:18px;height:4px;margin:-2px 0 0 -9px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--c) 60%,#fff);box-shadow:0 0 10px var(--c);
  animation:cosmBouquet 1.6s cubic-bezier(.1,.7,.3,1)}
@keyframes cosmBouquet{0%{opacity:0;transform:rotate(var(--a)) translateX(0)}10%{opacity:1}70%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(120px) translateY(18px)}}
/* eclairs : des zebrures et un flash */
.cosm-e-eclairs i{top:0;left:var(--x);width:5px;height:70%;background:linear-gradient(var(--c),transparent);box-shadow:0 0 12px var(--c);
  clip-path:polygon(40% 0,100% 0,55% 38%,100% 38%,10% 100%,35% 52%,0 52%);transform:skewX(calc(var(--r) / 24 - 7deg)) scaleX(5);
  animation:cosmEclair .7s steps(1) var(--del,0s) 2}
@keyframes cosmEclair{0%{opacity:1}35%{opacity:0}55%{opacity:.85}100%{opacity:0}}
@keyframes cosmFlash{0%{opacity:0}6%{opacity:.35}12%{opacity:0}30%{opacity:.2}36%{opacity:0}}
/* aurore : des voiles de lumiere qui traversent */
.cosm-e-aurore i{top:calc(var(--x) * .45);left:-60%;width:120%;height:70px;border-radius:50%;background:radial-gradient(ellipse at center,var(--c) 0,transparent 70%);
  animation:cosmVoile var(--duree,2.4s) ease-in-out}
@keyframes cosmVoile{0%{opacity:0;transform:translateX(0) skewY(-6deg)}30%{opacity:.6}100%{opacity:0;transform:translateX(70%) skewY(6deg)}}
@media (prefers-reduced-motion:reduce){.cosm-pseudo.cosm-anime,.cosm-cadre.cosm-tourne::before,.cosm-cadre.cosm-pulse::before{animation:none}}