/* ============================================================================================================================
   Composants d'ARTICLE DE BLOG (Ben 11/11/2026, refonte de l'article 38 « Comment accéder à tous les avantages ») : le contenu d'un
   article est du HTML saisi dans TinyMCE (BO), qui garde les classes et retire les <style> : les styles vivent donc ici, chargés
   sur les pages du blog (views/partial/header.php, controller Post). Classes préfixées vx-art- pour ne rien toucher d'autre ; pas
   d'enveloppe autour de l'article : les <h2> doivent rester enfants directs de .content (surligneur jaune, custom.css).
   Charte : jaune fluo #F2E70D (surligneur, Premium), fuchsia #e6007e → violet #7b2ff7 (le choix mis en avant), nuit #10101a.
   Modèle à recopier : _doc/blog/38_avantages_voxgaming.html
   ============================================================================================================================ */

.vx-art-lead { font-size: 1.12rem; line-height: 1.55; color: #2b2b3d; }
.vx-art-lead strong { background: linear-gradient(transparent 55%, rgba(242, 231, 13, .8) 55%, rgba(242, 231, 13, .8) 92%, transparent 92%); }

/* ---------- Bloc d'ouverture sombre : « 100 % gratuit » ---------- */
.vx-art-hero {
    position: relative; overflow: hidden; margin: 0 0 1.6rem; padding: 26px 26px 22px; border-radius: 18px; color: #fff;
    background: radial-gradient(circle at 85% 15%, rgba(230, 0, 126, .55) 0%, transparent 45%),
                radial-gradient(circle at 10% 110%, rgba(123, 47, 247, .6) 0%, transparent 50%), #10101a;
}
.vx-art-hero-kicker { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 50rem; background: #F2E70D; color: #10101a;
    font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.vx-art-hero-title { display: block; margin-bottom: 6px; font-size: 1.55rem; font-weight: 900; line-height: 1.2; color: #fff; }
.vx-art-hero-title span { color: #F2E70D; }
.vx-art-hero p { margin: 0; color: #d6d6e4; font-size: 1rem; }
.vx-art-hero > *:not(.vx-art-jackpot) { position: relative; z-index: 1; max-width: 68%; }
/* pluie de pièces d'or, ambiance jackpot (Ben 11/11/2026) : spans .vx-art-coin posés à droite du bandeau, tailles et angles variés */
.vx-art-jackpot { position: absolute; top: 0; right: 0; bottom: 0; width: 36%; pointer-events: none; }
.vx-art-coin { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 50%;
    font-weight: 900; font-family: 'Montserrat', sans-serif; color: #8a5a00; border: 3px solid #f5c400; text-shadow: 0 1px 0 #fff3a0;
    background: radial-gradient(circle at 35% 30%, #fff6b0 0%, #ffd84a 38%, #e6a800 75%, #b07a00 100%);
    box-shadow: 0 0 18px 4px rgba(255, 200, 0, .45), inset 0 0 0 3px rgba(138, 90, 0, .25);
    /* pièces fixes : le flottement (margin + halo repeint en continu) coûtait du processeur pour rien, retiré le 11/11/2026 */ }
.vx-art-coin.vx-c1 { width: 74px; height: 74px; font-size: 34px; top: 22%; right: 30%; transform: rotate(-12deg); }
.vx-art-coin.vx-c2 { width: 50px; height: 50px; font-size: 22px; top: 8%; right: 8%; transform: rotate(14deg); }
.vx-art-coin.vx-c3 { width: 40px; height: 40px; font-size: 17px; bottom: 10%; right: 12%; transform: rotate(-20deg); }
.vx-art-coin.vx-c4 { width: 30px; height: 30px; font-size: 13px; top: 10%; right: 62%; transform: rotate(18deg); opacity: .9; }
.vx-art-coin.vx-c5 { width: 26px; height: 26px; font-size: 11px; bottom: 8%; right: 58%; transform: rotate(-8deg); opacity: .85; }
.vx-art-coin.vx-c6 { width: 20px; height: 20px; font-size: 9px; top: 46%; right: 2%; transform: rotate(25deg); opacity: .8; border-width: 2px; }
@media (prefers-reduced-motion: reduce) { .vx-art-premium-box::after { animation: none !important; } }

/* ---------- Échelle des paliers ----------
   Chaque case dit « Jusqu'à N jeux » puis « Il te faut : <condition> ». UNE COULEUR PAR TYPE DE CONDITION (Ben 11/11/2026 : sans
   couleurs on ne comprenait pas que la pastille était la condition) : gris = rien à faire (inscription), bleu = un avatar,
   or = des coins (la couleur des pièces), fuchsia = Premium. Classes : vx-art-s-free / -avatar / -coins / -premium. */
.vx-art-ladder { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 1rem 0 1.4rem; padding: 0; list-style: none; }
.vx-art-ladder li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0;
    padding: 12px 6px 12px; border: 2px solid #ececf3; border-top-width: 5px; border-radius: 14px; background: #fff; }
.vx-art-ladder li::after { content: '\203A'; position: absolute; top: 50%; right: -11px; margin-top: -12px; color: #b9b9c9; font-size: 20px; font-weight: 900; line-height: 1; }
.vx-art-ladder li:last-child::after { display: none; }
.vx-art-ladder .vx-art-upto { color: #6b6b80; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.vx-art-ladder .vx-art-n { font-size: 1.65rem; font-weight: 900; line-height: 1.05; color: #10101a; }
.vx-art-ladder .vx-art-n small { display: block; margin-top: 2px; font-size: .7rem; font-weight: 700; color: #6b6b80; text-transform: uppercase; letter-spacing: .04em; }
.vx-art-ladder .vx-art-inf { display: block; font-size: 2.3rem; line-height: .7; padding-top: 2px; }
.vx-art-ladder .vx-art-req { width: 100%; margin-top: 10px; padding-top: 8px; border-top: 1px dashed #dcdce8; color: #6b6b80; font-size: .66rem; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase; }
.vx-art-ladder .vx-art-need { display: inline-flex; align-items: center; justify-content: center; gap: 5px; margin-top: 5px; padding: 4px 9px; border-radius: 50rem;
    font-size: .76rem; font-weight: 900; line-height: 1.2; }
.vx-art-ladder .vx-art-tag { margin-top: 6px; color: #6b6b80; font-size: .68rem; font-weight: 700; line-height: 1.2; }
.vx-art-minicoin { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #b07a00;
    background: radial-gradient(circle at 35% 30%, #fff6b0 0%, #ffd84a 45%, #e6a800 100%); color: #8a5a00; font-size: 9px; font-weight: 900; line-height: 1; }
/* gris : rien à faire */
.vx-art-ladder li.vx-art-s-free { border-color: #d9d9e3; background: #f7f7fa; }
.vx-art-ladder li.vx-art-s-free .vx-art-need { background: #e3e3ec; color: #4a4a5e; }
/* bleu : un avatar */
.vx-art-ladder li.vx-art-s-avatar { border-color: #2f6bff; background: #f1f5ff; }
.vx-art-ladder li.vx-art-s-avatar .vx-art-need { background: #2f6bff; color: #fff; }
/* or : des coins */
.vx-art-ladder li.vx-art-s-coins { border-color: #f5c400; background: #fffbe6; }
.vx-art-ladder li.vx-art-s-coins .vx-art-need { background: #ffd84a; color: #5c3d00; }
/* fuchsia : Premium */
.vx-art-ladder li.vx-art-s-premium { border-color: #e6007e; background: #fff0f8; }
.vx-art-ladder li.vx-art-s-premium .vx-art-need { color: #fff; background: linear-gradient(90deg, #ff5fb4, #e6007e 55%, #7b2ff7); }

/* ---------- Cartes de choix (3 façons de gagner ses coins) ---------- */
.vx-art-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 1rem 0 1.6rem; }
.vx-art-card { position: relative; display: flex; flex-direction: column; padding: 20px 18px 18px; border: 2px solid #ececf3; border-radius: 16px; background: #fff; }
.vx-art-card-ico { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 12px; border-radius: 12px;
    background: #f1f1f8; color: #10101a; font-size: 1.25rem; }
.vx-art-card-title { display: block; margin-bottom: 4px; font-size: 1.08rem; font-weight: 900; line-height: 1.25; color: #10101a; }
.vx-art-card-gain { display: inline-block; align-self: flex-start; margin-bottom: 10px; padding: 2px 10px; border-radius: 50rem;
    background: #10101a; color: #F2E70D; font-size: .8rem; font-weight: 800; }
.vx-art-card p { flex: 1 1 auto; margin-bottom: 14px; color: #4a4a5e; font-size: .92rem; line-height: 1.5; }
.vx-art-card-badge { position: absolute; top: -12px; left: 16px; padding: 3px 10px; border-radius: 50rem; color: #fff; font-size: .72rem; font-weight: 900;
    letter-spacing: .04em; text-transform: uppercase; background: linear-gradient(90deg, #ff5fb4, #e6007e, #7b2ff7); }
.vx-art-card.vx-art-reco { border-color: #e6007e; box-shadow: 0 6px 22px rgba(230, 0, 126, .18); }
.vx-art-card.vx-art-reco .vx-art-card-ico { background: linear-gradient(135deg, #ff5fb4, #e6007e 55%, #7b2ff7); color: #fff; }

/* ---------- Boutons ---------- */
.vx-art-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border: 2px solid #10101a; border-radius: 50rem;
    background: #fff; color: #10101a !important; font-size: .9rem; font-weight: 800; line-height: 1.2; text-decoration: none !important; text-align: center;
    transition: box-shadow .15s, transform .15s; }
.vx-art-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16, 16, 26, .18); }
.vx-art-btn-fuchsia { border-color: transparent; color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    background: radial-gradient(circle at 30% 25%, #ff5fb4 0%, #e6007e 45%, #7b2ff7 100%); box-shadow: 0 3px 10px rgba(230, 0, 126, .35); }
.vx-art-btn-fuchsia:hover { box-shadow: 0 5px 16px rgba(230, 0, 126, .5); }
.vx-art-btn-yellow { border-color: #F2E70D; background: #F2E70D; }

/* ---------- Barème des coins ---------- */
.vx-art-table { width: 100%; margin: .8rem 0 .6rem; border-collapse: separate; border-spacing: 0 6px; }
.vx-art-table td { padding: 11px 14px; background: #fafaff; vertical-align: middle; font-size: .94rem; line-height: 1.35; }
.vx-art-table td:first-child { border-radius: 12px 0 0 12px; }
.vx-art-table td:last-child { border-radius: 0 12px 12px 0; text-align: right; white-space: nowrap; }
.vx-art-table td i { width: 22px; margin-right: 6px; color: #7b2ff7; text-align: center; }
.vx-art-table td small { display: block; margin-left: 28px; color: #6b6b80; font-size: .8rem; }
.vx-art-coins { display: inline-block; padding: 3px 10px; border-radius: 50rem; background: #10101a; color: #F2E70D; font-size: .82rem; font-weight: 800; }
.vx-art-note { margin: .4rem 0 1.6rem; color: #6b6b80; font-size: .86rem; }

/* ---------- Encart Premium (la porte de sortie, sobre) ---------- */
.vx-art-premium-box { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; margin: 1.2rem 0 1.4rem; padding: 20px 22px; border-radius: 16px;
    color: #fff; background: radial-gradient(circle at 22% 20%, #ff5fb4 0%, #e6007e 45%, #7b2ff7 100%); box-shadow: 0 6px 22px rgba(230, 0, 126, .3); }
/* reflet miroir qui balaie l'encart (même mouvement que .vx-btn-fuchsia) */
.vx-art-premium-box::after { content: ''; position: absolute; top: 0; left: 0; width: 30%; height: 100%; pointer-events: none; will-change: transform;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: translateX(-160%) skewX(-20deg); animation: vx-art-shine 5s ease-in-out infinite; }
@keyframes vx-art-shine { 0%, 65% { transform: translateX(-160%) skewX(-20deg); } 100% { transform: translateX(480%) skewX(-20deg); } }
.vx-art-premium-box > * { position: relative; z-index: 1; }
.vx-art-premium-box .vx-art-btn { flex: 0 0 auto; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
.vx-art-premium-box .vx-art-premium-txt { flex: 1 1 auto; }
.vx-art-premium-box strong { display: block; margin-bottom: 2px; color: #fff; font-size: 1.1rem; font-weight: 900; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.vx-art-premium-box strong span { color: #F2E70D; }
.vx-art-premium-box p { margin: 0; font-size: .92rem; color: #ffe3f3; }

/* ---------- Encart auteur de TOUS les articles (views/content/post.php, remplace .my-johnson-box, Ben 11/11/2026) ----------
   Carte de joueur sombre, dans le langage de l'habillage du site (nuit + néon) : avatar cerclé de jaune fluo avec halo,
   étiquette « // AUTEUR » façon écran d'arcade, filet jaune → fuchsia en haut, bouton jaune. */
.vx-art-author { position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px; margin: 2rem 0 2.5rem; padding: 22px 24px;
    border-radius: 18px; color: #d6d6e4;
    background: radial-gradient(circle at 0% 50%, rgba(242, 231, 13, .16) 0%, transparent 38%),
                radial-gradient(circle at 100% 0%, rgba(230, 0, 126, .35) 0%, transparent 45%), #10101a; }
.vx-art-author::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #F2E70D, #e6007e 60%, #7b2ff7); }
.vx-art-author::after { content: '// AUTEUR'; position: absolute; top: 14px; right: 18px; color: rgba(242, 231, 13, .55);
    font: 700 .62rem/1 'Courier New', monospace; letter-spacing: .22em; }
.vx-art-author-avatar { flex: 0 0 auto; display: block; width: 84px; height: 84px; padding: 4px; border-radius: 50%; background: #F2E70D;
    box-shadow: 0 0 0 4px rgba(242, 231, 13, .18), 0 0 26px rgba(242, 231, 13, .45); transition: transform .15s; }
.vx-art-author-avatar:hover { transform: scale(1.04) rotate(-3deg); }
.vx-art-author-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; border: 3px solid #10101a; object-fit: cover; margin: 0; }
.vx-art-author-txt { flex: 1 1 auto; min-width: 0; }
.vx-art-author-kicker { display: block; color: #F2E70D; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.vx-art-author-name { display: block; margin-bottom: 6px; color: #fff; font-size: 1.35rem; font-weight: 900; line-height: 1.15; }
.vx-art-author-txt p { margin: 0 0 12px; color: #c3c3d3; font-size: .9rem; line-height: 1.5; }
.vx-art-author .vx-art-btn { padding: 7px 16px; border-color: #F2E70D; background: #F2E70D; color: #10101a !important; font-size: .82rem; }
/* ---------- Mobile ---------- */
@media (max-width: 991.98px) {
    .vx-art-ladder { grid-template-columns: repeat(3, 1fr); }
    .vx-art-ladder li::after { display: none; }
    .vx-art-ladder { gap: 8px; }
}
@media (max-width: 767.98px) {
    .vx-art-cards { grid-template-columns: 1fr; gap: 20px; }
    .vx-art-hero { padding: 20px 18px 18px; }
    .vx-art-hero > *:not(.vx-art-jackpot) { max-width: 100%; }
    .vx-art-hero p { padding-right: 70px; }
    .vx-art-jackpot { width: 100%; }
    .vx-art-coin.vx-c1 { width: 46px; height: 46px; font-size: 20px; top: auto; bottom: 10px; right: 14px; }
    .vx-art-coin.vx-c2 { width: 30px; height: 30px; font-size: 13px; top: 10px; right: 12px; }
    .vx-art-coin.vx-c3 { width: 22px; height: 22px; font-size: 10px; bottom: 58px; right: 52px; border-width: 2px; }
    .vx-art-coin.vx-c4, .vx-art-coin.vx-c5, .vx-art-coin.vx-c6 { display: none; }
    .vx-art-author { align-items: flex-start; gap: 14px; padding: 22px 16px 18px; }
    .vx-art-author-avatar { width: 60px; height: 60px; padding: 3px; }
    .vx-art-author-name { font-size: 1.15rem; }
    .vx-art-hero-title { font-size: 1.3rem; }
    .vx-art-premium-box { flex-direction: column; align-items: flex-start; }
    .vx-art-table td { padding: 10px 10px; }
}
@media (max-width: 420px) {
    .vx-art-ladder { grid-template-columns: repeat(2, 1fr); }
}