/* ============================================================
   cta.css - Systeme de boutons CANONIQUE du site (source unique)
   Toute modif d'un bouton se fait ICI, plus dans le CSS inline des pages.
   Cible les classes existantes (pas de refonte du markup).
   ============================================================ */
@property --glow{syntax:"<number>";inherits:false;initial-value:0}

/* --- structure commune lueur (le fond de chaque bouton = lueur curseur + fond couleur) --- */
/* PS5 : glass bleu console + lueur bleue (.btn-ps5.btn-ps5 = specificite qui bat les regles .hero-btns .btn-ps5 des pages) */
html body .btn-ps5.btn-ps5{
  background:radial-gradient(190px circle at var(--gx,50%) var(--gy,50%),rgba(38,140,255,calc(var(--glow)*0.95)) 0%,rgba(0,92,210,calc(var(--glow)*0.55)) 42%,transparent 68%),linear-gradient(135deg,rgba(0,114,210,0.36) 0%,rgba(0,30,80,0.26) 100%)!important;
  border:1px solid rgba(99,178,255,0.38)!important;-webkit-backdrop-filter:blur(22px) saturate(1.6)!important;backdrop-filter:blur(22px) saturate(1.6)!important;
  box-shadow:0 10px 36px 0 rgba(0,114,210,0.22),inset 0 1px 0 0 rgba(255,255,255,0.16)!important;border-radius:100px!important;color:#fff!important;position:relative!important;
  transition:filter .2s,transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,--glow .28s ease!important}
/* Xbox : glass vert console + lueur verte */
html body .btn-xbox.btn-xbox{
  background:radial-gradient(190px circle at var(--gx,50%) var(--gy,50%),rgba(72,205,52,calc(var(--glow)*0.95)) 0%,rgba(22,150,12,calc(var(--glow)*0.55)) 42%,transparent 68%),linear-gradient(135deg,rgba(61,177,41,0.36) 0%,rgba(10,40,10,0.26) 100%)!important;
  border:1px solid rgba(120,220,90,0.38)!important;-webkit-backdrop-filter:blur(22px) saturate(1.6)!important;backdrop-filter:blur(22px) saturate(1.6)!important;
  box-shadow:0 10px 36px 0 rgba(61,177,41,0.22),inset 0 1px 0 0 rgba(255,255,255,0.16)!important;border-radius:100px!important;color:#fff!important;position:relative!important;
  transition:filter .2s,transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,--glow .28s ease!important}
/* CTA roses autonomes : glass rose complet + lueur rose */
html body .notify-btn,html body .notify-cta-btn,html body .mch-cta,html body .btn-primary,html body .articles-allcta>a,html body .btn-pink,html body .nav-cta,html body .gf-cta-go,html body .gf-btn-amz,html body .gf-hero-cta,html body .drawer-cta,html body .pill-cta,html body .setup-btn,html body .sb-btn,html body .btn-row,html body .btn-row-ig,html body .product-slab__cta,html body .sb-setup-btn{
  background:radial-gradient(190px circle at var(--gx,50%) var(--gy,50%),rgba(255,46,147,calc(var(--glow)*0.97)) 0%,rgba(220,12,110,calc(var(--glow)*0.55)) 42%,transparent 68%),linear-gradient(135deg,rgba(255,46,147,0.42) 0%,rgba(120,20,70,0.30) 100%)!important;
  border:1px solid rgba(255,140,200,0.42)!important;-webkit-backdrop-filter:blur(22px) saturate(1.6)!important;backdrop-filter:blur(22px) saturate(1.6)!important;
  box-shadow:0 10px 36px 0 rgba(255,46,147,0.28),inset 0 1px 0 0 rgba(255,255,255,0.16)!important;border-radius:100px!important;color:#fff!important;position:relative!important;
  transition:filter .2s,transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,--glow .28s ease!important}
