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

/* ============================================================
   BARRE COLLANTE (CRO 2026-07-26, miami) : dans #sticky-bar, deux pilules ROSES
   identiques se disputaient le clic ("Precommander GTA 6" = argent, "Je veux
   preparer l'arrivee de GTA 6" = interne). Meme couleur, meme poids : le regard
   ne tranche pas et le CTA argent perd. On garde les deux liens, on demote le
   second en fantome (meme traitement que .btn-ig le 2026-06-25). Override APRES
   la regle rose ci-dessus, meme specificite -> la derniere declaree gagne.
   ============================================================ */
html body .sb-setup-btn{
  background:linear-gradient(135deg,rgba(255,46,147,0.10) 0%,rgba(20,12,32,0.34) 100%)!important;
  border:1px solid rgba(255,140,200,0.30)!important;
  box-shadow:none!important;
  color:rgba(248,233,214,0.80)!important;
  font-weight:600!important}
html body .sb-setup-btn:hover{
  background:linear-gradient(135deg,rgba(255,46,147,0.18) 0%,rgba(20,12,32,0.42) 100%)!important;
  border-color:rgba(255,140,200,0.48)!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}}

/* ============================================================
   COLONNE VERTEBRALE 1440 - 2026-07-29
   Une seule verticale d'alignement sur tout le site.

   La regle : TOUT bloc de base vaut 1440. Le contenu a l'interieur
   prend la largeur qu'il lui faut, et la prose s'arrete a --read.
   Les heros et fonds d'image restent pleine largeur ; c'est leur
   contenu qui s'aligne sur les 1440 (via --gf-maxw et les rails).

   Controle par tools/check_spine.py (source) et
   tools/check_spine_rendered.py (rendu reel dans le navigateur).
   ============================================================ */
:root{
  --spine:1440px;        /* largeur de tout bloc de base */
  --spine-gutter:32px;   /* gouttiere sous le cap */
  --rail-pad:clamp(20px,5vw,60px);  /* padding des rails transparents */
  --read:876px;          /* mesure de lecture de la prose (~75 caracteres) */
}

/* Pied de page : carte arrondie 1440, comme les autres sections. */
body>footer{
  box-sizing:border-box;
  max-width:var(--spine);
  width:calc(100% - (var(--spine-gutter) * 2));
  margin-left:auto;
  margin-right:auto;
  margin-bottom:var(--spine-gutter);
  border-radius:24px;
  overflow:hidden;
}
@media(max-width:768px){
  body>footer{
    width:calc(100% - 24px);
    margin-bottom:16px;
    border-radius:18px;
  }
}

/* ------------------------------------------------------------
   Rails transparents : c'est leur CONTENU qui doit valoir 1440,
   pas leur boite. Sans ca leurs cartes demarrent a x=300 pendant
   que le pied de page et les sections-cartes demarrent a x=240.
   Le padding reste le meme (clamp 20->60), on elargit la boite
   d'exactement 2 paddings pour que le contenu retombe sur 1440.
   ------------------------------------------------------------ */
/* !important : sur certaines pages (fiches editions), gabarit-v1.css et
   gf-css-20260619.css se chargent APRES cta.css et reprendraient la main
   avec leur max-width:var(--gf-maxw). L'ordre des feuilles varie d'un
   gabarit a l'autre, donc on ne peut pas compter dessus. */
.gf-wrap,
.gf-hero-inner,
.hub-sec{
  max-width:calc(var(--spine) + 2 * var(--rail-pad))!important;
}

/* Le fil d'Ariane a plusieurs variantes selon les gabarits, dont une
   en padding !important : on normalise les trois axes d'un coup. */
nav.breadcrumb{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:calc(var(--spine) + 2 * var(--rail-pad))!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:var(--rail-pad)!important;
  padding-right:var(--rail-pad)!important;
}

/* ------------------------------------------------------------
   TOUS les blocs de base valent 1440. Le contenu dedans prend la
   largeur qu'il lui faut.

   .gf-panel rendait a DEUX largeurs selon son parent : 1440 dans
   .gf-buy et .gf-reco, mais 980 dans .gf-story et .gf-faq. Sur une
   fiche article ca donnait 980 / 1440 / 980 / 1440 en descendant,
   soit une alternation que l'oeil lit comme du desordre.
   ------------------------------------------------------------ */
html body .gf-story>.gf-panel,
html body .gf-faq>.gf-panel{max-width:var(--spine)}

/* Dans le bloc article, la prose garde sa mesure de lecture et reste
   centree : la carte s'elargit, le texte ne bouge pas d'un pixel.
   Les grilles (.gf-faq-grid, .gf-reco-grid, .gf-buy-list) ne sont pas
   bridees et remplissent le bloc, comme elles le font deja ailleurs. */
