/* GFC 08/09/2026 - badge MEMBRE ELITE (groupe 48 VIP GFC) : tuiles + scintillement du badge d'en-tete.
   Remplace 81-gfc-vip-badges-20260908.css. Le badge d'en-tete lui-meme est le :after pose par footer.tpl. */
#product_list .reduction.vipd-48, #center_column .products_block .reduction.vipd-48 {
    background-color: transparent !important;
    background-image: url(/img/vip/vip-gfc-elite-tuile-2026.png) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    width: 80px !important;
    height: 27px !important;
    border: none !important;
    color: transparent !important;
    text-shadow: none !important;
}
@media (max-width: 767px) {
    #product_list .reduction.vipd-48, #center_column .products_block .reduction.vipd-48 { width: 66px !important; height: 22px !important; }
    #header_user_info span.vipaccount.vip-48 img { margin-top: 0 !important; }
}
/* scintillement : 3 etoiles qui s'allument a tour de role sur le badge d'en-tete */
#header_user_info span.vip-48 { position: relative; }
#header_user_info span.vip-48:before {
    content: "";
    position: absolute;
    right: 5px;
    top: 50%;
    width: 157px;
    height: 34px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
    background-image:
        radial-gradient(circle, #fff 0 22%, rgba(255,255,255,.75) 40%, rgba(255,255,255,0) 70%),
        radial-gradient(circle, #fff 0 22%, rgba(255,255,255,.75) 40%, rgba(255,255,255,0) 70%),
        radial-gradient(circle, #fff 0 22%, rgba(255,255,255,.75) 40%, rgba(255,255,255,0) 70%);
    background-repeat: no-repeat;
    background-position: 12% 28%, 52% 72%, 90% 24%;
    background-size: 0 0, 0 0, 0 0;
    animation: gfcVipSpark 3s linear infinite;
}
@keyframes gfcVipSpark {
    0%   { background-size: 0 0, 0 0, 0 0; }
    6%   { background-size: 12px 12px, 0 0, 0 0; }
    13%  { background-size: 0 0, 0 0, 0 0; }
    38%  { background-size: 0 0, 0 0, 0 0; }
    44%  { background-size: 0 0, 12px 12px, 0 0; }
    51%  { background-size: 0 0, 0 0, 0 0; }
    72%  { background-size: 0 0, 0 0, 0 0; }
    78%  { background-size: 0 0, 0 0, 12px 12px; }
    85%  { background-size: 0 0, 0 0, 0 0; }
    100% { background-size: 0 0, 0 0, 0 0; }
}
@media screen and (max-width: 640px) {
    #header_user_info span.vip-48:before { width: 66px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    #header_user_info span.vip-48:before { animation: none; display: none; }
}