/* tg-fond-carte.css : le fond des images de cartes cadeaux, UNE seule recette (Tom, 04/11/2026).
   Le fond reprend la couleur dominante de la carte elle-même (mesurée sur ses images, voir
   tg-fond-carte.js), en dégradé doux du haut vers le bas, même angle (vertical) et même intensité
   pour toutes : une lumière blanche en haut, un léger assombrissement en bas. La carte a partout
   le même rayon de coins (6 % de sa taille) et la même ombre douce dessous, proportionnelle.
   Rien en image : que du CSS. Validé par Tom le 04/11/2026, la même recette sur téléphone et ordinateur. */

/* Les couleurs, une ligne par famille de cartes : --fc-h (haut, base éclaircie de 20 %),
   --fc (la couleur de la carte), --fc-b (bas, base assombrie de 62 %), --fc-e (éclat de la
   même teinte, plus vive, pour les lumières qui bougent sur la fiche). */
.tg-fc--psn      { --fc-h:#3b6eb0; --fc:#0a4a9c; --fc-b:#041c3b; --fc-e:#4994f3; } /* bleu PlayStation, mesuré #044797 */
.tg-fc--xbox     { --fc-h:#3ca555; --fc:#0b8f2a; --fc-b:#043610; --fc-e:#4bf172; } /* vert Xbox, mesuré #069827 */
.tg-fc--nintendo { --fc-h:#dd403f; --fc:#d4100f; --fc-b:#510606; --fc-e:#f24b4a; } /* rouge eShop, mesuré #e70d0e */
.tg-fc--steam    { --fc-h:#6e7175; --fc:#4a4d52; --fc-b:#1c1d1f; --fc-e:#b4b7bb; } /* gris Steam, mesuré #535353 */
.tg-fc--roblox   { --fc-h:#a18856; --fc:#8a6a2c; --fc-b:#342811; --fc-e:#ecb751; } /* or du logo Robux #c09a56, l'esprit du fond actuel */
.tg-fc--fortnite { --fc-h:#f3a133; --fc:#f08a00; --fc-b:#5b3400; --fc-e:#ffad3d; } /* orange V-Bucks, mesuré #fe9500 */
.tg-fc--apple    { --fc-h:#4cc6e3; --fc:#1fb8dc; --fc-b:#0c4654; --fc-e:#51ceec; } /* cyan App Store, mesuré #33dbfd */
.tg-fc--google   { --fc-h:#515151; --fc:#262626; --fc-b:#0e0e0e; --fc-e:#b8b8b8; } /* noir Google Play, éclairci pour se détacher */
.tg-fc--riot     { --fc-h:#515151; --fc:#262626; --fc-b:#0e0e0e; --fc-e:#b8b8b8; } /* noir Riot Access */
.tg-fc--freefire { --fc-h:#e18a41; --fc:#d96d12; --fc-b:#522907; --fc-e:#f0974c; } /* orange Free Fire, mesuré #e77816 */
.tg-fc--ea       { --fc-h:#3d5079; --fc:#0c2457; --fc-b:#050e21; --fc-e:#5182ec; } /* bleu nuit EA, mesuré #001748 */
.tg-fc--pubg     { --fc-h:#957b4e; --fc:#7a5a22; --fc-b:#2e220d; --fc-e:#ecb351; } /* or PUBG */
.tg-fc--defaut   { --fc-h:#555555; --fc:#2a2a2a; --fc-b:#101010; --fc-e:#b8b8b8; }

/* La recette : lumière blanche en haut, dégradé vertical de la couleur de la carte. */
.tg-fc {
  background-color: var(--fc, #2a2a2a);
  background-image:
    radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.32) 0%, rgba(255,255,255,.10) 45%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, var(--fc-h, #555) 0%, var(--fc, #2a2a2a) 46%, var(--fc-b, #101010) 100%);
}

/* La carte posée sur le fond : carrée, coins à 6 %, ombre douce dessous.
   --fc-taille est donné par chaque emplacement (vignette, fiche), téléphone puis ordinateur. */
.tg-fc-carte {
    display: block;
    width: var(--fc-taille, 80px) !important;
    height: var(--fc-taille, 80px) !important;
    max-width: 100%;
    padding: 0 !important;
    object-fit: cover !important;
    border-radius: calc(var(--fc-taille, 80px) * .06) !important;
    box-shadow:
      0 calc(var(--fc-taille, 80px) * .09) calc(var(--fc-taille, 80px) * .16) calc(var(--fc-taille, 80px) * -.05) rgba(0,0,0,.55),
      0 calc(var(--fc-taille, 80px) * .025) calc(var(--fc-taille, 80px) * .05) rgba(0,0,0,.25);
}
@media (max-width: 767.98px) {
  /* La taille de la carte à chaque emplacement (le cadre moins une marge pour l'ombre). */
  .prod-img.tg-fc { --fc-taille: 81px; }                                /* /cartes, cadre de 105 px */
  #home-bestsellers .tg-fc, #home-ingame .tg-fc { --fc-taille: 62px; }  /* accueil, cadre de 80 px */
  .sim-img.tg-fc { --fc-taille: 70px; }                                 /* fiche, cartes populaires, 90 px */
  #product-visual { --fc-taille: min(240px, 70vw); }                    /* fiche, grand visuel */
}
@media (min-width: 768px) {
  /* Ordinateur : même proportion qu'au téléphone, la carte à environ 3/4 de son cadre. */
  .prod-img.tg-fc { --fc-taille: 172px; }                               /* /cartes, cadre de 228 px */
  #home-bestsellers .tg-fc, #home-ingame .tg-fc { --fc-taille: 232px; } /* accueil, cadre de 310 px */
  .sim-img.tg-fc { --fc-taille: 70px; }                                 /* fiche, cartes populaires, 90 px de haut */
  #product-visual { --fc-taille: 430px; }                               /* fiche, grand visuel de 623 px */
}

/* Fiche produit : le fond bouge (lumière blanche qui glisse, éclats de la couleur de la carte qui ondulent, reflet qui passe).
   Seulement transform et opacity : la carte graphique du téléphone s'en charge, rien n'est
   redessiné. Coupé pour « réduire les animations » et quand le visuel sort de l'écran. */
.tg-fc-anime { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tg-fc-anime > i { position: absolute; display: block; will-change: transform, opacity; }
.tg-fc-ondule {
  left: -30%; bottom: -60%; width: 120%; height: 115%;
  background: radial-gradient(closest-side, var(--fc-e, #888) 0%, rgba(0,0,0,0) 100%);
  animation: tgFcOndule 9s ease-in-out infinite alternate;
}
.tg-fc-eclat {
  right: -40%; top: -35%; width: 105%; height: 100%;
  background: radial-gradient(closest-side, var(--fc-e, #888) 0%, rgba(0,0,0,0) 100%);
  animation: tgFcEclat 11s ease-in-out infinite alternate;
}
.tg-fc-lumiere {
  left: -40%; top: -62%; width: 110%; height: 125%;
  background: radial-gradient(closest-side, rgba(255,255,255,.62) 0%, rgba(255,255,255,.2) 55%, rgba(255,255,255,0) 100%);
  animation: tgFcLumiere 7s ease-in-out infinite alternate;
}
.tg-fc-reflet {
  top: -30%; height: 160%; left: 0; width: 40%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.26) 50%, rgba(255,255,255,0) 100%);
  transform: translate3d(-140%, 0, 0) rotate(14deg);
  animation: tgFcReflet 5.5s cubic-bezier(.45,.05,.35,1) infinite;
}
@keyframes tgFcOndule {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: .5; }
  100% { transform: translate3d(60%, -24%, 0) scale(1.35); opacity: .95; }
}
@keyframes tgFcEclat {
  0%   { transform: translate3d(0, 0, 0) scale(1.1); opacity: .85; }
  100% { transform: translate3d(-55%, 30%, 0) scale(.9); opacity: .3; }
}
@keyframes tgFcLumiere {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: .65; }
  100% { transform: translate3d(90%, 10%, 0) scale(1.15); opacity: 1; }
}
@keyframes tgFcReflet {
  0%        { transform: translate3d(-140%, 0, 0) rotate(14deg); }
  60%, 100% { transform: translate3d(360%, 0, 0) rotate(14deg); }
}
.tg-fc-anime.tg-fc-pause > i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .tg-fc-anime > i { animation: none !important; }
  .tg-fc-reflet { display: none !important; }
}