/* teal : garde sa couleur + lueur teal */
/* teal : glass teal */
html body .btn-teal{background:radial-gradient(190px circle at var(--gx,50%) var(--gy,50%),rgba(0,229,200,calc(var(--glow)*0.9)) 0%,rgba(0,150,132,calc(var(--glow)*0.5)) 42%,transparent 68%),linear-gradient(135deg,rgba(0,229,200,0.34) 0%,rgba(0,70,62,0.26) 100%)!important;border:1px solid rgba(120,240,225,0.4)!important;-webkit-backdrop-filter:blur(22px) saturate(1.6)!important;backdrop-filter:blur(22px) saturate(1.6)!important;box-shadow:0 10px 36px 0 rgba(0,229,200,0.24),inset 0 1px 0 0 rgba(255,255,255,0.16)!important;border-radius:100px!important;color:#fff!important;position:relative!important;transition:filter .2s,transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,--glow .28s ease!important}
/* Instant Gaming : glass orange */
html body .btn-ig,html body .gf-btn-ig{background:radial-gradient(190px circle at var(--gx,50%) var(--gy,50%),rgba(255,150,70,calc(var(--glow)*0.95)) 0%,rgba(210,70,0,calc(var(--glow)*0.55)) 42%,transparent 68%),linear-gradient(135deg,rgba(255,107,53,0.40) 0%,rgba(120,40,0,0.28) 100%)!important;border:1px solid rgba(255,150,90,0.4)!important;-webkit-backdrop-filter:blur(22px) saturate(1.6)!important;backdrop-filter:blur(22px) saturate(1.6)!important;box-shadow:0 10px 36px 0 rgba(255,107,53,0.26),inset 0 1px 0 0 rgba(255,255,255,0.16)!important;border-radius:100px!important;color:#fff!important;position:relative!important;transition:filter .2s,transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,--glow .28s ease!important}
/* gold : glass dore (texte sombre car teinte claire) */
html body .btn-gold{background:radial-gradient(190px circle at var(--gx,50%) var(--gy,50%),rgba(255,200,90,calc(var(--glow)*0.9)) 0%,rgba(200,140,20,calc(var(--glow)*0.5)) 42%,transparent 68%),linear-gradient(135deg,rgba(255,179,71,0.55) 0%,rgba(150,95,0,0.32) 100%)!important;border:1px solid rgba(255,210,130,0.5)!important;-webkit-backdrop-filter:blur(22px) saturate(1.6)!important;backdrop-filter:blur(22px) saturate(1.6)!important;box-shadow:0 10px 36px 0 rgba(255,179,71,0.28),inset 0 1px 0 0 rgba(255,255,255,0.22)!important;border-radius:100px!important;color:#1a1200!important;position:relative!important;transition:filter .2s,transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,--glow .28s ease!important}
/* purple : glass violet */
html body .btn-purple{background:radial-gradient(190px circle at var(--gx,50%) var(--gy,50%),rgba(200,90,235,calc(var(--glow)*0.95)) 0%,rgba(120,20,170,calc(var(--glow)*0.55)) 42%,transparent 68%),linear-gradient(135deg,rgba(156,39,176,0.42) 0%,rgba(60,10,90,0.30) 100%)!important;border:1px solid rgba(210,130,235,0.42)!important;-webkit-backdrop-filter:blur(22px) saturate(1.6)!important;backdrop-filter:blur(22px) saturate(1.6)!important;box-shadow:0 10px 36px 0 rgba(156,39,176,0.28),inset 0 1px 0 0 rgba(255,255,255,0.16)!important;border-radius:100px!important;color:#fff!important;position:relative!important;transition:filter .2s,transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,--glow .28s ease!important}

/* --- survol : lueur a 70% + petit lift --- */
/* survol console : on RE-AFFIRME le fond+lueur (sinon les regles .hero-btns .btn-ps5:hover des pages effacent la lueur au survol) */
html body .btn-ps5.btn-ps5:hover{background:radial-gradient(190px circle at var(--gx,50%) var(--gy,50%),rgba(38,140,255,calc(var(--glow)*0.95)) 0%,rgba(0,92,210,calc(var(--glow)*0.55)) 42%,transparent 68%),linear-gradient(135deg,rgba(0,114,210,0.36) 0%,rgba(0,30,80,0.26) 100%)!important;transform:translateY(-2px)!important;filter:brightness(1.06)!important;--glow:0.7!important}
html body .btn-xbox.btn-xbox:hover{background:radial-gradient(190px circle at var(--gx,50%) var(--gy,50%),rgba(72,205,52,calc(var(--glow)*0.95)) 0%,rgba(22,150,12,calc(var(--glow)*0.55)) 42%,transparent 68%),linear-gradient(135deg,rgba(61,177,41,0.36) 0%,rgba(10,40,10,0.26) 100%)!important;transform:translateY(-2px)!important;filter:brightness(1.06)!important;--glow:0.7!important}
html body .notify-btn:hover,html body .notify-cta-btn:hover,html body .mch-cta:hover,html body .btn-primary:hover,html body .articles-allcta>a:hover,html body .btn-pink:hover,html body .nav-cta:hover,html body .gf-cta-go:hover,html body .btn-teal:hover,html body .btn-ig:hover,html body .gf-btn-amz:hover,html body .gf-btn-ig:hover,html body .gf-hero-cta:hover,html body .drawer-cta:hover,html body .pill-cta:hover,html body .setup-btn:hover,html body .sb-btn:hover,html body .btn-row:hover,html body .btn-row-ig:hover,html body .product-slab__cta:hover,html body .sb-setup-btn:hover,html body .btn-gold:hover,html body .btn-purple:hover{transform:translateY(-2px)!important;filter:brightness(1.05)!important;--glow:0.7!important}