/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   MODE IMAGES - page Quêtes / VIP (performance)
   Les décorations lourdes (SVG avec filtres, data-URI complexes) sont remplacées par les PNG exportés
   depuis D:\Web\template (python export.py --transparent-only p-* ; python build_site.py).
   Chargée APRÈS app.css / vip.css : elle SURCHARGE sans rien supprimer (les règles CSS d'origine restent).
   Les cartes gardent leur taille libre (fond papyrus = CSS + tuile PNG), seules les pièces sont des images.
   Toutes les animations (scintillement, balancement, saut du coffre, pulsation) sont conservées.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Texture parchemin : tuile PNG 320×320 (avec alpha) au lieu du SVG feTurbulence ── */
.questboard, .qb-vip, .qb-gift, .qb-claim, .vip-rw-tile, .vlu-card{ --qb-tex:url(../img/quetes/tex.webp); }

/* ── Filigranes (volutes) et équerres métalliques : une image TL, les autres coins = miroirs (transform déjà en place) ── */
.qb-orn{ background:url(../img/quetes/orn.webp) center/contain no-repeat !important; }
.qb-cnr{ background:url(../img/quetes/cnr.webp) center/contain no-repeat !important; }
.qb-cnr::before, .qb-cnr::after, .qb-orn::before, .qb-orn::after{ content:none !important; }

/* ── Couronne de la quête S : PNG (145×76 css, or à 1:1 avec l'ancien SVG ; marge transparente 7px en haut) ; étincelles ✦ animées conservées ── */
.qb-crown{ width:145px !important; height:76px !important; top:-41px !important; margin-left:0;
  background:url(../img/quetes/crown.webp) 0 0/100% 100% no-repeat !important; filter:none !important; }
.qb-crown::before{ left:18% !important; top:30% !important; } .qb-crown::after{ right:20% !important; top:44% !important; }

/* ── Cires S / A : le PNG contient cire + lettre + laurier (+ ruban pour S) ; la cire (66px) est à 1:1, calée sur l'ancienne boîte (-6px) ── */
.qb-hot .qb-seal-hot{ color:transparent !important; text-shadow:none !important; -webkit-text-stroke:0 !important; filter:none !important; }
.qb-hot .qb-seal-hot::before{ inset:auto !important; background-size:100% 100% !important; background-position:0 0 !important; filter:none !important; }
.qb-hot-S .qb-seal-hot::before{ left:-18px !important; top:-18px !important; width:105px; height:114px; background-image:url(../img/quetes/seal-S.webp) !important; }
.qb-hot-A .qb-seal-hot::before{ left:-18px !important; top:-18px !important; width:105px; height:108px; background-image:url(../img/quetes/seal-A.webp) !important; }
.qb-hot .qb-seal-hot::after{ display:none !important; } /* ruban : déjà dans le PNG S */

/* ── Coffres : <img> à la place du SVG inline (animations saut/aura/point rouge conservées sur le conteneur) ── */
.qb-chest-img{ display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; -webkit-user-drag:none; user-select:none; }

/* ── Écusson VIP : couche de couleur (masquée par le corps, couleurs VIP en CSS) SOUS le PNG « trou » (sans texte), texte SVG léger au-dessus ── */
.qb-shield-img{ position:absolute; left:-15.385%; right:-15.385%; top:-36.667%; bottom:-10%; pointer-events:none; isolation:isolate; }
.qb-shield-img .qb-shield-color{ position:absolute; inset:0; z-index:0; display:block;
  /* mélange de haut en bas : couleur A (haut 1/4) → couleur B (bande du milieu) → couleur A (bas 1/4), avec un peu de fondu ; relief par-dessus */
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 28%, rgba(0,0,0,0) 62%, rgba(0,0,0,.45) 100%),
             linear-gradient(180deg, var(--vc) 0%, var(--vc) 22%, var(--vc2, var(--vc)) 42%, var(--vc2, var(--vc)) 58%, var(--vc) 78%, var(--vc) 100%);
  -webkit-mask:url(../img/quetes/shield-body.webp) 0 0/100% 100% no-repeat; mask:url(../img/quetes/shield-body.webp) 0 0/100% 100% no-repeat; }
.qb-shield-img::after{ content:''; position:absolute; inset:0; z-index:1; background:url(../img/quetes/shield-hole.webp) 0 0/100% 100% no-repeat; }
/* le SVG texte occupe exactement l'ancienne boîte de l'écusson (260×300 dans 340×440 : marges 40/110/40/30) */
.qb-shield-img .qb-shield-txt{ position:absolute; z-index:2; left:11.765%; right:11.765%; top:25%; bottom:6.818%; width:auto; height:auto; overflow:visible; }
.qb-vip-shield, .vlu-shield{ position:relative; }

/* ── Bannière suspendue : tissu coloré par masque (couleurs VIP en CSS) SOUS le PNG « trou » ; balancement conservé ── */
.qb-pennant-img{ position:relative; width:100%; height:100%; isolation:isolate; }
.qb-pennant-img .qb-pennant-color{ position:absolute; inset:0; z-index:0; display:block;
  background:linear-gradient(90deg, color-mix(in srgb, var(--vc) 60%, #000), color-mix(in srgb, var(--vc) 85%, #fff) 45%, var(--vc2, var(--vc)) 60%, color-mix(in srgb, var(--vc2, var(--vc)) 60%, #000));
  -webkit-mask:url(../img/quetes/pennant-cloth.webp) 0 0/100% 100% no-repeat; mask:url(../img/quetes/pennant-cloth.webp) 0 0/100% 100% no-repeat; }
.qb-pennant-img::after{ content:''; position:absolute; inset:0; z-index:1; background:url(../img/quetes/pennant-hole.webp) 0 0/100% 100% no-repeat; }

/* ── Barre de feu VIP : tuile PNG défilée (au lieu des 2 nappes feTurbulence) ; chaleur/étincelles/lueur conservées ── */
.qb-vip-fill{ background:url(../img/quetes/fire.webp) 0 0/auto 100% repeat-x, linear-gradient(90deg,#6b1010 0,#b91c1c 18%,#e2580c 45%,#f59e0b 75%,#fbbf24 100%) !important;
  animation:vipFireImg 4s linear infinite, vipHeat 1.3s ease-in-out infinite alternate !important; }
@keyframes vipFireImg{ from{ background-position:0 0, 0 0; } to{ background-position:-400px 0, 0 0; } }

/* Mode léger : les images restent, seules les animations tombent (déjà géré par .qb-lite) */