/* L'abonnement Président VIP (03/10/2026) — public/vip.js. Violet et or, comme son badge. */
.vip-losange{display:inline-block;width:12px;height:12px;transform:rotate(45deg);border-radius:2px;background:linear-gradient(135deg,#ffd76a,#b14bff);box-shadow:0 0 8px #b14bff99;vertical-align:-1px;margin-right:2px}
.vip-onglet.on{background:linear-gradient(135deg,#b14bff33,#ffd76a2a);box-shadow:inset 0 0 0 1px #b14bff99;color:#fff}

.vip{display:flex;flex-direction:column;gap:14px;max-width:820px;margin:0 auto}
.vip-hero{position:relative;padding:20px;border-radius:18px;background:radial-gradient(120% 140% at 0% 0%,#3b0f6e 0%,#1a1033 55%,#100b20 100%);border:1px solid #b14bff66;box-shadow:0 10px 40px #0007;overflow:hidden}
.vip-hero::after{content:"";position:absolute;inset:-40% -20% auto auto;width:260px;height:260px;background:radial-gradient(circle,#ffd76a22,transparent 70%);pointer-events:none}
.vip-hero.actif{border-color:#ffd76a88}
.vip-hero-tete{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.vip-embleme{flex:none;width:42px;height:42px;transform:rotate(45deg);border-radius:8px;background:linear-gradient(135deg,#ffd76a,#b14bff 70%);box-shadow:0 0 22px #b14bff88,inset 0 0 0 2px #fff4}
.vip-nom{font-size:24px;font-weight:900;letter-spacing:.3px;color:#fff}
.vip-prix{font-size:20px;font-weight:800;color:#ffd76a}
.vip-prix small{font-size:13px;font-weight:600;color:#cdbfe8}
.vip-statut{margin-left:auto;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:800;background:#2ee59d22;color:#7dffc9;border:1px solid #2ee59d66}
.vip-statut.resilie{background:#ffffff12;color:#e2dcf2;border-color:#ffffff33}
.vip-statut.impaye{background:#ff7a1a22;color:#ffb27a;border-color:#ff7a1a77}

.vip-av{list-style:none;margin:16px 0 4px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.vip-av li{padding:10px 12px;border-radius:12px;background:#ffffff0a;border:1px solid #ffffff14;display:flex;flex-direction:column;gap:3px}
.vip-av b{color:#fff;font-size:14px}
.vip-av span{color:#c9c1e0;font-size:12.5px;line-height:1.45}

.vip-mois{display:flex;align-items:center;gap:14px;margin:14px 0 4px;padding:12px;border-radius:14px;background:linear-gradient(135deg,#ffd76a14,#b14bff1a);border:1px solid #ffd76a55}
.vip-mois-ap{flex:none;min-width:64px;min-height:64px;display:flex;align-items:center;justify-content:center}
.vip-mois-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.vip-mois-txt small{color:#ffd76a;text-transform:uppercase;letter-spacing:1px;font-size:11px;font-weight:800}
.vip-mois-txt b{color:#fff;font-size:16px}
.vip-mois-txt span{color:#cdbfe8;font-size:12.5px}
.vip-mois-txt em{color:#7dffc9;font-style:normal;font-weight:700}
.vip-mini-txt{font-weight:800;font-size:15px}
.vip-mini-stade{display:block;max-width:128px;overflow:hidden;border-radius:8px}
.vip-mini-celeb{position:relative;display:block;width:56px;height:56px}
.vip-mini-celeb i{position:absolute;width:10px;height:10px;border-radius:2px;left:calc(8px + var(--i)*11px);top:calc(10px + var(--i)*8px);transform:rotate(calc(var(--i)*35deg))}

.vip-legal{margin:14px 0 10px;padding:12px;border-radius:12px;background:#0006;border:1px solid #ffffff1a;color:#ddd6ee;font-size:12.5px;line-height:1.55}
.vip-legal b{color:#fff}
.vip-renonce{display:block;margin-top:6px;color:#bfb6d6}
.vip .ts-btn.vip-cta,.vip-cta{width:100%;min-height:48px;font-size:16px;background:linear-gradient(135deg,#ffd76a,#e7a930)!important;color:#24123f!important;border:0;font-weight:900}
.vip-essai{margin-top:6px;font-size:12px;color:#cdbfe8;text-align:center}
.vip-info,.vip-alerte{margin:14px 0 10px;padding:12px;border-radius:12px;font-size:13.5px;line-height:1.5}
.vip-info{background:#ffffff0d;border:1px solid #ffffff1f;color:#e7e1f5}
.vip-alerte{background:#ff7a1a1a;border:1px solid #ff7a1a77;color:#ffd9bf}
.vip-info b,.vip-alerte b{color:#fff}
.vip-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.vip-btn{flex:1 1 200px;min-height:44px}
.vip-resilier{background:#ffffff10;border:1px solid #ffffff40;color:#fff}
.vip-confirme{margin-top:10px;padding:12px;border-radius:12px;background:#0007;border:1px solid #ffffff22}
.vip-confirme-txt{font-size:13px;color:#e7e1f5;line-height:1.5}

.vip-bonus{padding:12px 14px;border-radius:12px;background:#2ee59d12;border:1px solid #2ee59d44;color:#d7ffe9;font-size:13.5px}
.vip-titre{font-weight:800;color:#fff;font-size:15px}
.vip-titre span{font-weight:600;color:#a99fc4;font-size:12.5px;margin-left:6px}
.vip-obtenus{display:flex;gap:10px;flex-wrap:wrap}
.vip-obt{display:flex;flex-direction:column;align-items:center;gap:4px;width:92px;padding:8px;border-radius:12px;background:#ffffff0a;border:1px solid #ffd76a44}
.vip-obt small{font-size:11px;color:#ddd6ee;text-align:center;line-height:1.3}

.vip-compare{padding:14px;border-radius:14px;background:#ffffff08;border:1px dashed #ffffff33;display:flex;flex-direction:column;gap:8px;color:#e7e1f5;font-size:13.5px;line-height:1.5}
.vip-compare b{color:#fff}
.vip-compare span{display:block;color:#d6cfea}
.vip-compare .vip-btn{flex:none;align-self:flex-start}
.vip-compare-vip{font-size:12.5px;color:#bfb6d6}
.vip-pied{font-size:11.5px;color:#9a93b3;line-height:1.55;text-align:center}
.vip-pied a{color:inherit}
.vip-params .vip-info,.vip-params .vip-alerte{margin-top:4px}

@media (max-width:600px){
  .vip-hero{padding:16px}
  .vip-nom{font-size:21px}
  .vip-statut{margin-left:0}
  .vip-btn{flex:1 1 100%}
}
/* « Réservé VIP » dans la boutique premium (public/boutique-premium.js) */
.bp-btn.bp-btn-vip{background:linear-gradient(135deg,#b14bff,#7b2cbf);color:#fff;border:0;font-weight:800}