html body .gf-story>.gf-panel>p,
html body .gf-story>.gf-panel>h2,
html body .gf-story>.gf-panel>h3,
html body .gf-story>.gf-panel>h4,
html body .gf-story>.gf-panel>ul,
html body .gf-story>.gf-panel>ol,
html body .gf-story>.gf-panel>dl,
html body .gf-story>.gf-panel>figure,
html body .gf-story>.gf-panel>blockquote,
html body .gf-story>.gf-panel>.article-body,
html body .gf-story>.gf-panel>.price-hook,
html body .gf-story>.gf-panel>.cdw,
html body .gf-story>.gf-panel>.article-disclaimer{
  max-width:var(--read);
  /* !important : signale par l'operateur le 2026-07-31 sur gta6-date-prix-
     plateformes.html, l'image d'article et le tableau d'editions rendaient
     colles a gauche au lieu d'etre centres. Deux causes distinctes, meme
     symptome : <figure class="article-figure" style="margin:48px 0;...">
     (style INLINE, bat toute regle de feuille externe non !important) et
     .spec-table.editions-table{margin:24px 0 14px} dans
     gfshell-miami-2d2-skin.css (2 classes = specificite 0-2-0, superieure a
     ce bloc 0-1-1). max-width n'est jamais dispute (aucune autre regle ne le
     touche), seuls margin-left/right ont besoin d'etre verrouilles. */
  margin-left:auto!important;
  margin-right:auto!important;
}

/* ------------------------------------------------------------
   Pages guide et page legale : leur colonne d'article etait le
   bloc de base de la page (fond visible, enfant direct de body)
   et valait 780px, alors que le pied de page et .gf-reco de la
   MEME page valaient 1440. Le bloc passe a 1440, son contenu
   garde la mesure de lecture du reste du site (876px centres).
   ------------------------------------------------------------ */
body>.article-body,
main.legal-wrap{
  max-width:var(--spine)!important;
}
body>.article-body>*,
main.legal-wrap>*{
  max-width:var(--read);
  /* !important : meme raison que le bloc .gf-story>.gf-panel> ci-dessus
     (figures en style inline + tableaux avec regle de classe composee plus
     specifique que ce selecteur). */
  margin-left:auto!important;
  margin-right:auto!important;
}

/* ============================================================
   FOOTER SUPPORT (2026-07-30)
   .retro-counter PROMU ici depuis accueil/home-english : c'etait de la
   CSS inline propre a ces 2 pages, elle sert maintenant de composant
   partage pour le compteur du footer sur les 94 autres pages. Duplique
   sans risque sur accueil/home-english (memes valeurs, dernier gagne).
   ============================================================ */
.retro-counter{margin:22px auto 0;display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:10px;background:linear-gradient(180deg,rgba(7,5,15,.6),rgba(19,16,34,.6));border:1px solid rgba(255,46,147,.28);box-shadow:inset 0 0 18px rgba(255,46,147,.12);font-family:Barlow,sans-serif;font-size:.74rem;letter-spacing:.06em;color:rgba(242,234,216,.7)}
.retro-counter b{font-family:"Bebas Neue",monospace;font-size:1.25rem;letter-spacing:.18em;color:#fff;background:#07050F;border:1px solid rgba(255,46,147,.4);border-radius:5px;padding:2px 9px;text-shadow:0 0 10px rgba(255,46,147,.8);font-variant-numeric:tabular-nums}
.retro-counter .rc-dot{width:7px;height:7px;border-radius:50%;background:#1DD1A1;box-shadow:0 0 9px #1DD1A1;animation:rc-blink 1.6s ease-in-out infinite}
@keyframes rc-blink{0%,100%{opacity:1}50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.retro-counter .rc-dot{animation:none}}

/* Bloc confiance + soutien : sciemment SANS le systeme .btn-pink/.btn-ig
   (reserve aux CTA d'achat Amazon). Un bouton "nous soutenir" du meme
   poids visuel qu'un CTA d'achat creerait une confusion entre don et
   commande. Traitement volontairement plus discret : contour, pas de
   fond plein. */
.footer-support{
  margin:24px auto 0;
  padding-top:20px;
  border-top:1px solid var(--border);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  max-width:460px;
  margin-left:auto;
  margin-right:auto;
}
.footer-support__trust{
  font-size:.74rem;
  line-height:1.6;
  color:var(--muted);
  margin:0;
}
.footer-support__btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 18px;
  border-radius:100px;
  border:1px solid rgba(255,46,147,.4);
  background:rgba(255,46,147,.08);
  color:#F2EAD8;
  font-family:'Barlow',sans-serif;
  font-weight:700;
  font-size:.76rem;
  letter-spacing:.4px;
  text-decoration:none;
  transition:background 180ms ease,border-color 180ms ease,transform 180ms ease;
}
.footer-support__btn:hover{
  background:rgba(255,46,147,.16);
  border-color:rgba(255,46,147,.65);
  transform:translateY(-1px);
  text-decoration:none;
}