/* ============================================================
   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}

/* ============================================================
   HIERARCHIE CTA (CRO 2026-06-25, miami) : Amazon = centre de gravite.
   Instant Gaming garde sa presence mais passe en role SECONDAIRE :
   meme structure pilule, fond sombre translucide + contour orange (pas
   de glass orange plein qui rivalisait avec le bouton Amazon rose).
   Aucun CTA supprime. Override APRES la regle .btn-ig orange ci-dessus,
   meme specificite html body .btn-ig -> la derniere declaree gagne.
   ============================================================ */
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.55)) 0%,rgba(210,70,0,calc(var(--glow)*0.30)) 42%,transparent 68%),linear-gradient(135deg,rgba(255,107,53,0.14) 0%,rgba(40,22,8,0.30) 100%)!important;
  border:1px solid rgba(255,150,90,0.40)!important;
  box-shadow:0 8px 26px -10px rgba(255,107,53,0.30),inset 0 1px 0 0 rgba(255,255,255,0.08)!important;
  color:#FFD9BF!important}
html body .btn-ig:hover,html body .gf-btn-ig:hover{
  background:radial-gradient(190px circle at var(--gx,50%) var(--gy,50%),rgba(255,150,70,calc(var(--glow)*0.62)) 0%,rgba(210,70,0,calc(var(--glow)*0.34)) 42%,transparent 68%),linear-gradient(135deg,rgba(255,107,53,0.22) 0%,rgba(40,22,8,0.38) 100%)!important;
  border-color:rgba(255,170,110,0.58)!important;color:#fff!important}

/* ============================================================
   PRICE-HOOK (CRO 2026-06-25, miami) : composant prix saillant, cadre
   legal compliancier STRICT. Le -25% / l'economie sont attribues a
   Amazon. Pas de prix barre nu : le 79,99 porte toujours le label
   "prix conseille". Pas d'urgence fabriquee.
   Usage : <div class="price-hook">...</div> (voir markup pages funnel).
   ============================================================ */
.price-hook{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;
  margin:26px 0;padding:20px 22px;border-radius:14px;
  background:linear-gradient(135deg,rgba(255,46,147,0.10) 0%,rgba(255,107,53,0.06) 60%,rgba(7,5,15,0) 100%);
  border:1px solid rgba(255,46,147,0.26)}
.price-hook__main{display:flex;align-items:baseline;gap:10px}
.price-hook__amount{font-family:'Antonio','Bebas Neue',Impact,sans-serif;font-weight:700;
  font-size:clamp(2.6rem,8vw,3.6rem);line-height:0.9;letter-spacing:-0.01em;color:#FF6B35}
.price-hook__from{font-family:'Antonio','Bebas Neue',sans-serif;font-weight:700;
  font-size:0.74rem;letter-spacing:2.5px;text-transform:uppercase;color:rgba(248,233,214,0.62)}
.price-hook__store{color:#F8E9D6;font-weight:700}
.price-hook__list{display:flex;flex-direction:column;gap:3px;
  font-family:'Barlow',sans-serif;font-size:0.82rem;line-height:1.35;color:rgba(248,233,214,0.62)}
.price-hook__list s{color:rgba(248,233,214,0.55);text-decoration-color:rgba(255,46,147,0.6)}
.price-hook__save{display:inline-flex;align-items:center;align-self:center;gap:7px;
  padding:7px 13px;border-radius:100px;background:rgba(29,209,161,0.12);
  border:1px solid rgba(29,209,161,0.42);
  font-family:'Antonio','Bebas Neue',sans-serif;font-weight:700;font-size:0.78rem;
  letter-spacing:0.8px;color:#3FE0BC;white-space:nowrap}
.price-hook__save b{color:#5BE8C8;font-weight:700}
.price-hook__ult{margin-left:auto;align-self:center;text-align:right;
  font-family:'Barlow',sans-serif;font-size:0.82rem;color:rgba(248,233,214,0.62);line-height:1.3}
.price-hook__ult b{display:block;font-family:'Antonio','Bebas Neue',sans-serif;font-weight:700;
  font-size:1.5rem;letter-spacing:0.5px;color:#F8E9D6}
@media(max-width:560px){.price-hook{gap:10px 12px;padding:16px 16px}
  .price-hook__ult{margin-left:0;text-align:left;width:100%}
  .price-hook__save{align-self:flex-start}}